Merge pull request #145 from readium/thorium-ports

Thorium ports: 

- it resolves Letter-spacing for japanese #136
- it resolves User setting to disable/hide ruby #140
- it fixes Width and height safeguards hide audio controls + video #94
- it fixes forcing "start" text alignment (left or right depending on document language) does not work with "inherit" #128

Author: JayPanoz

backstop.json

@@ -160,6 +160,13 @@
       "selectors": ["document"],
       "misMatchThreshold" : 0.1
     },
+    {
+      "label": "Letterspacing CJK pref",
+      "url": "http://localhost:8000/tests/letter-spacing-cjk.html",
+      "delay": 0,
+      "selectors": ["document"],
+      "misMatchThreshold" : 0.1
+    },
     {
       "label": "Ligatures pref",
       "url": "http://localhost:8000/tests/arabic-ligatures.html",
@@ -170,7 +177,7 @@
     {
       "label": "Accessibility font pref",
       "url": "http://localhost:8000/tests/a11y-font.html",
-      "delay": 0,
+      "delay": 200,
       "selectors": ["document"],
       "misMatchThreshold" : 0.1
     },
@@ -184,6 +191,13 @@
     {
       "label": "Accessibility custom pref",
       "url": "http://localhost:8000/tests/a11y-custom.html",
+      "delay": 200,
+      "selectors": ["document"],
+      "misMatchThreshold" : 0.1
+    },
+    {
+      "label": "no Ruby pref",
+      "url": "http://localhost:8000/tests/no-ruby.html",
       "delay": 0,
       "selectors": ["document"],
       "misMatchThreshold" : 0.1

css/ReadiumCSS-config.css

@@ -44,6 +44,9 @@
 @custom-selector :--darken-filter [style*="readium-darken-on"];
 @custom-selector :--invert-filter [style*="readium-invert-on"];
 
+/* Hiding ruby */
+@custom-selector :--no-ruby [style*="readium-noRuby-on"];
+
 /* Accessibility normalization */
 @custom-selector :--a11y-normalize [style*="readium-a11y-on"];
 

css/dist/ReadMe.md

@@ -54,8 +54,11 @@ Disabled user settings:
 - `text-align`;
 - `hyphens`;
 - paragraphs’ indent;
-- `word-spacing`;
-- `letter-spacing`.
+- `word-spacing`.
+
+Added user settings:
+
+- hiding/disabling ruby (mapped to `--USER__noRuby: readium-noRuby-on` flag).
 
 ### Vertical
 
@@ -87,8 +90,11 @@ Disabled user settings:
 - `text-align`;
 - `hyphens`;
 - paragraphs’ indent;
-- `word-spacing`;
-- `letter-spacing`.
+- `word-spacing`.
+
+Added user settings:
+
+- hiding/disabling ruby (mapped to `--USER__noRuby: readium-noRuby-on` flag).
 
 ### EBPAJ Polyfill
 

css/dist/ReadiumCSS-after.css

@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 1.0.0-beta.3)
+ * Readium CSS (v. 1.1.0)
  * Developers: Jiminy Panoz 
  * Copyright (c) 2017. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the
@@ -316,24 +316,12 @@ screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientatio
 :root[style*="readium-advanced-on"][style*="--USER__textAlign"] body,
 :root[style*="readium-advanced-on"][style*="--USER__textAlign"] *:not(blockquote):not(figcaption) p,
 :root[style*="readium-advanced-on"][style*="--USER__textAlign"] li{
-  text-align:inherit !important;
+  text-align:var(--USER__textAlign) !important;
   -moz-text-align-last:auto !important;
   -epub-text-align-last:auto !important;
   text-align-last:auto !important;
 }
 
-:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign: left"],
-:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign:left"],
-:root[style*="readium-advanced-on"][style*="--USER__textAlign: left"] *[dir="rtl"],
-:root[style*="readium-advanced-on"][style*="--USER__textAlign:left"] *[dir="rtl"]{
-  text-align:right;
-}
-
-:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign: start"],
-:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign:start"]{
-  text-align:right;
-}
-
 :root[style*="readium-advanced-on"][style*="--USER__textAlign: justify"] body,
 :root[style*="readium-advanced-on"][style*="--USER__textAlign:justify"] body{
   -webkit-hyphens:auto;

css/dist/ReadiumCSS-before.css

@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 1.0.0-beta.3)
+ * Readium CSS (v. 1.1.0)
  * Developers: Jiminy Panoz 
  * Copyright (c) 2017. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the
