Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _includes/toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<li><a href="CSS10-libre_fonts.html">Open Source and Libre Fonts We Can Recommend</a></li>
<li><a href="CSS10b-variable_fonts.html">Variable fonts</a></li>
<li><a href="CSS11-overrides_classification.html">User Overrides’ Classification</a></li>
<li><a href="CSS12-user_prefs.html">User Settings, Reading Modes and Themes</a></li>
<li><a href="CSS12-user_prefs.html">User Settings and Themes</a></li>
<li><a href="CSS13-a11y_settings_baseline.html">Baseline for a11y-related user settings</a></li>
<li><a href="CSS14-user_settings_recs.html">Recommendations for User Settings Management</a></li>
<li><a href="CSS15-user_pref_insights.html">User Preferences’ insights</a></li>
Expand Down
14 changes: 0 additions & 14 deletions backstop.json
Original file line number Diff line number Diff line change
Expand Up @@ -92,20 +92,6 @@
"selectors": ["document"],
"misMatchThreshold" : 0.1
},
{
"label": "Sepia mode pref",
"url": "http://localhost:8000/tests/sepia.html",
"delay": 0,
"selectors": ["document"],
"misMatchThreshold" : 0.1
},
{
"label": "Night mode pref",
"url": "http://localhost:8000/tests/night.html",
"delay": 0,
"selectors": ["document"],
"misMatchThreshold" : 0.1
},
{
"label": "Theming (Reading System)",
"url": "http://localhost:8000/tests/theming.html",
Expand Down
30 changes: 8 additions & 22 deletions css/ReadMe.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ Readium CSS is a set of reference stylesheets for EPUB Reading Systems. It provi
- a CSS normalize for EPUB contents;
- paged and scrolled views;
- default styles;
- reading modes (night, sepia, etc.);
- themes;
- theming;
- user settings.

**Note:** Readium CSS stylesheets were not designed and should not be used for fixed-layout EPUB, nor other file formats like FB2, PRC, Mobi, TEI, etc.
Expand Down Expand Up @@ -48,23 +47,17 @@ In order to provide this customization, we use custom selectors, which will hope

### Flags for user settings

By default, we are using flags in the form of CSS variables to manage reading modes and user settings. But you might want to customize those flags in order to use custom attributes (`data-*`) or good old CSS classes.
By default, we are using flags in the form of CSS variables to manage user settings. But you might want to customize those flags in order to use custom attributes (`data-*`) or good old CSS classes.

A complete list of flags can be found in the [User preferences doc](../docs/CSS12-user_prefs.md).

As an example, if you want to use a CSS class for night mode, it could look like:

```
@custom-selector :--night-mode .night-mode;
```

And if you want to use custom attributes for advanced settings, it could look like:
As an example, if you want to use custom attributes for advanced settings, it could look like:

```
@custom-selector :--advanced-settings [data-settings="advanced"];
```

Both would then have to be appended to `html` at runtime.
It would then have to be appended to `html` at runtime.

Once again, you must rebuild `dist` stylesheets.

Expand Down Expand Up @@ -175,14 +168,6 @@ root.style.setProperty("--USER__bodyHyphens", "auto");

Of course this example is simplistic. You could for instance create an helper to set multiple properties at once.

#### Apply sepia mode

To apply the sepia mode, you can use a flag that will apply preset values.

```
root.style.setProperty("--USER__appearance", "readium-sepia-on");
```

## Create Themes

In Readium CSS model, themes are a set of user settings you can store and retrieve. Add the properties to `html` and you get a theme.
Expand All @@ -191,10 +176,11 @@ Depending on the prefix you are using, `--RS__` or `--USER__`, your theme will o

Check the [User Preferences doc](../docs/CSS12-user_prefs.md) for a list of available user variables.

You can also retrieve ReadiumCSS presets for font-stacks and modes by adding it as a package, then importing its exposed json files. For instance in JS/TS:
You can also retrieve ReadiumCSS presets for font-stacks, colors and pagination by adding it as a package, then importing its exposed json files. For instance in JS/TS:

```
import sepiaMode from "readium-css/css/vars/sepia.json";
import defaultColors from "readium-css/css/vars/colors.json";

const sepiaBackground = sepiaMode.sepiaMode.RS__backgroundColor;
const backgroundColor = defaultColors.RS__backgroundColor;
const textColor = defaultColors.RS__color;
```
7 changes: 1 addition & 6 deletions css/ReadiumCSS-config.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/* Readium CSS
Config module

A file allowing implementers to customize flags for reading modes,
user settings, etc.
A file allowing implementers to customize flags for user settings, etc.

Repo: https://github.com/readium/css */

Expand All @@ -21,10 +20,6 @@
/* Font-size normalization for engines that don’t support zoom */
@custom-selector :--fs-normalize [style*="readium-normalize-on"];

/* Reading Modes */
@custom-selector :--sepia-mode [style*="readium-sepia-on"];
@custom-selector :--night-mode [style*="readium-night-on"];

/* Filters (images) */
@custom-selector :--blend-filter [style*="readium-blend-on"];
@custom-selector :--darken-filter [style*="readium-darken-on"];
Expand Down
2 changes: 1 addition & 1 deletion css/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* May help later with Reading modes so that bg can be applied to whole page
/* May help later with theming so that bg can be applied to whole page
You need to allowtransparency on the iframe though (and sanitize authors’ CSS) */
background-color: transparent;
}
Expand Down
2 changes: 1 addition & 1 deletion css/demo/page.xhtml
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<p>Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.</p>

