How to force ePub reader to use books' CSS?

[HarryGeez]

I have a few programming epubs and the Kobo Aura's epub reader doesn't seem to respect the epubs' CSS. It seems that people expect the reader to ignore books' CSS so that all books have a uniform look, but this is crucial for programming books because if monospace fonts and margins are not respected, it's impossible to read the code examples.

My workaround right now is to use KOReader but if it's possible I'd prefer to use the Kobo's native ePub/kepub reader. Any ideas? Sorry if this has been posted before, but I tried searching to no avail. Tbh I don't even know what to search to begin with so I searched 'CSS' and went through most of the results, but none were helpful.

Thanks.

[arspr]

Strange...

AFAIK eBook CSS is always respected but in two cases:

1. UI overriding settings like font type or justification.
2. Unsupported features like widows and orphans or page-break-whatever (in ACCESS I mean) or white-space: nowrap (in RMSDK)

But margins should perfectly work at least if you use relative units like em.

Could you post a test book?

[jackie_w]

To begin with, my best advice for getting css styles to work as coded is to read books as standard epub, not kepub. If you're a calibre user it would require using the standard KOBOTOUCH driver not the Kobo Touch Extended driver plugin.

However, to get monospace fonts requires some more work. Kobos don't have a built-in monospace font (odd, I know). You can try embedding the 4 monospace files (regular, italic, bold, bolditalic) into each and every book if you like but I prefer to sideload them once to the Kobo /fonts directory and then externally reference them from the epub. Read this post for more details about how to code the relevant css @font-face statements. I use HP's Dark Courier font, which is free.

If you haven't sideloaded fonts before post #1 of this thread should help.

If you're a calibre user and you don't want to hand-edit every epub, take a look at the Modify CSS option in the KOBOTOUCH driver. Adding the monospace @font-faces to the kobo_extra.css file on your Kobo will mean that they get auto-added to every epub during the calibre send-to-device process. This is the method I've been using for ages, it's painless and it works.

If the above isn't detailed enough feel free to ask and I can elaborate where necessary.

[GERGE]

Kobo respects CSS of the epub. There must a problem.

Could you send us the book maybe with 4-5 pages only?

[Section8]

I don't know specifically about kobo, but if it's reader is based on ADE, it probably ignores the entire CSS if it has a single syntax error. Have you tried running it through a css validator such as http://www.css-validator.org/ ?

[DNSB]

Originally Posted by HarryGeez

I have a few programming epubs and the Kobo Aura's epub reader doesn't seem to respect the epubs' CSS. It seems that people expect the reader to ignore books' CSS so that all books have a uniform look, but this is crucial for programming books because if monospace fonts and margins are not respected, it's impossible to read the code examples.

First question would be what format are you reading the books in? The standard epub or Kobo's modified epub (generally called kepub). The ACCESS renderer used for kepubs does tend to disregard some CSS styles but the Adobe RMSDK renderer used for standard epubs does a pretty decent job of following the epub2 standard (other than using auto/auto for center stuff and smallcaps). Monospaced text is going to require you to install a monospace font since there is not one present by default and add the CSS references to it. For myself, I installed HP's Dark Courier font and the following CSS entries:

@font-face {
    font-family: monospace;
    font-weight: normal;
    font-style: normal;
    src: url('res:///fonts/normal/Dark Courier');
    } 
@font-face {
    font-family: monospace;
    font-weight: normal;
    font-style: italic;
    src: url('res:///fonts/italic/Dark Courier');
    } 
@font-face {
    font-family: monospace;
    font-weight: bold;
    font-style: normal;
    src: url('res:///fonts/bold/Dark Courier');
    } 
@font-face {
    font-family: monospace;
    font-weight: bold;
    font-style: italic;
    src: url('res:///fonts/bolditalic/Dark Courier');
    }

code {
    font-family : "Dark Courier", monospace;
    }

