Highlighting Anchored Text

SigilBear · 02-26-2017, 11:33 PM

Imagine clicking a link in an index, and it takes you to page 423, but you have to spend a few seconds looking for the precise reference.

Is there some sort of trick with CSS or whatever that would somehow highlight the anchored text when someone visits it via a hyperlink? For example, the sentence below might display in bold text or the color red when someone links to it...

Code:

<span id="bear">Brown bears are native to the Northern Hemisphere.</span>

(INDEX)
Bears, brown, range, <a href="#bear">423</a>

Thanks.

EDIT: I just realized this won't be a good idea if I'm going to insert ID's other elements, like <p id="ox">.

theducks · 02-27-2017, 12:31 AM

a normal <a> tag gets a default color, usually blue, but your CSS can override that

some devices also support CSS a:visited styling

Please remember, there are a LOT on monochrome devices out there in reader land

SigilBear · 02-27-2017, 12:49 AM

Quote:

Originally Posted by theducks

a normal <a> tag gets a default color, usually blue, but your CSS can override that

some devices also support CSS a:visited styling

Please remember, there are a LOT on monochrome devices out there in reader land

Yikes, I forgot all about that.

When I upgraded my websites to HTML5, I had to stop using traditional anchors and link to ID's instead. But to highlight the text I'm linking to, I would have to go back to traditional anchors, right?

When I insert the following anchor in my text, and click a link to it in the index, nothing happens. (I could have sworn it was working earlier.)

Code:

<a href="a1">This history</a> was written...

But I'm working with Epub 3.0, which I'm guessing supports HTML5. Will it work if I change my book to Epub 2.0?

GrannyGrump · 02-27-2017, 02:33 AM

I know someone with much more smarts will jump in, but meanwhile...

In Epub 2.0, if the Index is in a different file from the "book text" (and it almost always is), the link must contain the full path to that specific file name. Such as:

<a href="../Text/index.xhtml#a1">This history</a> was written...

Only if the link and the target text are in the same file can you get away with just inserting the naked id ("a1")

One of the reasons I love Pagina Epub Checker is that it identifies "undefined" links for me.
https://www.pagina.gmbh/produkte/epub-checker/
The site also has descriptions in English, and versions for Windows, Mac, Linux.

fbrzvnrnd · 02-27-2017, 03:51 AM

Quote:

Originally Posted by SigilBear

Yikes, I forgot all about that.

But I'm working with Epub 3.0, which I'm guessing supports HTML5. Will it work if I change my book to Epub 2.0?

afaik XHTML 1.1 (ePub2) does not require anchor for destination link.

jhowell · 02-27-2017, 08:02 AM

Link selectors, such as :visited, apply to the link itself not the target. As far as I know there is no way to change the styling on the target of a followed link via CSS.

You could probably achieve this using JavaScript, but that wouldn't be supported by many reading devices.

fbrzvnrnd · 02-27-2017, 08:40 AM

The right pseudo class could be

Quote:

:target

BUT:
- it is only CSS3
- it works only for internal links
- it seems not supported by ADE and IBOOKS

SigilBear · 02-27-2017, 03:44 PM

Sounds like this is an idea I should abandon. Thanks for the tips.

SigilBear · 02-27-2017, 03:46 PM

Quote:

Originally Posted by GrannyGrump

One of the reasons I love Pagina Epub Checker is that it identifies "undefined" links for me.
https://www.pagina.gmbh/produkte/epub-checker/
The site also has descriptions in English, and versions for Windows, Mac, Linux.

That's good to know. I'm converting a book in the public domain to an epub, and the index is 40 pages of fine print. It's going to take forever to recreate the index and insert all the links and anchors. I think Pagina could come in real handy.

JSWolf · 02-27-2017, 05:21 PM

I do use EPUB-Checker and it's excellent.

Notjohn · 03-01-2017, 06:44 AM

