Question

我想在html中制作阿拉伯语文本的子弹列表，如下所示：

أ。 السطرالأول

ب。 السطرالثاني

ت。 السطرالثالث

ث。 السطرالرابع

我尝试过几件事情，包括：

li {
    list-style: AL;
}

@counter-style AL {
    symbols: 'أ' 'ب' 'ت' 'ث'
    suffix: " ";
}

但它不起作用。有可能做到这一点吗？

Answer 1

我尝试了一种解决方法，但它确实有效：

1：将list-style-type设置为无。

ul {
    list-style-type: none;
}

2：在你的脚本中创建一个包含阿拉伯字母html十六进制代码的数组。

var bulletclasses = [" - &#x0623"," - &#x0628"," - &#x062A"];
var i = 0;

3：然后当您在列表中添加新行时，请在文本中包含十六进制代码。

$("ul").append("<li>" + todoText + bulletclasses[i] + "</li>");
i = i + 1;

我对JS和CSS不太好，可能有另外一种比这更好更清洁的方法，但动态设置符号可以完成工作，假设你的列表不会超过28项

我还想过为每个阿拉伯字母创建一个CSS类，然后每当你想要添加一个新项目列表时，你就可以使用<li>将这个类添加到每个js很乏味。

you can find the hex codes here

Answer 2

不幸的是，截至2020年，symbols()和@counter-style几乎都没有浏览器支持。

但是，这是一个基于an example from W3C的仅CSS解决方案：

ol.abjd {
  list-style: none;
}

ol.abjd > li::before {
  display: inline-block;
  width: 1em;
  margin-right: -1.5em;
  margin-left: 0.5em;
  text-align: left;
  direction: ltr;
}

ol.abjd > li:nth-child(1)::before  { content: ".أ"; }
ol.abjd > li:nth-child(2)::before  { content: ".ب"; }
ol.abjd > li:nth-child(3)::before  { content: ".جـ"; }
ol.abjd > li:nth-child(4)::before  { content: ".د"; }
ol.abjd > li:nth-child(5)::before  { content: ".هـ"; }
ol.abjd > li:nth-child(6)::before  { content: ".و"; }
ol.abjd > li:nth-child(7)::before  { content: ".ز"; }
ol.abjd > li:nth-child(8)::before  { content: ".حـ"; }
ol.abjd > li:nth-child(9)::before  { content: ".ط"; }
ol.abjd > li:nth-child(10)::before { content: ".ى"; }
ol.abjd > li:nth-child(11)::before { content: ".كـ"; }
ol.abjd > li:nth-child(12)::before { content: ".ل"; }
ol.abjd > li:nth-child(13)::before { content: ".مـ"; }
ol.abjd > li:nth-child(14)::before { content: ".ن"; }
ol.abjd > li:nth-child(15)::before { content: ".س"; }
ol.abjd > li:nth-child(16)::before { content: ".عـ"; }
ol.abjd > li:nth-child(17)::before { content: ".ف"; }
ol.abjd > li:nth-child(18)::before { content: ".صـ"; }
ol.abjd > li:nth-child(19)::before { content: ".ق"; }
ol.abjd > li:nth-child(20)::before { content: ".ر"; }
ol.abjd > li:nth-child(21)::before { content: ".ش"; }
ol.abjd > li:nth-child(22)::before { content: ".ت"; }
ol.abjd > li:nth-child(23)::before { content: ".ث"; }
ol.abjd > li:nth-child(24)::before { content: ".خـ"; }
ol.abjd > li:nth-child(25)::before { content: ".ذ"; }
ol.abjd > li:nth-child(26)::before { content: ".ضـ"; }
ol.abjd > li:nth-child(27)::before { content: ".ظ"; }
ol.abjd > li:nth-child(28)::before { content: ".غـ"; }

请注意，该代码仅对<ol>类的abjd进行样式设置。示例：

<ol class="abjd">
  <li>عنصر 1</li>
  <li>عنصر 2</li>
  …
</ol>

JSFiddle

在一些字母之后，我使用U+0640 ARABIC TATWEEL代替了U+200D ZERO WIDTH JOINER，因为我觉得它看起来更好。根据需要自定义。

使用HTML中的阿拉伯字母排序的子弹列表

2 个答案: