Fix pagination in Safari

Resolves #154 by reverting commit #5680018
readium · Nov 5, 2024 · 0060fe4 · 0060fe4
1 parent 7951735
commit 0060fe4
Show file tree

Hide file tree

Showing 21 changed files with 54 additions and 25 deletions.
diff --git a/css/dist/ReadiumCSS-after.css b/css/dist/ReadiumCSS-after.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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
@@ -15,7 +15,7 @@
 @namespace svg url("http://www.w3.org/2000/svg");
 
 :root{
-  --RS__colWidth:auto;
+  --RS__colWidth:100vw;
   --RS__colCount:1;
   --RS__colGap:0;
   --RS__defaultLineLength:40rem;
@@ -273,6 +273,13 @@ body{
   column-count:1;
 }
 
+:root[style*="--USER__colCount: 0"],
+:root[style*="--USER__colCount:0"],
+:root[style*="--USER__colCount: 1"],
+:root[style*="--USER__colCount:1"]{
+  --RS__colWidth:100vw;
+}
+
 :root[style*="--USER__lineLength"] body{
     max-width:var(--USER__lineLength) !important;
   }

diff --git a/css/dist/ReadiumCSS-before.css b/css/dist/ReadiumCSS-before.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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

diff --git a/css/dist/ReadiumCSS-default.css b/css/dist/ReadiumCSS-default.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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

diff --git a/css/dist/cjk-horizontal/ReadiumCSS-after.css b/css/dist/cjk-horizontal/ReadiumCSS-after.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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
@@ -15,7 +15,7 @@
 @namespace svg url("http://www.w3.org/2000/svg");
 
 :root{
-  --RS__colWidth:auto;
+  --RS__colWidth:100vw;
   --RS__colCount:1;
   --RS__colGap:0;
   --RS__defaultLineLength:40rem;
@@ -273,6 +273,13 @@ body{
   column-count:1;
 }
 
+:root[style*="--USER__colCount: 0"],
+:root[style*="--USER__colCount:0"],
+:root[style*="--USER__colCount: 1"],
+:root[style*="--USER__colCount:1"]{
+  --RS__colWidth:100vw;
+}
+
 :root[style*="--USER__lineLength"] body{
     max-width:var(--USER__lineLength) !important;
   }

diff --git a/css/dist/cjk-horizontal/ReadiumCSS-before.css b/css/dist/cjk-horizontal/ReadiumCSS-before.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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

diff --git a/css/dist/cjk-horizontal/ReadiumCSS-default.css b/css/dist/cjk-horizontal/ReadiumCSS-default.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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

diff --git a/css/dist/cjk-vertical/ReadiumCSS-after.css b/css/dist/cjk-vertical/ReadiumCSS-after.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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
@@ -15,7 +15,7 @@
 @namespace svg url("http://www.w3.org/2000/svg");
 
 :root{
-  --RS__colWidth:auto;
+  --RS__colWidth:100vh;
   --RS__colCount:1;
   --RS__colGap:0;
   --RS__defaultLineLength:40rem;

diff --git a/css/dist/cjk-vertical/ReadiumCSS-before.css b/css/dist/cjk-vertical/ReadiumCSS-before.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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

diff --git a/css/dist/cjk-vertical/ReadiumCSS-default.css b/css/dist/cjk-vertical/ReadiumCSS-default.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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

diff --git a/css/dist/rtl/ReadiumCSS-after.css b/css/dist/rtl/ReadiumCSS-after.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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
@@ -15,7 +15,7 @@
 @namespace svg url("http://www.w3.org/2000/svg");
 
 :root{
-  --RS__colWidth:auto;
+  --RS__colWidth:100vw;
   --RS__colCount:1;
   --RS__colGap:0;
   --RS__defaultLineLength:40rem;
@@ -273,6 +273,13 @@ body{
   column-count:1;
 }
 
+:root[style*="--USER__colCount: 0"],
+:root[style*="--USER__colCount:0"],
+:root[style*="--USER__colCount: 1"],
+:root[style*="--USER__colCount:1"]{
+  --RS__colWidth:100vw;
+}
+
 :root[style*="--USER__lineLength"] body{
     max-width:var(--USER__lineLength) !important;
   }

diff --git a/css/dist/rtl/ReadiumCSS-before.css b/css/dist/rtl/ReadiumCSS-before.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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

diff --git a/css/dist/rtl/ReadiumCSS-default.css b/css/dist/rtl/ReadiumCSS-default.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-alpha.2)
+ * Readium CSS (v. 2.0.0-alpha.3)
  * 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

diff --git a/css/src/modules/ReadiumCSS-pagination-vertical.css b/css/src/modules/ReadiumCSS-pagination-vertical.css
@@ -11,8 +11,8 @@
 
 /* Default for smartphone portrait (small screens) */
 :root {
-  /* The column algorithm will prioritize column-count */
-  --RS__colWidth: auto;
+  /* We need to set this for Safari as it won’t take auto for a single-col */
+  --RS__colWidth: 100vh;
 
   /* Since columns are laid out on the y-axis in vertical-*, we can only use 1 */
   --RS__colCount: 1;

diff --git a/css/src/modules/ReadiumCSS-pagination.css b/css/src/modules/ReadiumCSS-pagination.css
@@ -14,8 +14,8 @@
 
 /* Default for smartphone portrait (small screens) */
 :root {
-  /* The column algorithm will prioritize column-count */
-  --RS__colWidth: auto;
+  /* We need to set this for Safari as it won’t take auto for a single-col */
+  --RS__colWidth: 100vw;
 
   /* Ideal number of columns (depending on columns’ width floor) */
   --RS__colCount: 1;

diff --git a/css/src/modules/user-settings-submodules/ReadiumCSS-colNumber_pref.css b/css/src/modules/user-settings-submodules/ReadiumCSS-colNumber_pref.css
@@ -22,4 +22,12 @@
   -webkit-column-count: 1;
   -moz-column-count: 1;
   column-count: 1;
+}
+
+/* If one column, make sure we reset colWidth for Safari. There is no colNumber setting in vertical writing so we don’t need to address vw/vh */
+:root[style*="--USER__colCount: 0"],
+:root[style*="--USER__colCount:0"],
+:root[style*="--USER__colCount: 1"],
+:root[style*="--USER__colCount:1"] {
+  --RS__colWidth: 100vw;
 }
diff --git a/docs/CSS03-injection_and_pagination.md b/docs/CSS03-injection_and_pagination.md
@@ -89,7 +89,7 @@ Please note those variables’ value can be redefined using media queries. You d
 --RS__colWidth
 ```
 
-The optimal column’s width. We set it to `auto` so that the column-count can be prioritized.
+The optimal column’s width. We set it to `100%` (`100vh` in vertical-writing) for a single-column for Safari – otherwise it won’t fragment content, and `auto` for multiple so that the column-count can be prioritized.
 
 * * *
 

diff --git a/docs/CSS19-api.md b/docs/CSS19-api.md
@@ -202,7 +202,7 @@ Custom properties for the Reading System are prefixed with `--RS__`.
 --RS__colWidth
 ```
 
-The optimal column’s width. We set it to `auto` so that the column-count can be prioritized
+The optimal column’s width. We set it to `100vw` (`100vh` in vertical-writing) for a single-column for Safari – otherwise it won’t fragment content, and `auto` for multiple so that the column-count can be prioritized.
 
 * * *
 

diff --git a/docs/ReadiumCSS_docs.epub b/docs/ReadiumCSS_docs.epub
diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-003.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-003.xhtml
@@ -134,7 +134,7 @@
 
           <pre><code>--RS__colWidth</code></pre>
 
-          <p>The optimal column’s width. We set it to <code>auto</code> so that the column-count can be prioritized</p>
+          <p>The optimal column’s width. We set it to <code>100vw</code> (<code>100vh</code> in vertical writing) for a single-column for Safari – otherwise it won’t fragment content, and <code>auto</code> for multiple so that the column-count can be prioritized.</p>
 
 		  <hr/>
 

diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml
@@ -191,7 +191,7 @@
 
         <pre><code>--RS__colWidth</code></pre>
 
-        <p>The optimal column’s width. We set it to <code>auto</code> so that the column-count can be prioritized</p>
+        <p>The optimal column’s width. We set it to <code>100%</code> (<code>100vh</code> in vertical writing) for a single-column for Safari – otherwise it won’t fragment content, and <code>auto</code> for multiple so that the column-count can be prioritized.</p>
 
         <hr/>
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "readium-css",
   "description": "A set of reference stylesheets for EPUB Reading Systems",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "homepage": "https://github.com/readium/readium-css",
   "license": "BSD-3-Clause",
   "keywords": [
-Original file line number
+Diff line change
@@ Expand Up @@
     --RS__colWidth
     ```
-    The optimal column’s width. We set it to `auto` so that the column-count can be prioritized.
+    The optimal column’s width. We set it to `100%` (`100vh` in vertical-writing) for a single-column for Safari – otherwise it won’t fragment content, and `auto` for multiple so that the column-count can be prioritized.
     * * *
@@ Expand Down @@