1599841-1.html (1455B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Arabic subtending mark, CSS counter, Noto Nastaliq Urdu</title> 6 <style> 7 @font-face { 8 font-family: "NotoNastaliqUrduWeb"; 9 src: url("../fonts/NotoNastaliqUrdu-Regular.ttf") format("truetype"); 10 } 11 12 p { 13 margin-right: 40px; 14 text-align: right; 15 } 16 17 ul { 18 font-family: "NotoNastaliqUrduWeb", sans-serif; 19 counter-reset: c; 20 list-style: none; 21 } 22 23 ul.test li::before { 24 content: "\0602" counter(c, arabic-indic); 25 counter-increment: c; 26 background: green; 27 color: transparent; /* hide the glyphs to avoid Windows antialiasing 28 artifacts; we only care about the width */ 29 } 30 31 ul.ref li::before { 32 content: "\0602"; 33 background: blue; 34 color: white; 35 } 36 </style> 37 </head> 38 39 <body> 40 <p>The width of the green bar should match the blue reference block:</p> 41 42 <ul class="ref" lang="ur" dir="rtl"> 43 <li></li> 44 </ul> 45 46 <ul class="test" lang="ur" dir="rtl"> 47 <!-- list item numbers 1-9 should *not* add any width --> 48 <li></li> 49 <li></li> 50 <li></li> 51 <li></li> 52 <li></li> 53 <li></li> 54 <li></li> 55 <li></li> 56 <li></li> 57 </ul> 58 </body> 59 60 </html>