On Readium CSS and digital reading
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;
- they may save a lot of JavaScript code;
- theming is one of their major use cases;
- they ease up dynamic style changes (user settings);
- we can load all stylesheets at once then cache them for better performance;
- like preprocessors’ variables, they can even be used to customize Reading System default styles;
- since they’re exposed in the DOM, authors can use them for extra design options and make their own styles super compatible with user preferences.
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.
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.
- User Agents’ defaults
- System fonts available for various languages
- Typefaces users prefer
- Accessibility (typefaces, settings, global features, etc.)
- ebook authoring practices
- Recommendations to manage user settings on top of authors’ styles
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.
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;
- reading modes comparable to the one you can find in your browsers;
- a browser extension providing users with a11y-related settings;
- user settings or themes for a web publication;
- a minimal framework to kickstart typesetting, especially for authoring tools.
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.
Conclusion
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.
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.
