ReadiumCSS alpha is available

Shop sign that reads "Come In, We're Open"
  • Sumo

This guest post is from Jiminy Panoz, who spends his days wrestling CSS and vendors and doing all the eprdctn dirty work.


We are happy to announce that the alpha version of ReadiumCSS has just been released.

You will find it in the master branch of the project’s repository. It is worth noting that ongoing development will still be made in the develop branch.

It took a few months to go from the prototype to the alpha version but a lot of research and development has been happening behind the scenes, ranging from accessibility to internationalization, and including fine-tuning and improvements.

It bears repeating we are paying extra attention to interoperability and compatibility.

What’s new

ReadiumCSS now manages:

  • support for horizontal-writing (LTR and RTL), including CJK;
  • advanced paged + scroll rendering;
  • advanced page margins;
  • UA default stylesheets;
  • basic user settings:
    • night and sepia modes;
    • font family;
    • font size.
  • advanced user settings:
    • page margins;
    • columns;
    • line-height;
    • hyphenation;
    • text align;
    • paragraphs’ margin;
    • text indent.
  • a11y-related user settings:
    • typefaces for dyslexia;
    • normalization (removing italics, superscripts, etc.);
    • letter and word spacing.
  • experimental features (beta version):
    • support for vertical-writing;
    • support for inverted and high-contrast modes.

And that’s just the new features ReadiumCSS brings to the implementers’ table in terms of rendition. There’s a lot more…

A new architecture

We are leveraging npm (node.js) to make it a lot easier to use ReadiumCSS in a dev environment. You can now install dev dependencies (PostCSS), build distribution stylesheets and run visual regression tests from the command line interface.

As a result, ReadiumCSS is now entirely customizable, and most of it can be handled from one single configuration file. You can pick the selectors you want to use for reading modes, scroll, etc., and choose the size for which a spread (2 pages) will be applied automatically.

And once you customized and/or modified the source framework, just run automatic tests to check – quickly and visually – if everything is working as expected.
Regression test
Of course, this new architecture has been documented, and we are looking forward to improve those processes, and the resulting developer experience, for the beta version.

We are committed to bring the best CSS has to offer to EPUB Reading Systems (custom properties which are plug-and-play in JavaScript, CSS functions, dynamic leading, image filters and blend modes, etc.), and this new architecture is an important part of it.

We are committed to bring the best CSS has to offer to EPUB Reading Systems and this new architecture is an important part of it.

Internationalization

Internationalization is a process we decided to tackle early on, so that the alpha could ship with a solid foundation. And we are confident we can now build a strong reading experience on top of it.

This process is why the alpha version has been delayed a little bit, and (stable) support for vertical writing postponed to the beta version – you will get experimental support in the alpha.

Still, we improved support tremendously. By adding 24 scripts (Indic, CJK, Arabic, Inuktitut, Cherokee, etc.), we extended support to languages spoken by 3,050,000,000 people. In total, ReadiumCSS currently support scripts spoken by 5,262,900,507 people. Out of the box.

Internationalization

It took quite some efforts to achieve this goal, and needless to say this has been documented as well. We want implementers to feel they can confidently implement what is needed to internationalize their apps. And this is the reason why we added guidance whenever applicable, and went the extra mile by adding a typography primer and a glossary in docs.

Last but not least, we have created EPUB samples you can test to make sure your apps handle non-Latin scripts well, ranging from Amharic to Thai, and including Japanese in vertical-writing. They have already proved useful in ReadiumCSS, and we believe they will prove useful at other levels too (metadata, UI, etc.).

In the end, we just want authors and users to feel confident their books, whichever their language is, can be read in apps using ReadiumCSS, and the best we can do is to help implementers deal with internationalization.

Accessibility

EDRLab is strongly committed to accessibility, and ReadiumCSS is obviously no exception. Luc Maumet has been put in charge of research on dyslexia, which we could leverage and implement almost in real-time.

We would like to take the opportunity to thank the experts who provided invaluable feedbacks and insights: Marion Berthaut (MOBiDys), Luc Audrain (Hachette), Luc Maumet (EDRLab), Daniel Weck (Daisy, Readium), Romain Deltour (Daisy), Gregorio Pellegrino (Associazione Italiana Editori), and Ludovic Oger.

settings

Thanks to those experts, we were able to define an accessibility baseline for Latin scripts and provide guidance to implementers. We would like to do the same for Indic, Arabic, Hebrew, and CJK scripts so if you are an expert in this field, do not hesitate to contact us.

Let’s make a bigger impact

It bears repeating we are paying extra attention to interoperability and compatibility. And we now have a better overview of the EPUB ecosystem. We created an EPUB Compatibility document, and are actively lobbying on these fronts because issues quickly arose during R&D.

More participation from content providers and authors would be greatly appreciated, as improving the ecosystem is a long-term commitment requiring that all the actors involved start documenting, discussing and resolving current issues; we need a lot more than an EPUB Compatibility document written in markdown.

We have been able to dedicate some efforts to improving the web platform too!

We are reporting our CSS Multicolumn issues and requests to the specification’s editors for instance, and it ends up impacting fragmentation in web browsers’ rendering engine – this could be useful for paged media.

And we recently reported an hyphenation bug we discovered in Chrome on Android. A fix was developed and released on the nightly build within 48 hours. It is noteworthy that this fix ended up improving internationalization as well.

We can’t overemphasize how important such contributions are, since they will improve the web and be of benefit to billions of people. So if you discover CSS issues but don’t feel like you can manage the bug report yourself, we will happily serve as a liaison.

As you can see, stylesheets for EPUB Reading Systems can go a long way, and we hope you will join us on this journey.

What’s next

The beta version will ship with:

  • stable support for vertical-writing;
  • stable support for monochrome, inverted and high-contrast modes;
  • customizable themes.

More importantly, we are at a point where everything is in its place and we can focus on improving details. This is great news as it means we put so much effort into this alpha release that you can now review it for production apps, and start testing it in real conditions.


Header photo by Álvaro Serrano on Unsplash

Leave a Reply

Your email address will not be published. Required fields are marked *