shaping-tatweel-002.html (1962B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text level 3 Test: tatweel and text-shaping, cross font, fallback</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/#text-encoding"> 6 <link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf"> 7 <link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement"> 8 <link rel="match" href="reference/shaping-tatweel-002-ref.html"> 9 <meta name="assert" content="Arabic characters next to a U+0640 ARABIC TATWEEL character must take their correct positional form, even if the tatweel comes from a differnt font via font due to font fallback."> 10 <style> 11 table { 12 font-size: 3em; 13 border-spacing: 0 3px; 14 } 15 td { 16 padding: 0 0.5ch; 17 line-height: 1; 18 border: 1px solid; 19 } 20 @font-face { 21 font-family: 'primary'; 22 src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); 23 unicode-range: U+20; 24 } 25 @font-face { 26 font-family: 'tatweel'; 27 src: url('/fonts/Scheherazade-Regular.woff') format('woff'); 28 unicode-range: U+0640; 29 } 30 @font-face { 31 font-family: 'csstest_noto'; 32 src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); 33 } 34 table { 35 /*using a primary font with just U+20 (space) to get the baseline right*/ 36 font-family: 'primary', 'tatweel', 'csstest_noto'; 37 } 38 </style> 39 40 <p>Test passes if both halves of each of the pairs below are identical: 41 42 <table dir=rtl lang=ar> 43 <tr><!-- alef, final form as it doesn't have a medial form --> 44 <td>ـاـ 45 <td>ـﺎـ 46 <tr><!-- alef, final form --> 47 <td>ـا 48 <td>ـﺎ 49 <tr><!-- beh, initial form --> 50 <td>بـ 51 <td>ﺑـ 52 <tr><!-- beh, medial form --> 53 <td>ـبـ 54 <td>ـﺒـ 55 <tr><!-- beh, final form --> 56 <td>ـب 57 <td>ـﺐ 58 </table>