How can I hide some things from ereaders

[spotrick]

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]

You could use alternative stylesheets

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]

Originally Posted by spotrick

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.

Originally Posted by spotrick

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]

Originally Posted by Tex2002ans

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]

Originally Posted by spotrick

Anyone know of any usable hacks?

You could use media queries to test for known devices for Webkit based devices/apps and/or Jellby's XPGT trick to hide styles from ADE/RMSDK based readers, which don't support media queries.

[mzmm]

Originally Posted by Doitsu

You could use media queries to test for known devices for Webkit based devices/apps and/or Jellby's XPGT trick 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.

Originally Posted by spotrick

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/6...et-only-safari

there has to be an easier way though.

[JSWolf]

Why bother to hide the links? They will either work or not.

[dgatwood]

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.