Support for custom CSS in EPUB navigator

[mickael-menu]

Right now the User Settings in the EPUB Navigator are quite limited and I didn't see any way to inject custom CSS.

@JayPanoz Is it something that is supported by ReadiumCSS and just need to be exposed in Swift, by any chance?

[JayPanoz]

I’m afraid not as ReadiumCSS provides static CSS files, so the only customisation it allows is custom selectors and media queries for predefined styles, before “compiling/bundling.”

Then CSS custom properties are tied to their specific properties. If you want to add rules, you have to create your own stylesheets dynamically in head for instance.

[mickael-menu]

Okay, thanks.

[JayPanoz]

Following the Readium Engineering call, a correction since it revolves around theming, in general – and I’ll open an issue in ReadiumCSS.

So ReadiumCSS prefs have been built to allow theming from the start, meaning it already has most in place for more customisation e.g. the background-colour and colour variables.

A few “predefined” themes e.g. modern, classic, etc. were made 2 years ago, but didn’t ship in Readium CSS alpha, but they are simply built using several CSS variables e.g. I had something like:

{
  name: "classic",
  settings: {
    "--USER__appearance": "readium-default-on",
    "--USER__backgroundColor": "#FEFEFE",
    "--USER__textColor": "#121212",
    "--USER__textAlign": "justify",
    "--USER__bodyHyphens": "auto",
    "--USER__fontFamily": "var(--RS__oldStyleTf)",
    "--USER__fontSize": "100%",
    "--USER__typeScale": "1.125",
    "--USER__lineHeight": "1.5",
    "--USER__paraSpacing": "0",
    "--USER__paraIndent": "1rem",
    "--USER__wordSpacing": "0",      
    "--USER__letterSpacing": "0",
    "--USER__alignElements": "readium-center-elements"
  }
}

And it would go from

to this for instance:

With custom spacing (margins), fonts, etc. the user can pick/modify and save.

So the idea is to make that clearer, and extend it if needed: https://github.com/readium/readium-css/blob/master/docs/CSS12-user_prefs.md#themes