View Full Version : How can I hide some things from ereaders


spotrick
05-12-2013, 04:33 AM
This is more complicated than it sounds. I have some components of my ebooks that are there purely for readers using a browser. E.g. navigation at the end of a chapter. In an ePub ereader, or a Kindle, these components are redundant, so I'd like to be able to hide them.

I can use CSS display:none; -- but then I'd need to use a different stylesheet for epub than for the web.

So I'm wondering if there's a CSS hack that can be used that would only be seen by a web browser, but be ignored by epub readers. Kind of like the hacks used to make older versions of IE work.

Anyone know of any usable hacks?

Jellby
05-12-2013, 04:57 AM
You could use alternative stylesheets (http://www.w3.org/Style/Examples/007/alternatives)

With a browser, you should be able to select an alternative one. With an ebook reader you probably won't, so you may need to tweak the order and contents to make sure the right combination is displayed.

Tex2002ans
05-12-2013, 05:07 AM
This is more complicated than it sounds. I have some components of my ebooks that are there purely for readers using a browser. E.g. navigation at the end of a chapter.

There is potentially something that can be done with media queries (although I am no expert in those). Perhaps if you post some sample images/code, others on the forum can give more recommendations.

What is your original book format, HTML? Any specific reason these navigation buttons are essential?

Having the toc.ncx + Links should be able to get you wherever you want in the book.

I can use CSS display:none; -- but then I'd need to use a different stylesheet for epub than for the web.

If I remember correctly, display:none might not work on some EPUB readers, so the stuff you want hidden might show up anyway.

mrmikel
05-12-2013, 07:36 AM
If I remember correctly, display:none might not work on some EPUB readers, so the stuff you want hidden might show up anyway.

Or it shows up as empty space in the middle of a line!

Doitsu
05-12-2013, 12:40 PM
Anyone know of any usable hacks?
You could use media queries to test for known devices (http://css-tricks.com/snippets/css/media-queries-for-standard-devices/) for Webkit based devices/apps and/or Jellby's XPGT trick (http://www.mobileread.com/forums/showthread.php?p=744547) to hide styles from ADE/RMSDK based readers, which don't support media queries.

mzmm
05-15-2013, 08:32 AM
You could use media queries to test for known devices (http://css-tricks.com/snippets/css/media-queries-for-standard-devices/) for Webkit based devices/apps and/or Jellby's XPGT trick (http://www.mobileread.com/forums/showthread.php?p=744547) to hide styles from ADE/RMSDK based readers, which don't support media queries.

although if you were reading the ebook in a browser on a smartphone/tablet it would still hide the content.

This is more complicated than it sounds. I have some components of my ebooks that are there purely for readers using a browser. E.g. navigation at the end of a chapter. In an ePub ereader, or a Kindle, these components are redundant, so I'd like to be able to hide them.

I can use CSS display:none; -- but then I'd need to use a different stylesheet for epub than for the web.

So I'm wondering if there's a CSS hack that can be used that would only be seen by a web browser, but be ignored by epub readers. Kind of like the hacks used to make older versions of IE work.

Anyone know of any usable hacks?

are the epub's ncx or opf functional in the browser version (in an epub reading engine), or are you just displaying the book's html in the browser?

one (very extravagant) workaround might be to embed a script querying the browser, and load the browser-only css that way. i think there'd be a way for you could target userAgent safari and userAgent chrome to avoid loading your css on webkit-based readers, and you'd end up with a huge conditional statement querying specific vendors, and then defaulting to the standard epub css.

http://stackoverflow.com/questions/6849086/jquery-target-only-safari

there has to be an easier way though.

JSWolf
05-15-2013, 12:20 PM
Why bother to hide the links? They will either work or not.

dgatwood
05-20-2013, 03:58 PM
Set up your default styles to be appropriate for EPUB readers. Then add JavaScript:

if (typeOf(navigator.epubReadingSystem) == "undefined") {
/* It's a browser. Add a new CSS stylesheet element dynamically. */
}

Readers that support only EPUB 2 won't load the JavaScript. Readers that support EPUB 3 and JavaScript will have an appropriate object there. So if you get into the body of that if statement, the content is being shown by a web browser.