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: "· ";
}Add list-style: gothic; to the ol element’s style:
ol {
list-style: gothic;
}And then 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>Results in:
- List item 1
- List item 2
- List item 3
- List item 4
- List item 99
- List item 100
- List item 101
- List item 111
- List item 523
- 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.
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 */
}
.psalm
{
/* As the first verse number is usually skipped, I've defaulted
to start with verse number 2. This can be changed by setting
`style='--init-verse: <N>'` on the element with the psalm class. */
counter-set: verse calc(var(--init-verse, 2) - 1)
}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.
