Designing for Kobo

[AlexBell]

Thanks, Jellby. I had hoped that the distance between the edge of the screen and the beginning of the text on the left would indeed be 5pt; 3pt margin+2pt padding.

[AlexBell]

This post is especially for people using Kobo ereaders.

This afternoon I gave in to temptation and bought a Kobo Touch so as to be able to test how my ebooks look without having to depend on my friend to check them for me.

I have in front of me Can You forgive Her? by Anthony Trollope which I put on the MR Library recently, both opened at Chapter 1 on my Sony PRS T1 and the Kobo Touch.

On the Sony the text appears as expected - the chapter title, a horizontal rule, and the text starting immediately below.

On the Kobo touch I see the chapter title and the horizontal rule, but the rest of the screen is blank - the text doesn't start until the next page.

I've looked at other ebooks I've done on the MR library, and none of them has shown this behaviour. Chapter 2 of Can You Forgive Her? starts as expected on the Kobo Touch.

Also, text which I have italicised shows in italics on the Sony, but shows in block (emphasised but in normal font style) on the Kobo Touch.

I haven't the slightest idea where to start looking for the cause of these differences between the way the same ebook displays on two different readers. Does anyone have any suggestions? Let me repeat, if that should be necessary, that the html and CSS in the ebook validate to W3C standards, and the ebook validates with ePubCheck and FlightCrew.

Could some who uses a Kobo Touch please download Can You Forgive Her? from the MR library to see if he or she sees the same thing?

The links seem to work without problem on the Kobo Touch in this and other ebooks of mine, though footnotes take some time to work.

I think I'll take a Kobo ebook apart and see if I can find clues as to the way Kobo does things.

[oxen]

Originally Posted by Toxaris

Sorry, that is nonsense. Fixed font size causes problems with fonts (not changeable, to big, to small, etc). Setting the font size in em or in percentages does not. In fact, for most readers percentages and ems are the same. That is, 1em is 100% and for example 1.2em equals to 120%. I always use ems for basic settings (usually p-tags) and percentages for changes within a paragraph (spans). That works well on all the readers I have seen so far.

Yes you're right, it's wrong in my memory.
Fixed font size units is px/pt/cm/...

[Toxaris]

Alex, perhaps the first paragraph is too large for the Kobo to fit under the header of chapter 1? It should not be an issue, but just to rule out stuff.
With regards to the italic, it seems that Kobo ignores 'blockquote p' but honors 'blockquote+p'

[dgatwood]

Originally Posted by Jellby

What? Does it mean all my books display wrong there? Shame on them!

(I always add "html body { margin: 0; }".)

Interesting. I was just trying to figure out if it was the html tag or the body tag, and I can no longer reproduce the bug. I guess the Kobo folks silently fixed it in the iOS app update last week, because I know I checked out a version of the tools that reproduced it two weeks ago.

So never mind.

[Agama]

Originally Posted by AlexBell

What values would you suggest?

I use: @page { margin-top:6pt; margin-bottom:4pt }

and in body margin:0 6pt 0 6pt; padding:0

This ensures that the top/bottom margins still apply when the top or bottom of the current page is not being displayed, i.e. you're somewhere in the middle of a page which is longer than 1 screen. The lower figure of 4pt for the bottom-margin is because this is only to allow for letters which extend below the line, (g, p, q and y).

Left/right margins are in the body selector to allow easy override on specific pages if required.

Just don't set margins in em or they zoom with the text size and end up consuming lots of screen area. I'd say 75% of my purchased ePubs have these annoying 'zooming' margins.

[AlexBell]

Thanks to you all, especially Toxaris about the italics. I think I've stumbled on at least part of the answer to the problems.

I have an ebook I'm developing which has italics in it. I tested the text with the italics with each of the fonts available on Kobo Touch. Some of those fonts show the text in italics but in a serif font instead of sans, some show block font instead of italic, and only one shows the text in italic and sans.

At the same time I tested footnotes with each font. Only one of the fonts enabled footnotes to work. I'll repeat the test this afternoon or evening, include a test for links, tabulate the results, and post them.

