ericscheid
commented
1 year ago const computedStyle = window.getComputedStyle(theDiv);
const counterValue = computedStyle.counter('my-counter');Open Gazook89 opened 1 year ago
ericscheid
commented
1 year ago const computedStyle = window.getComputedStyle(theDiv);
const counterValue = computedStyle.counter('my-counter');
Gazook89
commented
1 year ago I'm probably missing something, and still playing with it, but here is what I get with:
const computedStyle = window.getComputedStyle(theDiv, ':after');
console.log(computedStyle);I don't see a counter property. There is "content" and some others related to the counter, but nothing that would just give us the value. This isn't really surprising since that page number doesn't show in the devTools computed styles tab either.
Gazook89
commented
1 year ago Hang on, i see what i overlooked, just a minute...
Gazook89
commented
1 year ago No, actually, I'm back to thinking I'm correct in that we can't get the counter value. Doing computedStyle.counter(...) is not valid, since it assumed counter() is a method that doesn't exist.
I'm just doing this in the devtools console. In firefox, I find the pageNumber div in the Inspector, right click and choose "Use in Console" which gives a temporary variable which I assign to an actual variable/constant.
Then, as above:
let pnDiv = temp0; // temp0 is the temporary variable given by FF
const computedStyle = window.getComputedStyle(pnDiv, ':after');
console.log(computedStyle);
// output: very large object of all styles on the element, noted in earlier comment
console.log(computedStyle.counter('phb-page-numbers'))
// output: Uncaught TypeError: computedStyle.counter is not a functionOh bother.
Damn, my source reference is bogus.
The closest I get in the inspector is:
getComputedStyle(temp2).getPropertyValue("content")'counter(phb-page-numbers)'
ericscheid
commented
1 year ago Additional (though dated)
https://stackoverflow.com/questions/2651739/how-to-access-css-generated-content-with-javascript
Your idea:
If a user does a CSS Counter Reset on their page numbers, to start their page count on page 5 for example, any Table of Contents generated by HB won't take that reset into account and give the wrong numbers. This is because the TOC generator is just counting how many page elements there are, and doesn't look at the value of the CSS Counter.
From what I can tell, there is no method of getting the value of CSS counter via javascript. So I think it is likely that any fix for this would mean replacing the CSS Counters with a pure JS implementation.
Such a change might open more possibilities, but certainly would break existing brews, and thus likely needs to be a v4 thing.