Упорядоченный список на арабском языке не работает

Мне нужно показать данные в списке заказов по порядку. пример 1, 2, 3, 3.1, 3.2, 4.....

Когда я использую следующий CSS, он показывает содержание в правильном порядке для английского языка, и если мне нужно показать похожую вещь на арабском языке, то он не работает на арабском языке. Это показывает арабский номер, когда я использую его с ul но тогда я теряю форматирование как 3.1, 3.2....

ol li:before { content: counters(item, ".") " "; counter-increment: item; font-weight:bold; }

Как я могу отформатировать список заказов, чтобы показать оглавление в упорядоченном списке как

  1. 1
  2. 2
  3. 3
  4. 3,1
  5. 3,2
  6. 3,3
  7. 4
  8. 5

https://jsfiddle.net/rkmv3rn3/

Источник

1 ответ

Решение

Нумерация для ol фактически делается с использованием счетчиков, а не стилей списка по умолчанию. Таким образом, стиль нумерации счетчика должен быть установлен на arabic-indic (без префикса версия) вместо list-style-type,

Ключевой частью кода фрагмента является строка ниже, где мы устанавливаем стиль. Третий параметр в функции счетчика - это стиль нумерации (первый - это имя счетчика, а второй - разделитель).

content: counters(item, ".", arabic-indic)" ";


ul {
  direction: rtl;
  list-style-type: arabic-indic;
}
.handbook-page ol {
  color: #687074;
  counter-reset: item;
}
ol {
  list-style-type: arabic-indic;
  direction: rtl;
  counter-reset: item;
  color: #687074;
}
ol li {
  display: block;
  padding: 5px 0;
}
ol li a {
  text-decoration: none;
  color: #687074;
  padding-left: 10px;
}
ol li:before {
  content: counters(item, ".", arabic-indic)" ";
  counter-increment: item;
  font-weight: bold;
}
<div>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>
<h1>LIST OL </h1>
<div class="page-content">
  <ol>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ol>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ol>
    <li><a href="#about">About</a>
    </li>
  </ol>
</div>
<h1>LIST UL </h1>
<div class="page-ul">
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ul>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ul>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>

Для отображения вывода как 1, 3, 2, 3, 3,3 на арабском языке вместо 3,1, 3,2, 3,3 (для подпунктов третьего li), кажется, что счетчики самостоятельного вложения не могут быть использованы, потому что число всегда добавляется, а не добавляется спереди. Если это необходимо, мы должны использовать разные счетчики для каждого уровня списка, а затем вручную добавить значение дополнительного счетчика спереди, как показано ниже.

ul {
  direction: rtl;
  list-style-type: arabic-indic;
}
.page-content > ol {
  direction: rtl;
  counter-reset: item-level1, item-level2;
  color: #687074;
}
.page-content > ol > ol{
  direction: rtl;
  counter-reset: item-level2;
  color: #687074;
}
ol li {
  display: block;
  padding: 5px 0;
}
.page-content > ol li{
  counter-increment: item-level1;
}
.page-content > ol > ol li{
  counter-increment: item-level2;
}
ol li a {
  text-decoration: none;
  color: #687074;
  padding-left: 10px;
}
ol li:before {
  content: counter(item-level1, arabic-indic)" ";
  font-weight: bold;
}
ol ol li:before {
  content: counter(item-level2, arabic-indic) "." counter(item-level1, arabic-indic)" ";
  font-weight: bold;
}
<div>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>
<h1>LIST OL </h1>
<div class="page-content">
  <ol>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ol>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ol>
    <li><a href="#about">About</a>
    </li>
  </ol>
</div>
<h1>LIST UL </h1>
<div class="page-ul">
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ul>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ul>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>

Источник
Другие вопросы по тегам