Design & Architecture

Design Principles

Readium CSS will be designed in accordance to 4 principles:

1. Modular: Readium CSS is not a monolithic stylesheet but a set of modules;
2. Separation of Reading System’s Concerns: those modules are task-oriented e.g. paginate, apply default styles, intercept styles for reading modes or user settings, apply a reading mode or user setting, apply a theme, etc.;
3. Daisy-chainable: those modules can be loaded and daisy-chained (cascade) depending on conditions;
4. Customizable: modules can be customized either before or during runtime (CSS variables), which implies themes can be generated in minutes.

For your information, the user’s configuration (pagination, reading modes, user settings, etc.) will be cached and its styles appended to HTML files before rendering so that we can prevent a reflow on opening.

Potential benefits

• Implementers will be able to “plug and play”, add their own reading modes, themes and user settings, etc.
• In its simplest form, reading modes and themes are a set of CSS variables.
• CSS variables can be used as inline styles and are super JavaScript-friendly.
• If there’s a bug, it will be a lot easier to find which module is impacted so this is a big win in terms of maintenance.
• Styles which are not necessary are not loaded, which should prevent accidental overrides.