Home What is the difference between alphabetic and numeric types in the CSS symbols() function?

Questions

What is the difference between alphabetic and numeric types in the CSS symbols() function?

January 13, 2022

Can you explain me please, What is the difference between of that two types in css symbols() function? When I try separately each of them, I has’nt seen any difference, only one – numbering start from 0 and first symbol doesn’t show first in the list.

div {
  margin: 70px 70px;
}

ol {
  list-style: symbols(numeric "○" "●" "□")
}

<div>
  <ol>
    <li>item</li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ol>
</div>

>Solution :

For numeric, the symbols represent the digits of a number system, where the number of symbols represents the base. The list starts at 1, and when it runs out of symbols, it continues to 10.

ol {
  list-style: symbols(numeric "0" "1" "2" "3" "4" "5" "6" "7" "8" "9");
}

<div>
  <ol>
    <li>item</li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ol>
</div>

For alphabetic, the list is constructed in the same way, but without the assumption that the first symbol represents 0. When the list runs out of symbols, it continues with 00 instead of 10.

ol {
  list-style: symbols(alphabetic "0" "1" "2" "3" "4" "5" "6" "7" "8" "9");
}

<div>
  <ol>
    <li>item</li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ol>
</div>

symbols() – CSS: Cascading Style Sheets | MDN