[JSWolf]

Originally Posted by dgatwood

Another useful tip: Don't set the left and right margins for html or body tags to zero. If you do, Kobo (at least on iOS) will dutifully render part of the next page on the current one and won't let you go to the last page of any chapter.

Well, good thing I don't design my eBooks for the Kobo iOS app as I do set the left/right margins to zero.

[AlexBell]

Originally Posted by Toxaris

Alex, perhaps the first paragraph is too large for the Kobo to fit under the header of chapter 1? It should not be an issue, but just to rule out stuff.'

Thanks again, Toxaris. That may well be the reason, since it is an Anthony Trollope book and his paragraphs may go on for pages. Do you know if there is a maximum allowable size for paragraphs in Kobo? Or where I could find this information? There are not too many designers on the Kobo forum.

Originally Posted by Toxaris

With regards to the italic, it seems that Kobo ignores 'blockquote p' but honors 'blockquote+p'

But these are two totally different things, with different effects! Surely not even Kobo would make this mistake. Could you tell me please where you found this information?

[PeterT]

Kobo is notoriously bad for widows and orphans; many, many times, regardless of the size of a paragraph it will be placed on an extra screen, even though the previous screen had more than enough room for it.

[davidfor]

Originally Posted by dgatwood

Another useful tip: Don't set the left and right margins for html or body tags to zero. If you do, Kobo (at least on iOS) will dutifully render part of the next page on the current one and won't let you go to the last page of any chapter.

I don't know about the Kobo iOS app, but it doesn't happen on the Touch and Glo. Both correctly handle this.

[Toxaris]

Originally Posted by AlexBell

Thanks again, Toxaris. That may well be the reason, since it is an Anthony Trollope book and his paragraphs may go on for pages. Do you know if there is a maximum allowable size for paragraphs in Kobo? Or where I could find this information? There are not too many designers on the Kobo forum.



But these are two totally different things, with different effects! Surely not even Kobo would make this mistake. Could you tell me please where you found this information?

Alex, these were both assumptions from my side. There is no official information, but from studying your ePUB these seems like possible issues. It should not be difficult to create a test ePUB to test this hypothesis.

[davidfor]

You already have some of the answers, but...

Originally Posted by AlexBell

I have in front of me Can You forgive Her? by Anthony Trollope which I put on the MR Library recently, both opened at Chapter 1 on my Sony PRS T1 and the Kobo Touch.

On the Sony the text appears as expected - the chapter title, a horizontal rule, and the text starting immediately below.

On the Kobo touch I see the chapter title and the horizontal rule, but the rest of the screen is blank - the text doesn't start until the next page.

This is a known bug in the Kobo firmware and long paragraphs. If a paragraph exceeds a screen by a few lines, it will be pushed to start on the next screen. When I first went to chapter 1, the formatting was correct. When I increased the font size a couple of steps, the first paragraph was pushed to the next screen.

Also, text which I have italicised shows in italics on the Sony, but shows in block (emphasised but in normal font style) on the Kobo Touch.

As you have discovered, it is dependent on the font A couple of the built-in fonts are missing the italics. "Avenir" is one of them. "Georgia" works fine.

The links seem to work without problem on the Kobo Touch in this and other ebooks of mine, though footnotes take some time to work.

The links work for me as well. The only problems I had is with font and finger size for the footnote link. I use a smallish font and have big fingers. Pressing the footnote link isn't reliable for me. But when I increased the font size, it worked with no problems.

I think I'll take a Kobo ebook apart and see if I can find clues as to the way Kobo does things.

From what I can see, there aren't any real problems with your formatting. You have just managed to hit two well known bugs in the firmware.

[JSWolf]

What happens with the Kobo if widows and orphans are both set to 0 in the body style in the CSS?

[davidfor]

Originally Posted by JSWolf

What happens with the Kobo if widows and orphans are both set to 0 in the body style in the CSS?

I don't know. I normally set them in the paragraph styles.