| <!DOCTYPE html> |
| <html lang="en"> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| <title>CSS Test: language-specific display</title> |
| <link rel="author" title="Chris Lilley" href="chris@w3.org"> |
| <link rel="help" href="https://www.w3.org/TR/css-fonts-3/#language-specific-support"> |
| <link rel="help" href="https://www.w3.org/TR/css-fonts-3/##font-variant-ligatures-prop"> |
| <meta name="assert" content="However, in languages such as Turkish which uses both a dotted-i and a dotless-i, it's important to not use this ligature or use a specialized version that contains a dot over the "i"."> |
| <style> |
| @font-face { |
| font-family: Lato; |
| src: url(support/fonts/Lato-Medium.ttf); |
| } |
| .test { |
| font-size: 4em; |
| font-variant-ligatures: common-ligatures; |
| font-feature-settings: "liga" on, "clig" on; |
| margin-left: 1em; |
| font-family: Lato; |
| } |
| |
| </style> |
| <body> |
| |
| <p>Test is passed if:</p> |
| <ol> |
| <li>The word fijord on the first line uses an <strong>fi</strong> ligature</li> |
| <li>It is clear that the second line has a letter f followed by a Turkish dotless-i while the third line has a letter f followed by a (dotted) i. If an <strong>fi</strong> ligature is used on either the second or third line, it must still be possible to distinguish the two.</p> |
| |
| <p class="test" lang="en">fijord</p> |
| <section class="test" lang="tr"> |
| <p>fıstık</p> |
| <p>fikir</p> |
| </section> |
