Highlighting linked text

[Julanna]

Hi, I had an idea, and I am going though CSS info to see if I can solve it but posting here may be quicker. I have a name index in a small non-fiction book. Coding works well: <a href="#IsaacWoolley">Woolley, Isaac</a> and <span id="IsaacWoolley">Isaac Woolley</span> (thanks to the fabulous people on these forums) but a friend suggested that when the link is clicked on the text should highlight. Sensible idea really. Only when the link is clicked. I've seen this on web pages but I've never coded it up. Ideas?

[eschwartz]

See: http://www.w3schools.com/cssref/sel_hover.asp

I don't know which devices actually support that, though... Chances are not good on E-ink devices. On the other hand, it can hardly hurt* to include CSS which will just be ignored.

[Julanna]

No, not highlight when the link itself is hovered over. It the linked *to* text I want the highlight. The 'span id' part. I've got this horrid feeling it's not CSS that does that, it's javascript. I hope not! I'll have to try to hunt up a web page that does it as an example.

And yeah, it won't be relevent to e-ink, but those who read it on things where you could use a mouse or touch screen should find it useful.

[eschwartz]

Originally Posted by Julanna

No, not highlight when the link itself is hovered over. It the linked *to* text I want the highlight. The 'span id' part. I've got this horrid feeling it's not CSS that does that, it's javascript. I hope not! I'll have to try to hunt up a web page that does it as an example.

And yeah, it won't be relevent to e-ink, but those who read it on things where you could use a mouse or touch screen should find it useful.

That does sound like javascript. I cannot think of any CSS which would have that effect.

[Julanna]

Thanks anyway eschwartz. It's been an interesting trip, trying to work out non-fiction with and index. Every ereader I use (that can make use of a linked index) puts the 'linked to' text on the page somewhere but not at the top, and even the paragraph isn't at the top. In a lot of ways it's as if they are trying to mimic paper books. I see that as a lost opportunity. On the html version of the book at least the 'linked to' text is on the top line so it's easy to find it. There's been some talk lately about books in browsers may be gaining ground and after this little foray I think that may be correct, at least for non-fiction. Fiction is a lot easier in ereaders of any sort.

[odedta]

@Julanna, here is the code to do that:

a:active {
    background-color: black;
    color: white;
}

[DomesticExtremis]

Originally Posted by Julanna

No, not highlight when the link itself is hovered over. It the linked *to* text I want the highlight. The 'span id' part. I've got this horrid feeling it's not CSS that does that, it's javascript. I hope not! I'll have to try to hunt up a web page that does it as an example.

And yeah, it won't be relevent to e-ink, but those who read it on things where you could use a mouse or touch screen should find it useful.

Well, the pseudo selectors aren't restricted to the <a> tag.

I'm not sure which ones are appropriate, but you might try something like:

