Rotate margin box: changing position with increased counter

Dear all,

I think that this might be a common challange:

In the document I have headlines (h2) that need to be showed as thumb index.
I used an rotated margin box for showing it in the margin area by updating the content whenever the h2 changes. This works perfect with
h2 {
string-set: title content(text);
}

Now the challange: For each new h2 the margin box position needs to be changed so that the reader of the printed book can see where a chapter starts and ends with help of the thumb index.

I thought I could use calc() and a counter-increase for the h2 headlines. But counters only give back strings and up to now for the css standard discussions it was refused to make the value accessible as integers. (Discussion of Working Group: https://github.com/w3c/csswg-drafts/issues/1026 )

My question: anyone else who tried to solve it?
Is there a work arround or solution to adjust the rotate margin box position with each chapter?

Here is a picture that illustrates the use case and inteded use of h2 headline and the desired margin box position:

Thanks for your replys
Andreas

Hey @AndreasM welcome!

I cheated a bit and used a bunch of css to make this codepen

The trick is to use pagedjs DOM after building, and using a position:fixed (which, in the land of paged media, is equal to: repeat on all pages):

I bind the language to a page model, per languages:

.french {
  page: french;
}

.spanish {
  page: spanish;
}

.deutch {
  page: deutch;
}

This will create a class pagedjs_XX where XX is the value of the page property:
.french will create .pagedjs_french

Then I use the class created by pagedjs to target only the child list element i want, in the page i need. I need to do that because the fixed element is on another branch of the DOM tree.

.pagedjs_french_page .i-french {
  background: black;
  color: white;
}

.pagedjs_spanish_page .i-spanish {
  background: black;
  color: white;
}

.pagedjs_deutch_page .i-deutch {
  background: black;
  color: white;
}

You can also use some js to work the other way around: layout out the content, and when a title happen, you add an .active class to the element of the list that match the title, but full CSS is better for performance :smiley:

Edit: I forgot
The thumb index is made with a simple flex layout (quick and dirty) but you can have a more powerful with a grid.

The top/bottom is made using text-orientation: https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

Hi Julien, thank you very much for the solution. It looks great - we will try to implement it like this into our template.
Best regards,
Andreas

1 Like