HTML 中使用阿拉伯字母的有序项目符号列表

Question

我想在 html 中制作阿拉伯语文本的项目符号列表，如下所示：

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

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

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

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

我尝试了一些东西，包括：

li {
    list-style: AL;
}

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

但它不起作用。有可能做到吗？如何做到？

Answer 1

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

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 class 然后每当你想添加一个新项目列表你添加这个 class 到每个 <li> 使用 js ，那会很乏味。

you can find the hex codes here

Answer 2

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

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

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: ".غـ"; }

请注意，此代码仅对具有 class abjd 的 <ol> 设置样式。示例：

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

JSFiddle

我在一些字母后使用 U+0640 ARABIC TATWEEL 而不是 U+200D ZERO WIDTH JOINER，因为我觉得它看起来更好。随心定制。

HTML 中使用阿拉伯字母的有序项目符号列表

Ordered Bullet List using Arabic letters in HTML

html

css

bullet

html-lists