Conditional CSS epub kepub

[jiembe]

Is it possible to create CSS witch act conditionally to the format of the ebook: if ePub do this; if kepub do that?

[jackie_w]

No, not in the same way that Kindle books can have alternative CSS for MOBI and KF8 formats.

However, there is a trick you can use to make sure selected CSS will only be applied to kepub but not epub.

Can you give an example of what CSS you're trying to use for each?

How are you creating your kepubs? Do you use calibre to transfer books to your Kobo?

[jiembe]

[QUOTE=No, not in the same way that Kindle books can have alternative CSS for MOBI and KF8 formats.
However, there is a trick you can use to make sure selected CSS will only be applied to kepub but not epub.
Can you give an example of what CSS you're trying to use for each?
How are you creating your kepubs? Do you use calibre to transfer books to your Kobo?[/QUOTE]

I'm editing my epub books through Calibre and then transform them as kepub. But the epub and kepub format don't act the same in my Kobo. For example, my preference is to hide the footnotes (display: hidden) in the normal reading. There is no problem to view the footnotes in .kepub since it appears in a popup window, but the epub format won't display the footnote at all.

[jackie_w]

Calibre's Check Book tool shows display:hidden as an error, perhaps it appeared in a later version of CSS than is typically supported by ADE-style renderers on eink devices, such Kobo's renderer for standard epubs.

I must admit I don't use any special CSS or markup for footnotes, I just use simple anchors which seem to work as expected on the Kobo, i.e.
- kepub: choice of pop-up or link-to-endnotes page
- epub: link-to-endnotes page only

They work no matter whether the book is epub/kepub and no matter whether the kepub was created from an EPUB2 or an EPUB3. For example:

Chapter HTML file:

<p>... a rule instituted hundreds of years ago to prevent this branch of the Church becoming too big for its boots.<sup><a id="back02" href="endnotes.xhtml#fn02">[2]</a></sup> But ...</p>

Endnotes HTML file:

<p class="footnote"><a id="fn02" href="chapter1.xhtml#back02">[2]</a><br/>Which were of the one-size-fits-all, tighten-the-screws variety.</p>

CSS is very simple:

.footnote {
    margin: 0 0 0 2em;
    padding-top: 3em;
    text-indent: -1em;
}
sup {
    font-size: 0.9em;
    line-height: 0;
    vertical-align: super;
}

ETA: I'm not saying that the above is the best way or the right way of doing footnotes, just that it is a way which seems to work trouble-free on a Kobo.

[jiembe]

ETA: I'm not saying that the above is the best way or the right way of doing footnotes, just that it is a way which seems to work trouble-free on a Kobo.

Your code is similar to mine. That's not the point. I don't want to see the footnote if I don't need or want it, even if they are at the end of a chapter or at the end of the book. So I simply put the footnotes inside a <div> with a display:hidden style. The only way to see the footnotes is to click on the renvoi. That's work fine in the kepub format but disallowed the possibility to see those notes in the epub format.

And this was 1 example of divergence code between epub and kepub. That's why I'm searching a way to toggle the CSS code between the 2.

[jackie_w]

I'm not really sure what display:hidden is supposed to do, did you mean visibility:hidden? What happens if you try display:none instead for your footnote CSS? I think this is supported by the Kobo epub renderer.

If you want to exclude a whole file of endnotes you could try adding linear=no as an attribute in the spine <itemref> entry for the endnotes.xhtml file in the OPF file.

[DNSB]

Originally Posted by jiembe

Your code is similar to mine. That's not the point. I don't want to see the footnote if I don't need or want it, even if they are at the end of a chapter or at the end of the book. So I simply put the footnotes inside a <div> with a display:hidden style. The only way to see the footnotes is to click on the renvoi. That's work fine in the kepub format but disallowed the possibility to see those notes in the epub format.

I suspect you wanted display: none as the style. I use the following when I don't want the text to display (chapter heading where an image is used as the chapter heading but I want to have Chapter IV in the TOC.

.hidden {
    display : none;
}

[jiembe]

Originally Posted by DNSB

I suspect you wanted display: none as the style. I use the following when I don't want the text to display (chapter heading where an image is used as the chapter heading but I want to have Chapter IV in the TOC.

.hidden {
    display : none;
}

Yes. Sorry. My mistake. My problem is not causing by a wrong CSS rule as display: hidden . I use display: none.

To come back to my initial question: is it possible to toggle active/non-active a part of code specifically differentiated when the file is a epub or a kepub?

[GeoffR]

KePubs created by Calibre have a wrapper <div> with id="book-columns" inside <body>, so you should be able to use this to add KePub-specific CSS. E.g.:

/* ePub default */
span.mystyle { color: green; }

/* KePub override */
div#book-columns span.mystyle { color: blue; }

[jiembe]

Originally Posted by GeoffR

/* ePub default */
span.mystyle { color: green; }

/* KePub override */
div#book-columns span.mystyle { color: blue; }

How do you implement it? I try this:

.note {
display: block;
}
div#book-columns .note {
display: none;
}

without success. The footnote is still visible at the end of the chapter in the kepub file.

My html code (using a footnote class "nbp") look like this:

<div class="note">
<br/><hr width="33%"/>
<p class="nbp">...

[jiembe]

I tried also :

book-columns .note {
display: none;
}
and

div.book-columns .note {
display: none;
}

Same result.

[jackie_w]

Deleted

[GeoffR]

Originally Posted by jiembe

How do you implement it? I try this:

.note {
display: block;
}
div#book-columns .note {
display: none;
}

without success. The footnote is still visible at the end of the chapter in the kepub file.

That works on my Glo. How are you creating the KePub? You might try examining the .kepub.epub file after it has been sent to the device to check that Calibre has added the <div id="book-columns"> after <body>, older versions of the KoboTouchExtended driver didn't do this.

[jiembe]

Originally Posted by GeoffR

That works on my Glo. How are you creating the KePub? You might try examining the .kepub.epub file after it has been sent to the device to check that Calibre has added the <div id="book-columns"> after <body>, older versions of the KoboTouchExtended driver didn't do this.

I let Calibre creating the kepub. I have no way to inspect the resulting file.

[cramoisi]

Originally Posted by jiembe

I let Calibre creating the kepub. I have no way to inspect the resulting file.

Perhaps you could use the plugin which creates a kepub in calibre in place of the pluging which convert epub to kepub upon sending it on the device ; same author, iirc.

Or you can navigate your plugged kobo like a usb key, find your book within it open the book (a kepub since it's on kobo) with ebook-edit and change the css there.