hyphens-shaping-001.html (1451B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text level 3 Test: hyphenation and text-shaping</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 5 <link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping"> 6 <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property"> 7 <link rel="match" href="reference/hyphens-shaping-001-ref.html"> 8 <meta name="assert" content="Shaping characters are still shaped as if the word were not broken when the word is hyphenated."> 9 <style> 10 @font-face { 11 font-family: 'csstest_noto'; 12 src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); 13 } 14 div { 15 font-family: 'csstest_noto'; 16 font-size: 3em; 17 line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */ 18 width: 0; 19 hyphens: manual; 20 margin: 1em auto; 21 } 22 .ref { color: orange; } 23 span { color: transparent; } 24 </style> 25 26 <p>Test passes if the black text is identical to the orange text (except the color). 27 28 <div dir=rtl lang=ug class=ref>ﺩﺍﻣﻴ<br>ﺪﻯ</div> 29 30 <div dir=rtl lang=ug id=test>دامي<span>­</span>دى</div> 31 <!-- 32 Using an invisible hyphen because it isn't certain what character the UA will actually use, 33 and we shouldn't fail the reftest because of a mismatch there. 34 See also hyphens-shaping-002.html to check that some character is inserted. 35 -->