reach a distant anchor

6 posts / 0 new
Last post

I come to ask for help about an epub.

In a xhtml page, I have link that points to another xhtml page on an anchor.
This anchor can be anywhere in the xhtml page.
My request is:
How can I show the targeted anchor to the user even though it could be on the first or third screen of the xhtml page.

I thought to use javascript to get the anchor value from the URL and then change the anchor class by ID, but this does not solve the problem of displaying the distant anchor.

Would you have any idea?

Sorry for my English which is not very good.


The reading system, like the browser, is responsible for moving the user to the correct location (page, in this case) referenced in the fragment identifier. It will render the document and paginate it, and then should load the correct page containing the referenced anchor. It's not something you manually handle.

If there's a specific reading system that you're having trouble getting links to work with, then it's a failing of that reading system and it's unlikely you'll find a workaround. It would be better to report a bug if you have a support link.


yes the reading system move the user to the specific screen which contain the anchor. But I search a solution to "highlight" the targeted anchor, because there is potentially several anchor in the same fragment and the user don't know which anchor he targeted.
That's why I want to use javascript to extract the anchor ID from the URL, and use this ID to change the style.
But it doesn't work.
I search the anchor ID like this :
var url = document.URL;

then create my variable :
var ancre= url.substring(url.indexOf('#')+1);

and when body loading, changing the anchor class
document.getElementById(ancre).className ='ancre-clic';

is that possible ?
is there a different way to do that ?


You can use the CSS :target selector for this pseudo class, for example something like this (according to EPUB 3 viewers have to interpret this CSS selector modul level 3):

position: relative

:target::before {
content: ' ';
display: block;
position: absolute;
left: -1ex;
top: 0ex;
width: 1ex;
height: 1ex;
background: rgb(255,0,0)

Ah, showing and highlighting are different beasts.

I doubt that you'll get it working, and not in a widely supported way. There's nothing wrong with the code, of course, but I haven't ever found good support for dynamic restyling of content. After the page has been drawn your script will execute, but unless the reading system repaints those changes won't be picked up. I haven't found they do.

The :target psuedo-class in theory would work better, since the target should be available during the initial draw, but, again, in my experience it's no better supported.

Both approaches are also problematic, depending on how you write the rules, in that they could cause highlighting when you don't want it (e.g., clicking in from the table of contents). I assume you're accounting for that with your script somehow, though.

thank you both for your answers
so I will not do this functionality for this book.
but it will be interesting anyway


Secondary menu