letter-spacing-cursive-002.html (1054B)
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title> 5 CSS Text Test - Letter-spacing should not be applied for Cursive Scripts. 6 </title> 7 8 <link rel="help" href="https://drafts.csswg.org/css-text-4/#cursive-tracking"> 9 <link rel="help" href="https://drafts.csswg.org/css-text-4/#example-9902d8b5"> 10 <link rel="match" href="reference/letter-spacing-cursive-002-ref.html"> 11 <meta name="assert" content="Suppress letter-spacing between Arabic letters. 12 Letter-spacing is nonetheless applied to non-Arabic characters (like spaces)."> 13 14 <style> 15 div { 16 margin: 1em; 17 font: 24px serif; 18 } 19 20 .letterspace { 21 letter-spacing: 1em; /* Does not affect Arabic text, but does affect the space */ 22 } 23 24 .ws { 25 white-space: pre; 26 } 27 .ws::after { /* Fake letter-spacing for the space only */ 28 content: ' '; 29 display: inline-block; 30 width: 1em; 31 } 32 </style> 33 </head> 34 <body> 35 <p> 36 Both Arabic texts should display identically. 37 </p> 38 <div class=letterspace> 39 الإبداع المتجدد 40 </div> 41 <br> 42 <div> 43 الإبداع<span class=ws> </span>المتجدد 44 </div> 45 <br> 46 </body> 47 </html>