Menu

Easy CSS Wins

Here at EPUB Secrets we are very lucky to have a broad, global community of smart developers who want to share their R&D with us. This Guest Post is from Jiminy Panoz, French ebook developer extraordinaire.

I love modern CSS.

It is so simple once you get it, has responsive design covered out of the box, and can even be super fun. It makes you feel like you’re a wizard.

It makes you feel like you’re a wizard.

Modern CSS is how you enable the Open Type features of your beloved fonts.

It can deal with your layout in a responsive manner. Just throw some flexbox properties in a container and its layout is managed automagically.

And it is powerful too! Sometimes a one-liner can deal with all the painful stuff for which you previously needed complex CSS hacks.

It’s obvious I’m sold, and this is why I’ll try to convice you you should go for “easy CSS wins” whenever possible, as soon as possible.

A note about support

Because this is somewhat important and you don’t want to break things in a terrible way.

But Jiminy, it won’t work here and there!

Let’s take a look at CanIUse, a website helping web developers cope with all the old an shiny new specs.

But Jiminy, my mobi7s and RMSDKs!

This concept is not that difficult to understand: it’s about building a rock-solid foundation (a well-structured document which works if CSS is not supported) and then adding enhancements to it.

Reading Systems provide a wide range of possibilities, it’s up to you to leverage them. And, as a matter of fact, you are already doing it since you’re using CSS which is not supported by old Kindle eInk Readers or, even worse, some Android apps—they are the worst.

(Spoiler: the real fun kicks in when resizing the height of your browser’s window.)

(Disclaimer: it is also kind of buggy because it is sort of a statement on the current state of ebook rendering. No sarcastic github project is perfect after all.)

Seven Easy Wins

By now you should be assured these won’t be seven deadly sins.

I’m personally using some with feature queries because I’m extra cautious or couldn’t test them extensively yet.

The declarations within a feature query will simply be ignored by Adobe’s RMSDK and Kindle so you won’t annihilate your ebook design when using them.

The syntax is:

@supports (property: value) {
selector {
property: value;
}
}

Of course you can use the “and”, “or”, and “not”operators to design more complex queries if needed.

Keep the correct aspect ratio for medias

Image sizing is super tough, especially when you can’t tell the ratio of the Reading System’s page. In some cases, it might even overflow and the reader finds her/himself with a truncated desolation.

Enter object-fit, which specifies how the contents should be fitted to the box established by its used height and width.

img, svg {
object-fit: contain;
}

Apple has been using this in iBooks for ages now. And it indeed solves a complex issue. Best part of it? You don’t even need a feature query, you can drop it like it’s hot in your existing declaration.

Make a figure-heavy book more legible

For some reason the default for a lot of fonts is lining numerals. Now, if you have an awful amount of figures in your body copy, this can become painful real fast.

Hopefully, Open Type features will save the day. You can tell which alternate the Reading System should use for the selectors of your choice.

body {
font-variant-numeric: oldstyle-nums proportional-nums;
}

Default fonts Reading Systems offer may not ship with those features though, but Minion and Myriad Pro, Iowan Old Style and San Fransisco (which can be accessed by using -apple-system in your font-family), for instance, provide ebook designers with a good set of figure alternates.

It is worth noting that usage might drive the need for better default fonts. In other words, the more people will use open type features, the better the fonts Reading Systems might choose to embed.

If your value is unitless e.g. 1.5 then the rendering engine will re-compute the value for each child based on its font-size.

If you’re using em or % then the rendering engine will use the computed value of the parent and apply it to its children. In other words, it’s like setting a baseline grid in InDesign.

While it is generally advised to use unitless values because of this difference, it can become an asset if you know in advance that the computed value of the parent will be OK for all its children. This basically means you’d better not have children which font-size is larger than the parent’s line-height.

Conclusion

It is important to remind you those one-liners should not be used in a vacuum, you must add them to your existing code, with fallbacks where needed—flexbox, I’m looking at you.

I’ve been using them in production (with feature queries in some cases) for a significant amount of time now, and haven’t any issue to report so far.

Sure, you might still tell yourself it’s not worth it, although it can be implemented in seconds. Once again, usage is important for Reading Systems.

For instance, Amazon is already dealing with a couple of CSS hacks and currentColor in KFX—I can tell, I’m retro-engineering it. So if you’re starting to use Open Type features, they’ll probably add support for that. And the same goes for flexbox.

CSS has come a long way. “It just works” is what I love the most about it today.

Ebooks, your turn.

Jiminy Panoz is a freelancer who has been helping French publishers make the transition to digital for the last five years. In addition to ebook conversion, he has conducted QA audits, managed interactive projects, built custom tools, and designed tailored workflows for his clients. He’s also the creator and maintainer of open-source projects dedicated to ebooks, including the blitz framework.

3 Responses to “Easy CSS Wins”

[…] does not support this CSS (though for progressive enhancement, this would be a great place for a feature query). Media queries are another potential solution, but this will double already extensive CSS work […]