Hi All,

I'm trying to add thumb indexes to every page.

(i also asked here https://stackoverflow.com/questions/79546092/how-to-add-thumb-indexes)

Meanwhile I cant figure out how.

I do see there are js capabilities, but cannot find an event that runs per page. Or how to access rendered pages in domcontentloaded or any other event.

I guess once I have access to the rendered or rendering page, it should be trivial to add a div with absolute positioning somewhere on the page.
Of course, it would be simpler via html/css, but if I must use js, that's okay.

Would appreciate any help or pointers.

Thanks in advance!

The Icelandic dictionary has thumb indexes done purely in CSS:

https://www.princexml.com/samples/
https://css4.pub/2015/icelandic/dictionary.html

Thanks so much. I'm trying to implement it by me. but try as I might I can't get it to work. This is the closest I got:

@page {
@left-top {
content: flow(index-markers);
}
}

.subsection::after {
content: string(subsection);
flow: static(index-markers);
display: block;
border: 0.2pt solid black;
border-radius: 0.3cm;
text-align: center;
background: black;
color: white;
padding: 3mm 0 0 0;

}

.pos-1::after { padding-top: 0cm; }
.pos-2::after { padding-top: 2cm; }
.pos-3::after { padding-top: 4cm; }
.pos-4::after { padding-top: 6cm; }
.pos-5::after { padding-top: 8cm; }

The thumbs are appearing on the side. but the black background is running from page top till after the thumb letter. instead it should be only black around the letters. similar to the dictionary sample. but I cant figure out where I went wrong.

Thanks in advance

Could you post a minimized document, with both HTML and CSS?

hi
thanks for helping out
attached is a sample doc
i didnt minimize more, cause i think it is important to have a few pages to see how the line stretches
thanks!

1. Zimrati.htm‎ 93.7 kB ‎
   sample doc

Padding has the same color as the background of the element. Try setting padding on the margin box, rather than on the pseudo-element. This is what the Icelandic dictionary does.

hi
can you please elaborate? or paste what i need to change?
thanks again for all your help

In your code, you set padding on elements, e.g.:

.pos-3::after { padding-top: 4cm; }

In the Icelandic dictionary, the padding is set on margin boxes:

@page chapter3 { @right-top { padding-top: 4cm }}

My suggestion is that you take the approach of the Icelandic dictionary, you may freely copy and use that code.

Hi
I'm afraid i'm not familiar enough with prince. I removed all the pos-1,pos-2 stuff. and just put this in:

@page  { @right-top { padding-top: 7cm }}

this should effect all pages. correct?
but now all thumbs are on top of the page. it seems to be totally ignored
once this works, i believe ill still have to figure out how to make named pages (i.e chapter3). till now i only used :left or :right. but first lets see it works.
thanks

I think it may be easier for you to start with the code in the Icelandic dictionary example, and then modify it to suit your needs.

As for whether the @page settings will affect all pages, the answer is "it depends". The CSS cascading mechanism gives more weight to rules with higher specificity, and this is also true for @-rules.

Edited 2 days ago by howcome