I'm experimenting with using html5 and css counters to number the figures in a document. The figure numbering css is working, but I need to be able to generate cross reference that include the figure numbers.
Is there any way to access those values via javascript? The counter code I am using is:
body { counter-reset: section; }
section { counter-reset: figure;
counter-increment: section; }
section section { counter-reset: section; }
section > h1:before { content: counters(section, '.'); }
.figure > .caption:before {
counter-increment: figure;
content: 'Figure ' counters(section, '.') '-' counter(figure); }
section > h1:before, .figure > .caption:before { margin-right: .5em; }
According to this article:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).
In other words, it appears as if the content
CSS attribute merely adds text "styling" to the page, without affecting the document structure. The DOM is not aware of this styling and thus, Javascript cannot access it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With