Image for post
Image for post

On Readium CSS and digital reading

Jiminy Panoz
Oct 8, 2017 · 5 min read

If you haven’t seen anything new from me on Medium lately, it’s because I’ve been leading the Readium CSS project for the last three months, on behalf of the EDRLab.

Readium CSS is a set of reference stylesheets for EPUB Reading Systems. It will be used in Readium 2, a framework for electronic publications managed by the Readium org, but can be used by any EPUB Reading System out there. And that implies quite a lot.

So I thought it would be cool to share this ongoing experience, what we’ve done and learned so far, how this project could relate to digital publications more generally, etc.

Let’s modernize Reading Systems a little bit

One of the Readium 2 project’s objectives is to leverage modern web specifications. Indeed, a lot has been happening on this front and it was high time to re-think how Reading Systems work.

We have tried to achieve this goal as reasonably as possible in Readium CSS — because we had to take CSS support into account, obviously.

Maybe our boldest decision was to bet on custom properties (a.k.a. CSS variables) on day 1. Indeed, they quite perfectly fit in Readium CSS:

  • they can be plugged into JavaScript super quickly;

To sum things up, they can help solve a lot of historical issues and, in hindsight, we are pretty confident it was the best choice we could actually make.

Image for post
Image for post

It’s not just about CSS variables though, and we’re also using Open Type Features, modern selectors (:lang(), :not(), etc.), the calc() function (think of font-sizes automagically computed from a type scale factor), hyphens, filters, object-fit, etc.

To put it simply, we’re trying to leverage all the cool and useful features CSS has to offer today — and provide fallbacks when needed.

This couldn’t have been done without the cascade and inheritance. Sure, our use case is somewhat very specific (changing styles while we don’t control the contents’) but it has really helped us avoid a lot of DOM manipulations: so far, we’ve only set properties for html, we don’t walk the DOM tree at all, and it works just fine for a lot of settings.

Although we might end up doing more in some cases, we know there is a lot we can do in pure CSS if needed, by simply espousing and using the cascade to our advantage.

Last but not least, we have adopted a modular approach: Readium CSS is not a monolithic stylesheet, it’s a set of modules you are free to take or leave. More on that later.

We’ve done a lot of research

We’ve put tremendous efforts into research, as there isn’t actually a lot available when it comes to ebooks.

All of those topics have been researched — and still are. Maybe you’ll find interesting insights in there, maybe not, but at least we made it publicly available.

Of course, we’ve made this research with an ebook focus in mind, but there is quite a lot of information which might be applicable to your web projects as well.

For instance, we’ve discovered that there may be a significant “stigmatization factor” to take into account when it comes to a11y. In other words, although well intentioned, I’m not sure providing readers with something labelled “dyslexia mode” upfront is the best option, a customizable theme designed with dyslexia in mind could be a lot better in terms of mood.

Image for post
Image for post
We’re still in the early stages of accessibility but users can already set some related settings in our app.

It’s worth noting we’ve also covered EPUB interoperability, and a lot of design decisions have been made accordingly. There is no recap for this, it was build directly into Readium CSS styles so that you don’t have to.

We’re sending invites to access the iOS test app so please feel free to drop me your email address if you want to try this app.

Maybe it’s not just about EPUB

The choices we’ve made bring a lot of flexibility. And this makes me wonder about the other use cases Readium CSS could eventually manage.

Modules are take or leave, which implies you can take the most interesting pieces of Readium CSS for your project, and leave pagination for instance. Of course it might not work perfectly with all the hundreds of millions of documents published on the web but, I could see it used for:

  • a “Read later” service;

I’m pretty sure you’ll come up with other ideas. And, to be fair, some companies are doing such projects already, see for instance Orange Confort+.

It looks like we’ve been re-discovering the benefits of customization and trying to standardize it lately, and I’m now convinced Readium CSS could eventually help you implement user settings in longform contents if you’re going this route for instance.


Readium CSS is still a prototype, it shouldn’t be considered a silver bullet. But we’ve put a lot of care into it and maybe you could take a quick look; I do believe there are at least interesting insights for all in the documentation and issues, but it’s up to you to tell me whether it could help you or not.

If you’re building anything with it, please let me know. I’d really like to hear about your experience, your findings, the data you could collect, and changes you had to make so that it can fit your specific use case.

Image for post
Image for post
Online books are slowly but surely becoming a thing, there’s actually quite a lot we could share if we discussed together. Here is for instance.

More importantly, the work we’re doing, we’re doing for publications relying on web technologies. And I guess there is a lot we could share, discuss, design and develop. Web Publications are coming, it’s time we start designing a more solid Reading Experience for the digital age.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store