3

I would like to make a bullet list of arabic text in html like the following:

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

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

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

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

I tried a couple things including:

li {
    list-style: AL;
}

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

but it is not working. Is it possible to do it and how?

mj1261829
  • 1,200
  • 3
  • 26
  • 53

2 Answers2

3

Unfortunately, both symbols() and @counter-style have practically no browser support as of 2020.

But, here is a working CSS-only solution, based on 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: ".غـ"; }

Note that this code only styles <ol>s that have the class abjd. Example:

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

JSFiddle

I used U+0640 ARABIC TATWEEL instead of U+200D ZERO WIDTH JOINER after some letters, because I find it looking better. Customize as you like.

Nour-eddin
  • 63
  • 7
2

I tried a workaround, and it works:

1: set the list-style-type to none.

ul {
    list-style-type: none;
}

2: in your script create an array that holds the arabic letters html hex codes.

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

3: then when you append a new line to the list, include the hex code with your text.

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

I am not good with JS and CSS, there might be another way better and cleaner than this, but dynamically setting the symbols can do the job, supposing your list won't exceed 28 items.

I also thought about creating a CSS class for each Arabic letter then whenever you want to add a new item to list you add this class to each <li> using js , that would be tedious.

you can find the hex codes here

notify_my_threads
  • 110
  • 2
  • 9