@@ -398,7 +398,7 @@ div{
   max-width:var(--RS__maxMediaWidth);
 }
 
-img, svg, audio, video{
+img, svg, video{
   object-fit:contain;
 
   width:auto;
@@ -411,6 +411,13 @@ img, svg, audio, video{
   break-inside:avoid;
 }
 
+audio{
+    max-width:100%;
+    -webkit-column-break-inside:avoid;
+    page-break-inside:avoid;
+    break-inside:avoid;
+  }
+
 table{
   max-width:var(--RS__maxMediaWidth);
   box-sizing:var(--RS__boxSizingTable);

css/dist/ReadiumCSS-default.css

@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 1.0.0-beta.3)
+ * Readium CSS (v. 1.1.0)
  * Developers: Jiminy Panoz 
  * Copyright (c) 2017. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the

css/dist/cjk-horizontal/ReadiumCSS-after.css

@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 1.0.0-beta.3)
+ * Readium CSS (v. 1.1.0)
  * Developers: Jiminy Panoz 
  * Copyright (c) 2017. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the
@@ -357,6 +357,24 @@ screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientatio
   margin-bottom:var(--USER__paraSpacing) !important;
 }
 
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h1,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h2,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h3,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h4,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h5,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h6,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] p,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] li,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] div{
+  letter-spacing:var(--USER__letterSpacing);
+  font-variant:none;
+}
+
+:root[style*="readium-advanced-on"][style*="readium-noRuby-on"] body rt,
+:root[style*="readium-advanced-on"][style*="readium-noRuby-on"] body rp{
+  display:none;
+}
+
 :root[style*="readium-advanced-on"]{
   --USER__typeScale:1.2;
 }

css/dist/cjk-horizontal/ReadiumCSS-before.css

@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 1.0.0-beta.3)
+ * Readium CSS (v. 1.1.0)
  * Developers: Jiminy Panoz 
  * Copyright (c) 2017. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the
@@ -370,7 +370,7 @@ div{
   max-width:var(--RS__maxMediaWidth);
 }
 
-img, svg, audio, video{
+img, svg, video{
   object-fit:contain;
 
   width:auto;
@@ -383,6 +383,13 @@ img, svg, audio, video{
   break-inside:avoid;
 }
 
+audio{
+    max-width:100%;
+    -webkit-column-break-inside:avoid;
+    page-break-inside:avoid;
+    break-inside:avoid;
+  }
+
 table{
   max-width:var(--RS__maxMediaWidth);
   box-sizing:var(--RS__boxSizingTable);

css/dist/cjk-horizontal/ReadiumCSS-default.css

@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 1.0.0-beta.3)
+ * Readium CSS (v. 1.1.0)
  * Developers: Jiminy Panoz 
  * Copyright (c) 2017. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the

css/dist/cjk-vertical/ReadiumCSS-after.css

@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 1.0.0-beta.3)
+ * Readium CSS (v. 1.1.0)
  * Developers: Jiminy Panoz 
  * Copyright (c) 2017. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the
@@ -338,6 +338,24 @@ body{
   margin-left:var(--USER__paraSpacing) !important;
 }
 
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h1,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h2,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h3,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h4,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h5,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h6,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] p,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] li,
+:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] div{
+  letter-spacing:var(--USER__letterSpacing);
+  font-variant:none;
+}
+
+:root[style*="readium-advanced-on"][style*="readium-noRuby-on"] body rt,
+:root[style*="readium-advanced-on"][style*="readium-noRuby-on"] body rp{
+  display:none;
+}
+
 :root[style*="readium-advanced-on"]{
   --USER__typeScale:1.2;
 }