hyperlink CSS for KF8

franckv · 04-10-2017, 10:53 AM

Hi,

I try to customize the way an hyperlink is displayed on Kindle/iOS.
So far after googling and browsing this forum I can't find any solution. Furthermore, the behavior is very bizarre. For example:

Code:

 
<p><a style="text-decoration: none;" href="XXXX">This link should NOT be underlined (page doesn't exist).</a></p>
<p><a style="text-decoration: none;" href="IExist.xhtml">This link should NOT be underlined. (page exists)</a></p>

This only works when the linked page doesn't exist!

Is there a way to change an hyperlink's style at all?

Notjohn · 04-10-2017, 02:31 PM

If you have no underlining, how does the reader know it's a hotlink?

JSWolf · 04-10-2017, 02:45 PM

Quote:

Originally Posted by Notjohn

If you have no underlining, how does the reader know it's a hotlink?

It's a new puzzle book called Hunt the Hyperlink.

HarryT · 04-11-2017, 11:59 AM

Quite a common requirement for such things as footnote references or an inline TOC.

jhowell · 04-11-2017, 12:21 PM

As far as I can tell, hyperlinks are always underlined in Kindle readers/apps as an aid to the consumer, despite any HTML styling to the contrary.

The only reason that the hyperlink with a bad target is not underlined is that kindlegen removes bad links, so that case isn't being treated as a hyperlink by the reading software.

fbrzvnrnd · 04-12-2017, 03:36 AM

There is a tag to have hyperlinks without underline, if this is what you need.

HarryT · 04-12-2017, 04:23 AM

Are you going to tell us what it is, or do we have to guess?

jhowell · 04-12-2017, 02:39 PM

I did some more research and testing and the following does appear to be effective for removing the underline on links for the MOBI, KF8, and AZK formats. (Placing the same style with !important in CSS doesn't seem to be as effective in some cases.)

<p><a href="xxx.html" style="text-decoration: none !important;"><mbp:nu>This link should NOT be underlined.</mbp:nu></a></p>

It still doesn't work for KFX though.

fbrzvnrnd · 04-13-2017, 07:19 AM

Quote:

Originally Posted by HarryT

Are you going to tell us what it is, or do we have to guess?

Sorry, I was on a different computer without ebook library archive on and I did not remember the tag name.

I can confirm the mbp:bu

Code:

<p id="v1114"><a style="text-decoration: none !important;" href="../Text/Section0015_0011.xhtml#ve1114"><mbp:nu>it doesn’t matter leaving gregory peck</mbp:nu></a></p>

We used it in a italian/english ebook where each verse is linked to the same verse in opposite language.

franckv · 04-18-2017, 12:30 PM

Thanks all for your answers.

I have two use cases for which I don't want to underline hyperlinks. The first one is to link to a word's translation (it's common for books to use bold characters only) and the second one is when all the words in a section are hyperlinks (the reader knows about it), having underlines is awful then.

The trick with <mbp:nu> works either with an inline style or a class, at least for Kindle on iOS.

04-10-2017, 10:53 AM	#1
franckv Junior Member Posts: 4 Karma: 10 Join Date: Apr 2017 Device: none	hyperlink CSS for KF8 Hi, I try to customize the way an hyperlink is displayed on Kindle/iOS. So far after googling and browsing this forum I can't find any solution. Furthermore, the behavior is very bizarre. For example: Code: <p><a style="text-decoration: none;" href="XXXX">This link should NOT be underlined (page doesn't exist).</a></p> <p><a style="text-decoration: none;" href="IExist.xhtml">This link should NOT be underlined. (page exists)</a></p> This only works when the linked page doesn't exist! Is there a way to change an hyperlink's style at all?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Kindle for iOS not supporting all CSS/KF8 features?	Oxford-eBooks	Amazon Kindle	6	01-14-2014 04:33 AM
KF8 max-width HTML CSS tag broken?	ekovv	Kindle Formats	5	09-05-2012 04:57 AM
Content KF8 only or combined KF8/Mobi	JSWolf	Amazon Kindle	9	06-03-2012 09:11 PM
Hyperlink	adachim	Kobo Reader	0	11-02-2010 10:57 PM
Hyperlink?	fcoulter	Sigil	3	03-28-2010 10:31 AM

04-10-2017, 02:31 PM	#2
Notjohn mostly an observer Posts: 1,515 Karma: 987654 Join Date: Dec 2012 Device: Kindle	If you have no underlining, how does the reader know it's a hotlink?

04-11-2017, 11:59 AM	#4
HarryT eBook Enthusiast Posts: 85,544 Karma: 93383043 Join Date: Nov 2006 Location: UK Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6	Quite a common requirement for such things as footnote references or an inline TOC.

04-11-2017, 12:21 PM	#5
jhowell Grand Sorcerer Posts: 6,496 Karma: 84420419 Join Date: Nov 2011 Location: Tampa Bay, Florida Device: Kindles	As far as I can tell, hyperlinks are always underlined in Kindle readers/apps as an aid to the consumer, despite any HTML styling to the contrary. The only reason that the hyperlink with a bad target is not underlined is that kindlegen removes bad links, so that case isn't being treated as a hyperlink by the reading software.

04-12-2017, 03:36 AM	#6
fbrzvnrnd Fanatic Posts: 554 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	There is a tag to have hyperlinks without underline, if this is what you need.

04-12-2017, 04:23 AM	#7
HarryT eBook Enthusiast Posts: 85,544 Karma: 93383043 Join Date: Nov 2006 Location: UK Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6	Are you going to tell us what it is, or do we have to guess?

04-12-2017, 02:39 PM	#8
jhowell Grand Sorcerer Posts: 6,496 Karma: 84420419 Join Date: Nov 2011 Location: Tampa Bay, Florida Device: Kindles	I did some more research and testing and the following does appear to be effective for removing the underline on links for the MOBI, KF8, and AZK formats. (Placing the same style with !important in CSS doesn't seem to be as effective in some cases.) <p><a href="xxx.html" style="text-decoration: none !important;"><mbp:nu>This link should NOT be underlined.</mbp:nu></a></p> It still doesn't work for KFX though.

04-18-2017, 12:30 PM	#10
franckv Junior Member Posts: 4 Karma: 10 Join Date: Apr 2017 Device: none	Thanks all for your answers. I have two use cases for which I don't want to underline hyperlinks. The first one is to link to a word's translation (it's common for books to use bold characters only) and the second one is when all the words in a section are hyperlinks (the reader knows about it), having underlines is awful then. The trick with <mbp:nu> works either with an inline style or a class, at least for Kindle on iOS.