I then add the code start/end tags around any monospaced text. An example from Andy Weir's The Martian for a computer bootup sequence.

  <p class="nonindent1 bold"><code>PATHFINDER LOG: SOL 0</code></p>

  <p class="indent2"><code>BOOT SEQUENCE INITIATED</code></p>

  <p class="indent2"><code>TIME 00:00:00</code></p>

  <p class="indent2"><code>LOSS OF POWER DETECTED, TIME/DATE UNRELIABLE</code></p>

  <p class="indent2"><code>LOADING OS...</code></p>

  <p class="indent2break">&nbsp;</p>

  <p class="indent2"><code>VXWARE OPERATING SYSTEM (C) WIND RIVER SYSTEMS</code></p>

  <p class="indent2"><code>PERFORMING HARDWARE CHECK:</code></p>

  <p class="indent2"><code>INT. TEMPERATURE: -34C</code></p>

  <p class="indent2"><code>EXT. TEMPERATURE: NONFUNCTIONAL</code></p>

  <p class="indent2"><code>BATTERY: FULL</code></p>

  <p class="indent2"><code>HIGAIN: OK</code></p>

Several other ebooks I own already had the code tags wrapped around monospaced text so simply adding the CSS code to the start of the stylesheet is all that is needed.

[HarryGeez]

Here's the book guys, it's free:
http://www.git-scm.com/book/en/v2

Okay, I didn't check, but I don't think there's anything wrong with the CSS, because it reads just fine on basically everything else. iBooks, KOReader, etc.

[davidfor]

Originally Posted by HarryGeez

Here's the book guys, it's free:
http://www.git-scm.com/book/en/v2

Okay, I didn't check, but I don't think there's anything wrong with the CSS, because it reads just fine on basically everything else. iBooks, KOReader, etc.

I've loaded this on my Aura H2O running FW3.13.1. And I have it opened in the calibre viewer and editor. I can't see any real differences other than the lack of a monospace font. I can different fonts, different colours (well, shades of grey), shaded areas and several different margin sizes.

As jackie_w and others have said, the Kobo firmware does not include a monospace font. Adding one on your device or into the epub will fix that.

I think you need to tell us where the problems are so we can see for ourselves. A screenshot of what you are expecting might be a good idea as well.

[JSWolf]

Originally Posted by davidfor

I've loaded this on my Aura H2O running FW3.13.1. And I have it opened in the calibre viewer and editor. I can't see any real differences other than the lack of a monospace font. I can different fonts, different colours (well, shades of grey), shaded areas and several different margin sizes.

As jackie_w and others have said, the Kobo firmware does not include a monospace font. Adding one on your device or into the epub will fix that.

I think you need to tell us where the problems are so we can see for ourselves. A screenshot of what you are expecting might be a good idea as well.

Try turning on publisher default (with your H2O) as there is an embedded monospace font.

[HarryGeez]

Originally Posted by davidfor

I've loaded this on my Aura H2O running FW3.13.1. And I have it opened in the calibre viewer and editor. I can't see any real differences other than the lack of a monospace font. I can different fonts, different colours (well, shades of grey), shaded areas and several different margin sizes.

As jackie_w and others have said, the Kobo firmware does not include a monospace font. Adding one on your device or into the epub will fix that.

I think you need to tell us where the problems are so we can see for ourselves. A screenshot of what you are expecting might be a good idea as well.

Okay, maybe Pro Git wasn't the best example for what I was trying to show, because the only lacking thing is monospace fonts. However, it isn't as simple as just adding a monospace font to the device though. I did what DNSB suggested, and it worked, so thanks DNSB.

Perhaps, a better example would be Apple's The Swift Programming Language.

Here's what I see in calibre:
[Image violates guidelines for size - MODERATOR]

But this what I see on my Aura:

[Image violates guidelines for size - MODERATOR]


Granted, even KOReader can't display this correctly, but it'll be nice if I can get something remotely close. Also, this is only simple code, so it doesn't look that bad.

[Dr. Drib]

Moderator Notice

Please take a few moments to read our Posting Guidelines, in particular the part about the maximum image size allowed (600x600 pixels). Images that violate those guidelines will be deleted.

Thanks.

[jandrew]

I've attached a pic (not the greatest tablet camera) of how it looks (the Swift programming book) on my Aura HD when converted to kepub. Pretty much as expected, with the colored text coming out in fairly light shades.

[HarryGeez]

Originally Posted by jandrew

I've attached a pic (not the greatest tablet camera) of how it looks (the Swift programming book) on my Aura HD when converted to kepub. Pretty much as expected, with the colored text coming out in fairly light shades.

May I know what do you use to convert? Do you use KePub Outputter?

[GERGE]

Kepub output plugin is the only reliable way.