.hl:visited { background-color: #ff0000; }


<a href="#IsaacWoolley">Woolley, Isaac</a> and <span class="hl" id="IsaacWoolley">Isaac Woolley</span>

[Julanna]

Odeta that would be on the link itself, I'm wanting the 'linked to' text to be highlighted. DomesticExtremis, it didn't work it Chrome or FF. I could see how it should work but it didn't .... thanks anyway!

[odedta]

Right, that means that there is absolutely no solution without Javascript here, the script would be extremely simple so if a device will support Javascript, it will work.

If you want the footnote itself highlighted why not keep it that way all the time, footnotes are not on the same page of the text anyway...

[Jellby]

Without javascript, you can use the :target selector, which will probably not work in ePub readers:

<a href="#IsaacWoolley">Woolley, Isaac</a> and
<span id="IsaacWoolley" class="hl">Isaac Woolley</span>

.hl:target { background-color: #F99; }

Try it here.

[odedta]

Originally Posted by Jellby

Without javascript, you can use the :target selector, which will probably not work in ePub readers:

<a href="#IsaacWoolley">Woolley, Isaac</a> and
<span id="IsaacWoolley" class="hl">Isaac Woolley</span>

.hl:target { background-color: #F99; }

Try it here.

wtf! lol Jellby, you pulled that one from hell

[Julanna]

huh. Jellby, looks good, I'll try again, I'll post back in after I've finished playing with it!

[Julanna]

Jellby, it's a fab solution for the html version but it doesn't display in either ADE or the Calibre reader. Sigh, so close. Of course this just takes me a step closer to the idea that's been in the media that non-fiction ebooks are better in browsers anyway. Thanks!

[DomesticExtremis]

it doesn't work on my e-Reader either (though it's fine in a browser),
but I didn't expect it to - they only do a subset of css after and even
less of a subset of css3.

[Hitch]

Originally Posted by Julanna

Thanks anyway eschwartz. It's been an interesting trip, trying to work out non-fiction with and index. Every ereader I use (that can make use of a linked index) puts the 'linked to' text on the page somewhere but not at the top, and even the paragraph isn't at the top.

That's because of the way that indices are created. If you have created indices in print, you already know the "why" of this. When a print book index is created, it places the "tag," the identifying marker, in the very first position of the upper-left-hand edge of the page, before the first letter of the first word of the first line of the text. This means that in print, it's fine; it is simply identifying the page location. However, when you export that to HTML, the "marker" is now relatively the same "distance away" from the target text, as we'll call it here, as it was before. Forget being "on the same paragraph;" in many e-readers, it will be 2-3 pages (clicked screens) away from the linked text.

The only alternative to this is to make the target ITSELF a link. This means--and many publishers are not enamored of this idea--making the linked target a blue, linked piece of text. OR, inserting something akin to a footnote, but now remember--you're working backwards. The reader would see the link location, but not know what it's for; if they click it, they'd go to the index.

And, this situation gets more complex if multiple items in the index point to the same target. Let's say a paragraph on "Irish setters" is referenced (indexed) in 3 places: Hunting Dogs, Setters, and alphabetically, "Setters, Irish." you could easly have all three source indices jump TO the entry--but then, how does the reader get back to where she was? In the index? You can't have a multiple-location link, that magically takes a reader back to the place they WANT to go; it has to be the place that they can reliably click and GO.

Creating competent indexes is not simple. It's not easy. It's not an "overlooked opportunity." It's a lot--a LOT--of work to do well; it's easy to do badly; it's hard to do if you have enormous, complex indices, both for the multi-linking issue mentioned above, and the "how" of how to mark the target, so that the index can jump TO it. Moreover, how do you indicate what the entries ARE, in an index item that has, say, 10 targets? A, B, C...? You can't use page numbers any longer, as those are obsolete and useless. You could, arguably, keep the DT page numbers, and use those as the anchors, but either way, it's a lot of painstaking work. If you're creating these deep indices from scratch, then keeping track of all of them, naming conventions, etc. (and the infamous, "how to jump back" issue), is a giant pain in the ass.

In a lot of ways it's as if they are trying to mimic paper books. I see that as a lost opportunity. On the html version of the book at least the 'linked to' text is on the top line so it's easy to find it. There's been some talk lately about books in browsers may be gaining ground and after this little foray I think that may be correct, at least for non-fiction. Fiction is a lot easier in ereaders of any sort.

If a target is simply identified with a plain link, the jump "to" will ALWAYS land the target text at the top of the screen, except in fixed-format books. When you see a book where this is not true, the target is the aforementioned "marker" that was placed at the upper-left-hand-corner of the page. Otherwise, the linked-to text will always scroll to the top of the page.

Nobody--anywhere--is trying to mimic paper books. It's the creation mechanisms involved that are causing what you see. When publishers are willing to pay for the painstaking type of index creation you want--and when you think about it, why on earth would they, when "search" is right at every reader's fingertips???--then the indices will work the way you want them to. But right now, most don't want to pay for the hours it takes to do it right.

Hitch