My Fire tablet (and all other Kindle devices I have owned) takes me to the actual anchor, so that it appears as the first word on the screen. This can make it difficult to get the sense of the reference, so I usually put such anchors a bit in advance, preferably at the start of the paragraph.

But then I've never done an index in an e-book. (I don't see the point, given that it is infinitely searchable, and most indexed items have more than one mention in the text.) I'm generally pointing to a place where a similar idea is spelled out in more detail.

02-26-2017, 11:33 PM	#1
SigilBear Banned Posts: 244 Karma: 2112680 Join Date: Jan 2017 Device: iBooks	Highlighting Anchored Text Imagine clicking a link in an index, and it takes you to page 423, but you have to spend a few seconds looking for the precise reference. Is there some sort of trick with CSS or whatever that would somehow highlight the anchored text when someone visits it via a hyperlink? For example, the sentence below might display in bold text or the color red when someone links to it... Code: <span id="bear">Brown bears are native to the Northern Hemisphere.</span> (INDEX) Bears, brown, range, <a href="#bear">423</a> Thanks. EDIT: I just realized this won't be a good idea if I'm going to insert ID's other elements, like <p id="ox">. Last edited by SigilBear; 02-26-2017 at 11:47 PM.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Highlighting text in Calibre?	adrenaline	Calibre	16	12-28-2019 03:42 PM
Highlighting Text	valarcher	Devices	7	01-13-2014 08:15 PM
Glo Highlighting text only works for a while	RobertJSawyer	Kobo Reader	9	02-01-2013 04:53 PM
Highlighting text??	my3monkees	Android Devices	7	03-16-2012 06:25 PM
Highlighting text in a PDF...	Michealj	enTourage Archive	15	01-26-2011 10:10 PM

02-27-2017, 12:31 AM	#2
theducks Well trained by Cats Posts: 29,773 Karma: 54401244 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	a normal <a> tag gets a default color, usually blue, but your CSS can override that some devices also support CSS a:visited styling Please remember, there are a LOT on monochrome devices out there in reader land

02-27-2017, 02:33 AM	#4
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	I know someone with much more smarts will jump in, but meanwhile... In Epub 2.0, if the Index is in a different file from the "book text" (and it almost always is), the link must contain the full path to that specific file name. Such as: <a href="../Text/index.xhtml#a1">This history</a> was written... Only if the link and the target text are in the same file can you get away with just inserting the naked id ("a1") One of the reasons I love Pagina Epub Checker is that it identifies "undefined" links for me. https://www.pagina.gmbh/produkte/epub-checker/ The site also has descriptions in English, and versions for Windows, Mac, Linux.

02-27-2017, 08:02 AM	#6
jhowell Grand Sorcerer Posts: 6,495 Karma: 84420419 Join Date: Nov 2011 Location: Tampa Bay, Florida Device: Kindles	Link selectors, such as :visited, apply to the link itself not the target. As far as I know there is no way to change the styling on the target of a followed link via CSS. You could probably achieve this using JavaScript, but that wouldn't be supported by many reading devices.

02-27-2017, 03:44 PM	#8
SigilBear Banned Posts: 244 Karma: 2112680 Join Date: Jan 2017 Device: iBooks	Sounds like this is an idea I should abandon. Thanks for the tips.

02-27-2017, 05:21 PM	#10
JSWolf Resident Curmudgeon Posts: 73,883 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	I do use EPUB-Checker and it's excellent.

03-01-2017, 06:44 AM	#11
Notjohn mostly an observer Posts: 1,515 Karma: 987654 Join Date: Dec 2012 Device: Kindle	My Fire tablet (and all other Kindle devices I have owned) takes me to the actual anchor, so that it appears as the first word on the screen. This can make it difficult to get the sense of the reference, so I usually put such anchors a bit in advance, preferably at the start of the paragraph. But then I've never done an index in an e-book. (I don't see the point, given that it is infinitely searchable, and most indexed items have more than one mention in the text.) I'm generally pointing to a place where a similar idea is spelled out in more detail.