W3C home > Mailing lists > Public > public-css-archive@w3.org > January 2021

Re: [csswg-drafts] [cssom] Provide access to counter values (#5879)

From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
Date: Wed, 20 Jan 2021 13:17:07 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-763599583-1611148625-sysbot+gh@w3.org>
Hacky, suboptimal performance and unreliable for big counter values, but I guess you could create a JS function which does this:
1. Creates a `::before` pseudo-element on the desired element, with `content: counter(the-counter, the-style)`
2. Uses a `@counter-style` to define `the-style` so that it produces:
   - For `n < 0`, a string with the character `0` repeated `-2*n - 1` times.
   - For `n = 0`, an empty string
   - For `n > 0`, a string with the character `0` repeated `2*n` times.
3. Uses a monospaced font to display that, and prevents line breaks, etc.
4. Retrieves the width of the string in pixels with `getComputedStyle`, and divides it by the amount of pixels in `1ch`. That's the number of characters `m`.
5. Maps `m` to the desired original `n`: `n = m % 2 ? -(m+1)/2 : m/2`
6. Restores the original state

GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5879#issuecomment-763599583 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 20 January 2021 13:17:09 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:25 UTC