1599841-2.html (1381B)
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 7; 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 <b>increase</b> half-way down:</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 <li></li> 48 <li></li> 49 <!-- list item numbers 10-11 *should* make the subtending mark wider --> 50 <li></li> 51 <li></li> 52 </ul> 53 </body> 54 55 </html>