line-break-shaping-001.html (1399B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text level 3 Test: line-break:anywhere 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/#line-break-property"> 7 <link rel="match" href="reference/line-break-shaping-001-ref.html"> 8 <meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by line-break:anywhere"> 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: 4em; 17 } 18 section { 19 float: left; /* to sizing to the intrinsic min of the ref box*/ 20 position: relative; 21 } 22 #ref { 23 border: solid orange; 24 margin: 1rem; 25 } 26 #test { 27 border: solid blue; 28 position: absolute; /* to avoid influencing the size of the section */ 29 left: 1rem; 30 right: 1rem; 31 line-break: anywhere; 32 } 33 </style> 34 35 <p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line. 36 <section> 37 <div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div> 38 <div dir=rtl lang=ar id=test>عائلة</div> 39 </section>