Version 2

_includes/toc.html

@@ -10,6 +10,7 @@
     <li><a href="CSS08-defaults.html">Defaults</a></li>
     <li><a href="CSS09-default_fonts.html">Typefaces and font-stacks</a></li>
     <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="CSS13-a11y_settings_baseline.html">Baseline for a11y-related user settings</a></li>
@@ -27,5 +28,6 @@
     <li><a href="CSS25-performance_hacks.html">CSS Performance Hacks</a></li>
     <li><a href="CSS26-i18n_glossary.html">i18n glossary</a></li>
     <li><a href="CSS27-considered_features.html">Features that were considered but not implemented</a></li>
+    <li><a href="CSS28-migration_guide.html">Migration Guide</a></li>
   </ol>
 </nav>

backstop.json

@@ -49,8 +49,15 @@
       "misMatchThreshold" : 0.1
     },
     {
-      "label": "Page margins pref",
-      "url": "http://localhost:8000/tests/margins.html",
+      "label": "3 columns pref",
+      "url": "http://localhost:8000/tests/cols-3.html",
+      "delay": 0,
+      "selectors": ["viewport"],
+      "misMatchThreshold" : 0.1
+    },
+    {
+      "label": "Line length pref",
+      "url": "http://localhost:8000/tests/line-length.html",
       "delay": 0,
       "selectors": ["viewport"],
       "misMatchThreshold" : 0.1
@@ -201,6 +208,34 @@
       "delay": 0,
       "selectors": ["document"],
       "misMatchThreshold" : 0.1
+    },
+    {
+      "label": "Font optical sizing pref",
+      "url": "http://localhost:8000/tests/font-optical-sizing.html",
+      "delay": 0,
+      "selectors": ["document"],
+      "misMatchThreshold" : 0.1
+    },
+    {
+      "label": "Font weight pref",
+      "url": "http://localhost:8000/tests/font-weight.html",
+      "delay": 0,
+      "selectors": ["document"],
+      "misMatchThreshold" : 0.1
+    },
+    {
+      "label": "Font width Keyword pref",
+      "url": "http://localhost:8000/tests/font-width-keyword.html",
+      "delay": 0,
+      "selectors": ["document"],
+      "misMatchThreshold" : 0.1
+    },
+    {
+      "label": "Font width Percentage pref",
+      "url": "http://localhost:8000/tests/font-width-percentage.html",
+      "delay": 0,
+      "selectors": ["document"],
+      "misMatchThreshold" : 0.1
     }
   ],
   "paths": {

css/ReadMe.md

@@ -42,26 +42,9 @@ By default, we inject all stylesheets on load and rely on custom properties (a.k
 
 ## Customize
 
-ReadiumCSS ships with a `ReadiumCSS-config.css` file you can use to customize it a little bit. It allows implementers to:
+ReadiumCSS ships with a `ReadiumCSS-config.css` file you can use to customize it a little bit. It allows implementers to choose selectors for the user settings’ flags.
 
-1. define in which conditions the auto pagination model is used;
-2. choose selectors for the user settings’ flags.
-
-In order to provide this customization, we use custom media and custom selectors, which will hopefully become [standards implemented at some point](https://drafts.csswg.org/css-extensions/), but require PostCSS at the moment. Consequently, you’ll have to rebuild all `dist` stylesheets if you’re changing this file.
-
-### Auto pagination model
-
-The auto pagination model switches from 1 to 2 columns, and vice versa, when the conditions defined in `ReadiumCSS-config.css` are met. Further details about this model can be found in [“Injection and pagination” doc](../docs/CSS03-injection_and_pagination.md).
-
-On desktop, `--responsive-columns` is the `min-width` at which the model must be used. Default is `60em`, a relative unit since it is responsive by default and will switch depending on the window’s dimensions and the font size.
-
-Should you want it never or always applied, you can either define a `min-width` large or small enough, or remove the media queries entirely in `ReadiumCSS-pagination.css` and `ReadiumCSS-colNumber_pref.css`.
-
-On mobile, `--min-device-columns` and `--max-device-columns` is the range of (minimum and maximum) device widths in which the model must be used. We are forcing the orientation in `landscape`.
-
-We recommend not trying to apply it in portrait orientation because 2 columns will provide users with quite a terrible reading experience in this configuration.
-
-Those custom medias may be extended at some point, depending on implementers’ feedbacks and issues.
+In order to provide this customization, we use custom selectors, which will hopefully become [standards implemented at some point](https://drafts.csswg.org/css-extensions/), but require PostCSS at the moment. Consequently, you’ll have to rebuild all `dist` stylesheets if you’re changing this file.
 
 ### Flags for user settings
 

css/ReadiumCSS-config.css

@@ -6,21 +6,6 @@
 
    Repo: https://github.com/readium/readium-css */
 
-/* Custom medias
-   Syntax: @custom-media --variable (prop: value) */
-
-/* Responsive columns
-   The minimum width for which responsive columns (2 -> 1 and vice versa,
-   depending on the current font-size) must be enabled */
-@custom-media --responsive-columns (min-width: 60em);
-
-/* Mobile columns
-   The minimum and maximum width for mobile devices.
-   We’re forcing the landscape orientation by default,
-   and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */
-@custom-media --min-device-columns (min-device-width: 36em);
-@custom-media --max-device-columns (max-device-width: 47em);
-
 /* Custom selectors
    Syntax: @custom-selector :--variable selector
    The selectors you will use for flags/switches
@@ -44,6 +29,9 @@
 @custom-selector :--darken-filter [style*="readium-darken-on"];
 @custom-selector :--invert-filter [style*="readium-invert-on"];
 
+/* Disabling pagination for vertical writing */
+@custom-selector :--no-vertical-pagination [style*="readium-noVerticalPagination-on"];
+
 /* Hiding ruby */
 @custom-selector :--no-ruby [style*="readium-noRuby-on"];