CSS Counter Style with Gothic Numerals

With me making my Gothic language web pages, I realised it would be neat to have the HTML ordered list element showing Gothic numerals. And it turns out it’s possible with the new @counter-style CSS at-rule.

Just add the following to the CSS:

@counter-style gothic {
  system: additive;
  additive-symbols:
    900 𐍊, 800 𐍉, 700 𐍈, 600 𐍇, 500 𐍆, 400 𐍅, 300 𐍄, 200 𐍃, 100 𐍂,
     90 𐍁,  80 𐍀,  70 𐌿,  60 𐌾,  50 𐌽,  40 𐌼,  30 𐌻,  20 𐌺,  10 𐌹,
      9 𐌸,   8 𐌷,   7 𐌶,   6 𐌵,   5 𐌴,   4 𐌳,   3 𐌲,   2 𐌱,   1 𐌰;
  range: 1 999;
  prefix: "·";
  suffix: "· ";
}

@counter-style gothic {
  system: additive;
  additive-symbols:
    900 𐍊, 800 𐍉, 700 𐍈, 600 𐍇, 500 𐍆, 400 𐍅, 300 𐍄, 200 𐍃, 100 𐍂,
     90 𐍁,  80 𐍀,  70 𐌿,  60 𐌾,  50 𐌽,  40 𐌼,  30 𐌻,  20 𐌺,  10 𐌹,
      9 𐌸,   8 𐌷,   7 𐌶,   6 𐌵,   5 𐌴,   4 𐌳,   3 𐌲,   2 𐌱,   1 𐌰;
  range: 1 999;
  prefix: "·";
  suffix: "· ";
}

Add list-style: gothic; to the ol element’s style:

ol {
  list-style: gothic;
}

ol {
  list-style: gothic;
}

And then for example the following HTML:

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li value="99">List item 99</li>
  <li>List item 100</li>
  <li>List item 101</li>
  <li value="111">List item 111</li>
  <li value="523">List item 523</li>
  <li value="1001">List item 1001</li>
</ol>

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li value="99">List item 99</li>
  <li>List item 100</li>
  <li>List item 101</li>
  <li value="111">List item 111</li>
  <li value="523">List item 523</li>
  <li value="1001">List item 1001</li>
</ol>

Results in:

1. List item 1
2. List item 2
3. List item 3
4. List item 4
99. List item 99
100. List item 100
101. List item 101
111. List item 111
523. List item 523
1001. List item 1001

As you can see, 1001 unfortunately ends up with the dots on each side too. Changing the prefix and suffix of the style referenced from the fallback descriptor did not seem to make a difference. It’s a relatively new browser feature (2023) so hopefully it’ll be possible to improve this in the future. Although I imagine lists with over 999 items will probably be rare, and you can just start a new list using a different counter style with the first item having an attribute of value="1000".

Here is another use of the counter style from my Psalm translation:

body
{
  counter-reset: verse;
}

.verse::before
{
  counter-increment: verse;
  content: "·" counter(verse, gothic) "·";
  /* Further style properties */
}

body
{
  counter-reset: verse;
}

.verse::before
{
  counter-increment: verse;
  content: "·" counter(verse, gothic) "·";
  /* Further style properties */
}

This adds a Gothic numeral before each verse, incrementing with each use of the verse class. Strangely, this method ignores the prefix and suffix properties in the above counter-style so they need to be added within the content property.