counter-reset CSS property doesn't work properly with Bindery

[teddybradford]

I'm trying to number figures [1,2,3,...] that resets each chapter, but can't use counter-reset properly with Bindery because each page is its own context.

Counter-increment in CSS 2.1 requires that its counter be within the scope of the counter-reset, otherwise "implementations should behave as though a 'counter-reset' had reset the counter to 0"

Do you have any ideas on how to accomplish this with Bindery?

[evnbr]

Wow I didn't even know CSS counters were a thing. I did special-case <ol> numbering, but looks like there's no easy way for js to get the value of counters (or even read pseudo elements).

I will look into this in a bit. Ideally, bindery could move the counters up a level to some wrapper element around the pages and you wouldn't have to do anything. If not, you'd have to use counters in html or javascript or jekyll or something...

[evnbr]

okay, it does look like moving the counter up a level could work. Can you share exactly how you're using them? You aren't using any fancy nested counters, are you?

[evnbr]

more simply, you could apply the css counter to the document rather than an element that gets split. would that work?

[teddybradford]

The way I'm trying to implement the counters, which works in a normal HTML page flow (aka, binderyjs disabled):

.post-header {
  counter-reset: figure;
}

figcaption {
  counter-increment: figure;
}

figcaption::before {
  content: "[ " counter(figure) " ] ";
}

At each .post-header, the counter resets, and adds the counter number at each figure with that has a figcaption.

With bindery enabled, the counter is always 1 for all figcaptions.

[evnbr]

if i’m understanding correctly, counters cascade like css — ie, if you added this to what you have, it might work, since the body never gets split. (cannot promise this will work) body { counter-reset: figure; }

…

On Wed, Aug 16, 2017 at 11:46 AM Teddy Bradford ***@***.***> wrote: The way I'm trying to implement the counters, which works in a normal HTML page flow (aka, binderyjs disabled): .post-header { counter-reset: figure; } figcaption { counter-increment: figure; } figcaption::before { content: "[ " counter(figure) " ] "; } At each .post-header, the counter resets, and adds the counter number at each figure with that has a figcaption. With bindery enabled, the counter is always 1 for all figcaptions. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#16 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA-gVr1FcgmB6PIFJLQVxWmLEvJP7C5Pks5sYzjpgaJpZM4O2-k3> .

[teddybradford]

I need a class given to each div[.📖-spread-wrapper.📖-two-page-size] that contains a .post-header to accomplish what I'm trying to do; adding the counter-reset to the body works for the initial reset, but the .post-header counter-reset never resets for the figures outside the div context.

Is there a rule that lets you add a class to a page that contains an element?

[evnbr]

Ah i see, what a pain. At that point your hardly using css counters any more.

There could be, that sounds potentially useful. Then you could do things like 'don't put running headers on the first page of a chapter' or 'make the text white on full-bleed images' or something.

[teddybradford]

It would also allow you to style those sorts of things differently for certain pages, which could be pretty useful. (like if you wanted footers to use a different style for gallery pages)

[evnbr]

any ideas of what the api should be like? off the top of my head:
Bindery.PageContains({ selector: '.gallery', pageClass: 'gallery-page' })

[teddybradford]

I think something like Bindery.AddClassToPage() makes more sense. Bindery.PageContains() sounds like it would return a boolean.

[evnbr]

@teddybradford Seems I misunderstood css counters. AddClassToPage wouldn't solve the css counter problem— bindery will add an arbitrary number of wrapper elements to create spreads and add crop marks, which would reset the counter again. You'd need something more like AddClassToOutermostWrapper, which would be confusing and change depending on your print settings.

In addition, any of those solutions break on booklet printing. The fundamental problem here is that bindery won't necessarily keep dom content in the same order that it started.

In the event I can't come up with a better alternative, what would you think about Bindery including its own counter? It could work like:

Bindery.Counter({
  selector: 'figcaption .number',
  reset: '. post-header',
  increment: 'figure',
  replace: function(element, counterNumber) {
    element.textContent = counterNumber;
    return element;
  }
});

[teddybradford]

Ah, I see. A counter function like that looks like it would work, though!

[evnbr]

Example: https://evanbrooks.info/bindery/examples/10_counters/
Docs: https://evanbrooks.info/bindery/docs/#counter