Convert arabic numerals in roman numerals in pure CSS

Question

I'm writing a custom theme for a website, so I cannot use Javascript. I would like to convert some numbers to roman numerals.

I tried this:

.score:before {
  counter-reset: mycounter attr(score number, 0);
  content: counter(mycounter, upper-roman) " ";
}

 <p><span class="score" score="11">points</span></p>

Alas, it seems that "attr(score number, 0)" is always 0. It's not because of a fallback, since when I change the fallback number to 42, the result stays 0. It's not a problem somewhere else in the code, because it works fine when I replace attr(...) by a number like 42.

So why isn't this code showing what it should?

score 2 · Accepted Answer · answered Jan 03 '19 at 14:34

2

Even today, attr() is still only supported for content: usage, not for anything else, as you can see from all the red flags here: https://caniuse.com/#feat=css3-attr

Screenshot:

answered Jan 03 '19 at 14:34

Peter B

22,460
5
32
69

I think this is the main blocker. I'm marking your response as accepted now, but if someone has a genius idea on how I could hack my way in pure CSS without needing this feature, it would be awesome! – Antoine Pietri Jan 03 '19 at 16:09

score 2 · Answer 2 · answered Jan 03 '19 at 14:40

2

You can use var to pass proper values to your css files and counter, for example:

.score {
   counter-increment: my-awesome-counter 0;
   counter-reset: my-awesome-counter var(--data-score);
}

.score:before {
  content: counter(my-awesome-counter, upper-roman);
  margin-right: 5px;
}

<p><span style="--data-score:11" class="score" score='11'>points</span></p>

answered Jan 03 '19 at 14:40

Łukasz Blaszyński

1,536
1
8
13

Doesn't that require editing the HTML? I only control the CSS of the file, so I don't know if that would work. Can I derive a var from the score attribute? – Antoine Pietri Jan 03 '19 at 15:12
var is taken from css attribtes its why i have put it into styles, score attribute is not used in this case. – Łukasz Blaszyński Jan 03 '19 at 17:21

Convert arabic numerals in roman numerals in pure CSS

2 Answers2