Compiling for Kindle: underlines

[bostonquad]

My Kindle came with a user manual that uses thick underlines for hyperlinks. Here’s a closeup:
When I compile to Kindle Mobi, my underlines look rather weak:
If I compile to Kindle KF8, the underlines disappear completely.
Can someone suggest how to get underlines to appear on the Kindle as they do in the first photo?
Thanks!

[nontroppo]

You will need to add a bottom border to your links. Edit your current compile format and add this text to the custom CSS section:

a { text-decoration: none!important; border-bottom: 2px solid black!important; }

I don’t own a kindle, but this works with EPub3 anyway…

[bostonquad]

This looks exactly like what I’m looking for; thank you!
Unfortunately, it doesn’t seem to work (and I tried both mobi and epub compiles).
However, Scrivener is new to me, so I suspect I need to learn more about compiling in general.
I do understand CSS, so I have a chance of getting this to work if I can figure out the Scrivener part.

[nontroppo]

Check if this project works for you (it does for me for EPub3).

Scrivener Test.scriv.zip (76.8 KB)

[bostonquad]

@nontroppo

Check if this project works for you

It’s pretty close - thank you! (It looks like text-decoration: none is not being respected. Maybe a bug?)
This is closer than I got, and I can use this for now.

When I have more time, I expect to track down what I missed.

[nontroppo]

Can you edit the mobi file that does what you want and see what the CSS says? text-decoration is the most basic of CSS rules, strange if it didn’t support it! Perhaps there is another problem to do with the parent element of the links?
There are some very poorly supported extensions of the CSS text-decoration rules so maybe it is using those (which would make kindle an exception)?

developer.mozilla.org/en-US/doc … e-position

[bostonquad]

@nontroppo

Can you edit the mobi file that does what you want and see what the CSS says?

Thanks for the suggestion, but I can’t even confirm the user manual is a mobi file. I don’t see how to access it (or my other Kindle ebooks) at the file level.

[bostonquad]

Ah! I have more insight, leading to a new question…

The insight: based on what I read here and here, I need to use Amazon’s own non-standard mbp:nu tag to get the underline to not happen (nu means no underline). Apparently, Kindle ignoring text-decoration:none is a known issue.

So my new question…
How do I get this to be part of the Scrivener compile? I see how to add CSS, but not HTML tags.

[nontroppo]

You can use a character style in the editor to wrap your links:

And use prefix/suffix to add the HTML tags:

This creates this HTML in the .mobi:

The problem is this won’t apply to the automatically generated TOC, only text with this style applied manually. For the TOC, you could just create your TOC manually, or edit the mobi file to wrap the TOC in the mbp:nu tag.

Why Kindle doesn’t support such a basic CSS rule, and forces authors to inject non-standard HTML is beyond me…

[bostonquad]

That looks promising, but when I tried it, it didn’t work. (And yes, I applied it to an underline in the body, not the TOC.)

Inspired by your illustration, I’d like to check my new mobi file’s HTML. But it appears to be a binary file. What tool did you use to reveal the mobi’s HTML?

[nontroppo]

EPub/Mobi are zip files, so yes technically binary so you can either unzip them first or use Calibre: calibre-ebook.com/about that can edit them directly (including a comprehensive HTML+CSS debugging environment). Scrivener also allows you to “Save source files…” in the compiler for both kindle and EPub, which gives an uncompressed version to play with directly…

[bostonquad]

First, thank you, nontroppo, I’ve learned a lot from you. If you’re in the Boulder CO area I’ll buy you dinner!

I’m so close… I can at least fix it manually, but I don’t have it automated yet. Here’s what I’ve learned:

1. Using a character style + assigned prefix/postfix generates the expected XHTML file:

   

2. I couldn’t see how to check the .mobi directly in Calibre, but I had Calibre convert it to .azw3 so I could check that source. When I did, I found the mbp:nu tag had been converted to !
   

   

3. I manually edited the source (hooray for this Calibre ability) back to what it should be… and I still did not get the desired result on Kindle. (I’m testing the .azw3 file in my Mac Kindle app; I can’t send it to my Kindle.)

4. I did several experiments, and found Kindle respects the text-decoration decorative if it is inline, but not if it’s in the CSS file (even if it is marked with !important).
   

   

5. Further experimentation shows the only thing that matters is inlining “text-decoration: none” with the anchor tag; the mbp:nu tag seems to not matter!

So… I don’t suppose there’s a way to get Scrivener to generate that directive inside the anchor tags? (I can get Scrivener to generate <mbp:nu style=“text-decoration: none !important;”>, but that doesn’t work either.)

[nontroppo]

Yikes, so close and yet…

To use Calibre to inspect .mobi, open the mobi in the calibre ebook-viewer, then right click the section of interest and “Inspect” (it isn’t the full editor, but does let you peek at the code, and manipulate it in real time just not save the change back to the mobi)…

I do not know of a way to add inline style properties to links generated with Scrivener, all I could suggest is you could make a small script to automatically edit the source HTML generated by Scrivener then compile them using kindlegen.

[bostonquad]

Ah, thanks… nice to see how to inspect a mobi file – and I’m on board with the script part.
It’s not automatic, but I now know how to get what I want with a little effort.
Thanks for all your help in this thread.