2019-12-09 18:35:22 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<title>Arabic subtending mark, CSS counter, Noto Nastaliq Urdu</title>
|
|
|
|
<style>
|
|
|
|
@font-face {
|
|
|
|
font-family: "NotoNastaliqUrduWeb";
|
|
|
|
src: url("../fonts/NotoNastaliqUrdu-Regular.ttf") format("truetype");
|
|
|
|
}
|
|
|
|
|
2021-09-09 17:48:32 +03:00
|
|
|
p {
|
|
|
|
margin-right: 40px;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
2019-12-09 18:35:22 +03:00
|
|
|
ul {
|
|
|
|
font-family: "NotoNastaliqUrduWeb", sans-serif;
|
|
|
|
counter-reset: c;
|
|
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
|
2021-09-09 17:48:32 +03:00
|
|
|
ul.test li::before {
|
|
|
|
content: "\0602" counter(c, arabic-indic);
|
2019-12-09 18:35:22 +03:00
|
|
|
counter-increment: c;
|
2021-09-09 17:48:32 +03:00
|
|
|
background: green;
|
|
|
|
color: transparent; /* hide the glyphs to avoid Windows antialiasing
|
|
|
|
artifacts; we only care about the width */
|
|
|
|
}
|
|
|
|
|
|
|
|
ul.ref li::before {
|
|
|
|
content: "\0602";
|
|
|
|
background: blue;
|
|
|
|
color: white;
|
2019-12-09 18:35:22 +03:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
2021-09-09 17:48:32 +03:00
|
|
|
<p>The width of the green bar should match the blue reference block:</p>
|
|
|
|
|
|
|
|
<ul class="ref" lang="ur" dir="rtl">
|
2019-12-09 18:35:22 +03:00
|
|
|
<li></li>
|
2021-09-09 17:48:32 +03:00
|
|
|
</ul>
|
|
|
|
|
|
|
|
<ul class="test" lang="ur" dir="rtl">
|
|
|
|
<!-- list item numbers 1-9 should *not* add any width -->
|
2019-12-09 18:35:22 +03:00
|
|
|
<li></li>
|
|
|
|
<li></li>
|
|
|
|
<li></li>
|
|
|
|
<li></li>
|
|
|
|
<li></li>
|
|
|
|
<li></li>
|
|
|
|
<li></li>
|
|
|
|
<li></li>
|
|
|
|
<li></li>
|
|
|
|
</ul>
|
|
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|