Merge pull request #190 from readium/iOS-patch

JayPanoz · web-flow · commit aa73c5c47ad5 · 2025-07-11T10:40:06.000+02:00
iOS patch
diff --git a/css/ReadiumCSS-config.css b/css/ReadiumCSS-config.css
@@ -50,5 +50,6 @@
 @custom-selector :--ltr [dir="ltr"];
 @custom-selector :--rtl [dir="rtl"];
 
-/* Patch for iPadOS */
+/* Patch for iOS and iPadOS */
+@custom-selector :--iOS-patch [style*="readium-iOSPatch-on"];
 @custom-selector :--ipadOS-patch [style*="readium-iPadOSPatch-on"];
diff --git a/css/dist/ReadiumCSS-after.css b/css/dist/ReadiumCSS-after.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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
@@ -421,10 +421,14 @@ body{
   vertical-align:baseline !important;
 }
 
-:root:not([style*="readium-deprecatedFontSize-on"])[style*="--USER__fontSize"] body{
+:root:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{
   zoom:var(--USER__fontSize) !important;
 }
 
+:root[style*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{
+  -webkit-text-size-adjust:var(--USER__fontSize) !important;
+}
+
 @supports not (zoom: 1){
 
   :root[style*="--USER__fontSize"]{
diff --git a/css/dist/ReadiumCSS-before.css b/css/dist/ReadiumCSS-before.css
@@ -1,5 +1,5 @@
 /*
- * Readium CSS (v. 2.0.0-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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
@@ -349,10 +349,14 @@ body{
   font-family:revert !important;
 }
 
-:root:not([style*="readium-deprecatedFontSize-on"])[style*="--USER__fontSize"] body{
+:root:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{
   zoom:var(--USER__fontSize) !important;
 }
 
+:root[style*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{
+  -webkit-text-size-adjust:var(--USER__fontSize) !important;
+}
+
 @supports not (zoom: 1){
 
   :root[style*="--USER__fontSize"]{
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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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
@@ -334,10 +334,14 @@ body{
   font-family:revert !important;
 }
 
-:root:not([style*="readium-deprecatedFontSize-on"])[style*="--USER__fontSize"] body{
+:root:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{
   zoom:var(--USER__fontSize) !important;
 }
 
+:root[style*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{
+  -webkit-text-size-adjust:var(--USER__fontSize) !important;
+}
+
 @supports not (zoom: 1){
 
   :root[style*="--USER__fontSize"]{
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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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
@@ -363,10 +363,14 @@ body{
   font-family:revert !important;
 }
 
-:root:not([style*="readium-deprecatedFontSize-on"])[style*="--USER__fontSize"] body{
+:root:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{
   zoom:var(--USER__fontSize) !important;
 }
 
+:root[style*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{
+  -webkit-text-size-adjust:var(--USER__fontSize) !important;
+}
+
 @supports not (zoom: 1){
 
   :root[style*="--USER__fontSize"]{
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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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-beta.17)
+ * Readium CSS (v. 2.0.0-beta.18)
  * 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/user-settings-submodules/ReadiumCSS-fontSize_pref.css b/css/src/modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css
@@ -6,10 +6,14 @@
 
    Repo: https://github.com/readium/css */
 
-:root:not(:--deprecated-font-size)[style*="--USER__fontSize"] body {
+:root:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] body {
   zoom: var(--USER__fontSize) !important;
 }
 
+:root:--iOS-patch[style*="--USER__fontSize"] body {
+  -webkit-text-size-adjust: var(--USER__fontSize) !important;
+}
+
 /* Older deprecated implementation for when zoom is not supported
    or it is explicitly enabled because you don’t want the new one */
 
diff --git a/docs/CSS12-user_prefs.md b/docs/CSS12-user_prefs.md
@@ -101,9 +101,21 @@ Supported value: `readium-normalize-on`
 
 Override class: None.
 
+### iOS Scaling Patch
+
+Acts as an explicit switch to force iOS patching of scaling issues so that `--USER__fontSize` can work as expected. This should be applied only when the site is requested in its mobile version on iOS and iPadOS.
+
+```
+--USER__iOSPatch
+```
+
+Supported value: `readium-iOSPatch-on`
+
+Override class: None.
+
 ### iPadOS Zoom Patch
 
-Acts as an explicit switch to force iPadOS patching of zoom issues so that `--USER__fontSize` can work as expected. This should be applied only when the site is requested in its desktop version on iPadOS – mobile version is completely fine.
+Acts as an explicit switch to force iPadOS patching of zoom issues so that `--USER__fontSize` can work as expected. This should be applied only when the site is requested in its desktop version on iPadOS.
 
 ```
 --USER__iPadOSPatch
diff --git a/docs/CSS19-api.md b/docs/CSS19-api.md
@@ -88,6 +88,18 @@ Override class: None. This flag can be used to force font-size normalization if
 
 * * *
 
+```
+:--ios-patch
+```
+
+Preset: `--USER__iOSPatch: readium-iOSPatch-on`
+
+Scope: `html`
+
+Override class: None. This flag is used to activate patching of iOS scaling issues in Safari, which can happen on rotate for instance.
+
+* * *
+
 ```
 :--ipadOS-patch
 ```
diff --git a/docs/CSS28-migration_guide.md b/docs/CSS28-migration_guide.md
@@ -108,7 +108,11 @@ It doesn’t need any change at the implementation level, and should work out of
 
 As a side-effect of this new implementation, please note the `--USER__typeScale` setting is no longer available.
 
-Due to iPadOS “desktop-class experience” interventions, a patch has to be applied when the site is requested (by default) in desktop version, and only in this version (mobile website is fine without it). The selector for the flag can be configured (`:--ipadOS-patch`) and is `[style*="readium-iPadOSPatch-on"]` by default.
+iOS and iPadOS require patches to be applied to be able to use the font-size user setting properly, as the management of zooming and scaling has numerous and complex heuristics issues depending on the platform, and the way the site is requested (mobile or desktop).
+
+iOS and iPadOS both require a patch to be applied when the site is requested in mobile version, and only in this version. The selector for the flag can be configured (`:--ios-patch`) and is `[style*="readium-iOSPatch-on"]` by default.
+
+Due to iPadOS “desktop-class experience” interventions, another patch has to be applied when the site is requested (by default) in desktop version, and only in this version (mobile website is fine without it). The selector for the flag can be configured (`:--ipadOS-patch`) and is `[style*="readium-iPadOSPatch-on"]` by default.
 
 Starting version `2.0.0-beta.12` the previous and deprecated implementation of font-size is exposed under a flag that can be configured (`:--deprecated-font-size`) and is `[style*="readium-deprecatedFontSize-on"]` by default. This can be used if you need some time to switch to the new implementation, or simply prefer to use the old one. The font-size normalize is no longer applied by default though, and is relying on another flag (`:--fs-normalize`) with `[style*="readium-normalize-on"]` as default.
 
diff --git a/docs/ReadiumCSS_docs.epub b/docs/ReadiumCSS_docs.epub
diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-012.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-012.xhtml
@@ -119,6 +119,18 @@ root.style.setProperty("name of var", "");</code></pre>
         <p>Override class: None.</p>
       </section>
 
+      <section id="ios-scale-patch" class="level3">
+        <h3 class="sigil_not_in_toc">iOS Scaling Patch</h3>
+
+        <p>Acts as an explicit switch to force iOS patching of scaling issues so that <code>--USER__fontSize</code> can work as expected. This should be applied only when the site is requested in its mobile version on iOS and iPadOS.</p>
+
+        <pre><code>--USER__iOSPatch</code></pre>
+
+        <p>Supported value: <code>readium-iOSPatch-on</code></p>
+
+        <p>Override class: None.</p>
+      </section>
+
       <section id="ipados-zoom-patch" class="level3">
         <h3 class="sigil_not_in_toc">iPadOS Zoom Patch</h3>
 
diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml
@@ -90,6 +90,16 @@
 
       <hr/>
 
+      <pre><code>:--ios-patch</code></pre>
+
+      <p>Preset: <code>--USER__iOSPatch: readium-iOSPatch-on</code></p>
+
+      <p>Scope: <code>html</code></p>
+
+      <p>Override class: None. This flag is used to activate patching of iOS scaling issues in Safari, which can happen on rotate for instance.</p>
+
+      <hr/>
+
       <pre><code>:--ipadOS-patch</code></pre>
 
       <p>Preset: <code>--USER__iPadOSPatch: readium-iPadOSPatch-on</code></p>
diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-028.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-028.xhtml
@@ -126,7 +126,11 @@
 
       <p>As a side-effect of this new implementation, please note the <code>--USER__typeScale</code> setting is no longer available.</p>
 
-      <p>Due to iPadOS “desktop-class experience” interventions, a patch has to be applied when the site is requested (by default) in desktop mode, and only in this mode (mobile website is fine without it). The selector for the flag can be configured (<code>:--ipadOS-patch</code>) and is <code>[style*="readium-iPadOSPatch-on"]</code> by default.</p>
+      <p>iOS and iPadOS require patches to be applied to be able to use the font-size user setting properly, as the management of zooming and scaling has numerous and complex heuristics issues depending on the platform, and the way the site is requested (mobile or desktop).</p>
+
+      <p>iOS and iPadOS both require a patch to be applied when the site is requested in mobile version, and only in this version. The selector for the flag can be configured (<code>:--ios-patch</code>) and is <code>[style*="readium-iOSPatch-on"]</code> by default.</p>
+
+      <p>Due to iPadOS “desktop-class experience” interventions, another patch has to be applied when the site is requested (by default) in desktop mode, and only in this mode (mobile website is fine without it). The selector for the flag can be configured (<code>:--ipadOS-patch</code>) and is <code>[style*="readium-iPadOSPatch-on"]</code> by default.</p>
 
       <p>Starting version <code>2.0.0-beta.12</code> the previous and deprecated implementation of font-size is exposed under a flag that can be configured (<code>:--deprecated-font-size</code>) and is <code>[style*="readium-deprecatedFontSize-on"]</code> by default. This can be used if you need some time to switch to the new implementation, or simply prefer to use the old one. The font-size normalize is no longer applied by default though, and is relying on another flag (<code>:--fs-normalize</code>) with <code>[style*="readium-normalize-on"]</code> as default.</p>
 
diff --git a/package-lock.json b/package-lock.json
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-beta.17",
+  "version": "2.0.0-beta.18",
   "homepage": "https://github.com/readium/css",
   "license": "BSD-3-Clause",
   "keywords": [