<figure>
<img alt="test if mix blend mode works in sepia, and invert in night mode" class="gaiji" src="assets/white.jpg" />
<img alt="test if gaiji work" class="gaiji" src="assets/white.jpg" />
</figure>

<p>There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.</p>
Expand Down
141 changes: 1 addition & 140 deletions css/dist/ReadiumCSS-after.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Readium CSS v.2.0.0-beta.18
* Readium CSS v.2.0.0-beta.19
* Copyright (c) 2017–2025. Readium Foundation. All rights reserved.
* Use of this source code is governed by a BSD-style license which is detailed in the
* LICENSE file present in the project repository where this source code is maintained.
Expand Down Expand Up @@ -140,145 +140,6 @@ body{
padding-right:var(--RS__scrollPaddingRight) !important;
}

:root[style*="readium-night-on"]{

--RS__selectionTextColor:inherit;

--RS__selectionBackgroundColor:#b4d8fe;

--RS__visitedColor:#0099E5;

--RS__linkColor:#63caff;

--RS__textColor:#FEFEFE;

--RS__backgroundColor:#000000;
}

:root[style*="readium-night-on"] *:not(a){
color:inherit !important;
background-color:transparent !important;
border-color:currentcolor !important;
}

:root[style*="readium-night-on"] svg text{
fill:currentcolor !important;
stroke:none !important;
}

:root[style*="readium-night-on"] a:link,
:root[style*="readium-night-on"] a:link *{
color:var(--RS__linkColor) !important;
}

:root[style*="readium-night-on"] a:visited,
:root[style*="readium-night-on"] a:visited *{
color:var(--RS__visitedColor) !important;
}

:root[style*="readium-night-on"] img[class*="gaiji"],
:root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child,
:root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{
-webkit-filter:invert(100%);
filter:invert(100%);
}

:root[style*="readium-sepia-on"]{

--RS__selectionTextColor:inherit;

--RS__selectionBackgroundColor:#b4d8fe;

--RS__visitedColor:#551A8B;

--RS__linkColor:#0000EE;

--RS__textColor:#121212;

--RS__backgroundColor:#faf4e8;
}

:root[style*="readium-sepia-on"] *:not(a){
color:inherit !important;
background-color:transparent !important;
}

:root[style*="readium-sepia-on"] a:link,
:root[style*="readium-sepia-on"] a:link *{
color:var(--RS__linkColor);
}

:root[style*="readium-sepia-on"] a:visited,
:root[style*="readium-sepia-on"] a:visited *{
color:var(--RS__visitedColor);
}

@media screen and (-ms-high-contrast: active){

:root{
color:windowText !important;
background-color:window !important;
}

:root :not(#\#):not(#\#):not(#\#),
:root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#)
:root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#){
color:inherit !important;
background-color:inherit !important;
}

.readiumCSS-mo-active-default{
color:highlightText !important;
background-color:highlight !important;
}
}

@media screen and (-ms-high-contrast: white-on-black){

:root[style*="readium-night-on"] img[class*="gaiji"],
:root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child,
:root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{
-webkit-filter:none !important;
filter:none !important;
}

:root[style*="readium-night-on"][style*="readium-invert-on"] img{
-webkit-filter:none !important;
filter:none !important;
}

:root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{
-webkit-filter:brightness(80%);
filter:brightness(80%);
}
}

@media screen and (inverted-colors){

:root[style*="readium-night-on"] img[class*="gaiji"],
:root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child,
:root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{
-webkit-filter:none !important;
filter:none !important;
}

:root[style*="readium-night-on"][style*="readium-invert-on"] img{
-webkit-filter:none !important;
filter:none !important;
}

:root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{
-webkit-filter:brightness(80%);
filter:brightness(80%);
}
}

@media screen and (monochrome){
}

@media screen and (prefers-reduced-motion){
}

:root[style*="--USER__backgroundColor"]{
background-color:var(--USER__backgroundColor) !important;
}
Expand Down
2 changes: 1 addition & 1 deletion css/dist/ReadiumCSS-before.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Readium CSS v.2.0.0-beta.18
* Readium CSS v.2.0.0-beta.19
* Copyright (c) 2017–2025. Readium Foundation. All rights reserved.
* Use of this source code is governed by a BSD-style license which is detailed in the
* LICENSE file present in the project repository where this source code is maintained.
Expand Down
2 changes: 1 addition & 1 deletion css/dist/ReadiumCSS-default.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Readium CSS v.2.0.0-beta.18
* Readium CSS v.2.0.0-beta.19
* Copyright (c) 2017–2025. Readium Foundation. All rights reserved.
* Use of this source code is governed by a BSD-style license which is detailed in the
* LICENSE file present in the project repository where this source code is maintained.
Expand Down
Loading