How simple should I make the CSS?

[Kasper Hviid]

It is my experience that whatever .epub I design will breaks a lot - images aren't displayed, fonts don't work, even a simple thing as italic text tends to break. And that is just on my own Kobo.

One thing I consider is to keep everything so simple that it cannot break - like typing in actual uppercase instead of using text-transform: uppercase;. Or use manual indenting instead of h2 + p { text-indent:0; }

But how far should I go? Is there any way of telling what CSS I can expect to be implemented on most readers?

[DaleDe]

Many things work fine in CSS. There are bunches of CSS examples in the wiki specific for ePub. italic text should work everywhere but text-transform is not to be trusted. text-indent is the preferred way to indent, ePub does not support all CSS so you need to be sure what you want is supported and not all readers follow CSS instructions. If you avoid depending on cascade you will be better off. Do a check of your CSS file for errors. An error in the file will cause the entire file to be ignored on Adobe based readers.

Dale

[Jellby]

text-transform, as DaleDe points out, is not included in the ePub spec, so you should not expect it to work, and in particular you should not depend on it.

visibility is another such property that would be useful in some cases.

font-variant:smallcaps, however should be supported, but it mostly isn't, so you should not rely on it either (but you can blame the readers, and Adobe in particular, for that). Same with pseudo-elements (:first-letter, :first-line).

auto margins will often not work as expected, because the spec allows them to be ignored, and they often are.

Complex selectors (h2 + p, div.poetry div.stanza p, etc) in my experience work fine, but they may fail in some reader. Just don't try to be too smart.

[Kasper Hviid]

Both of you, thanks! :-)
So it's like this:

USE:
font-style: italic;
text-indent: 1.3em;
complex selectors (h2 + p, div.poetry, div.stanza p) mostly works, but don't get too smart.

AVOID:
text-transform: uppercase;
visibility: hidden;
font-variant:smallcaps; (but it *should* be supported)
margin: auto;
pseudo-elements (:first-letter, :first-line, :before ...).
Also avoid cascade


How about fonts? I guess that
font-family: sans-serif;
font-family: serif;
will be safe, but can I trust that any of the 'web-safe-fonts' are on the system?

And how about line-height and letter-spacing?

[mrmikel]

Whatever fonts are on a reader is all there is unless you embed them into an epub. This increases the size, generally to not so much benefit. Many fonts, including some of those that come with a Windows system, are proprietary and can not be legally embedded without permission which is likely to cost more than you would make on a book. There are good non-proprietary fonts, and on Adobe's website is a list of their fonts that are embeddable.

[Kasper Hviid]

thanks mrmikel! By the way, my reader has:
- Amasis
- Avenir Next
- Caecilia
- Georgia
- Gill Sans
- Kobo Nickel
- Malabar
So basic "web safe fonts" like Arial and Times New Roman isn't supported. My guess is that one should just use either 'serif' or 'sans-serif' for .epub files that should be compatible on most devices ... for anything more precise, the fonts will need to be embedded.

[Jellby]

Originally Posted by Kasper Hviid

How about fonts? I guess that
font-family: sans-serif;
font-family: serif;
will be safe,

Results are unpredictable. If I remember correctly, in my reader all the "standard" font-families result in the default font (or one of a couple of default fonts), even though I can set my own preferred font.

That is, I install "Droid Serif" and use it happily... but then some book sets "font-family: serif", and I see the default Adobe font, instead of "Droid Serif". So, I'd say avoid them. Use only fonts if you are embedding them, and don't use embedded fonts for the main text.

but can I trust that any of the 'web-safe-fonts' are on the system?

Certainly not. And you cannot trust they are on computers either. They are in some Windows versions, and in other systems only if the user actively installs them.

And how about line-height and letter-spacing?

letter-spacing is not in ePub spec, I believe.
line-height is, but that's something a bit like font-size: you better let the user choose the right one and don't mess with it, unless for some special effect in some particular section (I use "line-height:0" for superscripts, to avoid uneven line spacing, for instance).

[JSWolf]

One thing you cannot do on a Kobo is use font-family in the body style. It doesn't work. Kobo ignores it. You have to use font-family in other CSS styles such as p.

p {
font-family: Charis
margin-top: 0;
margin-bottom: 0;
text-indent: 1.2em
}

All p will be in the font you've chosen. This works. But in the body, it does not work. This is a long standing bug that Kobo feels it's OK to ignore when really, it's not.

[SBT]

I suppose the watch-words are “graceful decay”: the text should remain readable even if some, or even all, of the stylesheet is ignored.
Ignored CSS is simple enough to handle. The real bugbear is when CSS is interpreted differently in separate readers (line-height seems to be particularly awkward)

I hasten to add that I myself spend very little effort attempting to live up to such a maxim. I make my epub books for the fun of it, and one of the really fun bits is messing around with the style sheet. Though maybe thus limiting “my” readership, I console myself with the thought that my uncompromising attitude may spur suppliers of epub readers to greater conformance (Yeah, right...)

[JSWolf]

Originally Posted by SBT

I suppose the watch-words are “graceful decay”: the text should remain readable even if some, or even all, of the stylesheet is ignored.
Ignored CSS is simple enough to handle. The real bugbear is when CSS is interpreted differently in separate readers (line-height seems to be particularly awkward)

Different Readers can have a different default line height. But, none of the ADE based Readers ignore line height in the CSS. So if you do need/want a specific line height, put it in the CSS and it will work.