在HTML中使用阿拉伯字母创建有序列表

Question

我希望能够在HTML中制作一个如下所示的阿拉伯文项目符号列表：

أ. السطرالأول

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

ت. السطرالثالث

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

我尝试了几种方法，包括：

li {
    list-style: AL;
}

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

但它不能正常工作。这个问题能解决吗，如何解决？

- mj1261829

Answer 1

很遗憾，截至2020年，symbols()和@counter-style几乎没有浏览器支持。

但是，这里有一个基于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: ".غـ"; }

请注意，此代码仅为具有类abjd的<ol>添加样式。例如：

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

我在一些字母后使用了U+0640阿拉伯延长符号而不是U+200D零宽连接器，因为我觉得它看起来更好看。根据您的喜好进行自定义。

JSFiddle

- Nour-eddin

Answer 2

我尝试了一个解决方法，它有效：

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

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类，然后每当您想要向列表中添加新项目时，使用js将此类添加到每个<li>中，这将是繁琐的。

您可以在此处找到十六进制代码

- notify_my_threads