3

I need show data in Order List in order. example 1, 2, 3, 3.1, 3.2, 4.....

When I use following CSS, it shows table of content in proper order for English and if I have to show similar thing in Arabic then it doesn't work in Arabic. It shows Arabic number when I use it with ul but then I lose the formatting like 3.1, 3.2....

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

How can I format order list to show Table of Content in ordered list as

  1. 1
  2. 2
  3. 3
  4. 3.1
  5. 3.2
  6. 3.3
  7. 4
  8. 5

https://jsfiddle.net/rkmv3rn3/

Harry
  • 87,580
  • 25
  • 202
  • 214
Learning
  • 19,469
  • 39
  • 180
  • 373

1 Answers1

4

The numbering for the ol is actually done using counters and not default list styles. So, the counter's numbering style should be set to arabic-indic (the unprefixed version) instead of list-style-type.

The key part of the snippet code is the below line where we set the styling. The third parameter in the counter function is the the style of the numbering (first is the counter name and second is separator).

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>

For displaying the output as 1.3, 2.3, 3.3 in Arabic instead of 3.1, 3.2, 3.3 (for sub-items of third li), it seems like self nesting counters cannot be used because the number always gets appended and not added at the front. If this is needed, we have to use a different counter for each level of the lis and then manually add the sub-counter's value at the front like in below snippet.

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>
Harry
  • 87,580
  • 25
  • 202
  • 214
  • In Arabic it is showing number as `3.1`, `3.2` while it should be `1.3`, `2.3`, 3.3`,`4.3`.... Sorry i cant copy arabic numbers so i am using number for reference – Learning Feb 14 '16 at 12:48
  • I meant like this `١٠٣٫٢٠٣٫٣٠٣٫٤٠٣٫٥٠٣` – Learning Feb 14 '16 at 12:49
  • @Learning: But the original fiddle itself shows it the same way only (in English). – Harry Feb 14 '16 at 12:52
  • I am not sure if i am able to explain for English version we show sub page as 3.1, 3.2.... but for arabic version it should be `1.3, 2.3` | while is is showing as `١٠٣٫٢٠٣` it should show like this ....<--`٣٠١٫٣٠١` – Learning Feb 14 '16 at 13:01
  • My apology for that.. I will mark you answer as correct any ways, Just wanted to know if that is possible.. – Learning Feb 14 '16 at 13:02