Merge pull request #215 from readium/safeguards-compensation

JayPanoz · web-flow · commit f3f1b90e1313 · 2026-02-24T16:12:46.000+01:00
Add Zoom compensation for viewport units
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
@@ -400,6 +400,15 @@ img, svg|svg, video{
   break-inside:avoid;
 }
 
+@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))){
+
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] img,
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] svg|svg,
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] video{
+    zoom:calc(100% / var(--USER__fontSize));
+  }
+}
+
 audio{
     max-width:100%;
     -webkit-column-break-inside:avoid;
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
@@ -400,6 +400,15 @@ img, svg|svg, video{
   break-inside:avoid;
 }
 
+@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))){
+
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] img,
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] svg|svg,
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] video{
+    zoom:calc(100% / var(--USER__fontSize));
+  }
+}
+
 audio{
     max-width:100%;
     -webkit-column-break-inside:avoid;
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
@@ -400,6 +400,16 @@ img, svg|svg, video{
   break-inside:avoid;
 }
 
+@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))){
+
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] img,
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] svg|svg,
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] video,
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div{
+    zoom:calc(100% / var(--USER__fontSize));
+  }
+}
+
 audio{
   max-width:100%;
   -webkit-column-break-inside:avoid;
@@ -409,5 +419,5 @@ audio{
 
 table{
   max-height:var(--RS__maxMediaWidth);
-  box-sizing:var(--RS__boxSizingTable)
+  box-sizing:var(--RS__boxSizingTable);
 }
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
@@ -400,6 +400,15 @@ img, svg|svg, video{
   break-inside:avoid;
 }
 
+@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))){
+
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] img,
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] svg|svg,
+  :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] video{
+    zoom:calc(100% / var(--USER__fontSize));
+  }
+}
+
 audio{
     max-width:100%;
     -webkit-column-break-inside:avoid;
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.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
diff --git a/css/dist/webPub/ReadiumCSS-webPub.css b/css/dist/webPub/ReadiumCSS-webPub.css
@@ -1,5 +1,5 @@
 /*!
- * Readium CSS v.2.0.0-beta.25
+ * Readium CSS v.2.0.0
  * Copyright (c) 2017–2026. 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.
diff --git a/css/src/modules/ReadiumCSS-safeguards-vertical.css b/css/src/modules/ReadiumCSS-safeguards-vertical.css
@@ -56,6 +56,16 @@ img, svg|svg, video {
   break-inside: avoid;
 }
 
+/* Zoom Compensation of viewport units in Chrome/Firefox */
+@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))) {
+  :root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] img,
+  :root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] svg|svg,
+  :root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] video,
+  :root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] div {
+    zoom: calc(100% / var(--USER__fontSize));
+  }
+}
+
 /* Setting width and height for audio creates issues with controls (invisible in Chromium, only the play button is displayed in Webkit).
    These styles should just help a little bit if the fallback is displayed cos audio is not supported. */
 audio {
@@ -68,5 +78,5 @@ audio {
 /* Try preventing border being cut-off, webkit + blink have content-box by default */
 table {
   box-sizing: var(--RS__boxSizingTable);
-  max-height: var(--RS__maxMediaWidth)
+  max-height: var(--RS__maxMediaWidth);
 }
diff --git a/css/src/modules/ReadiumCSS-safeguards.css b/css/src/modules/ReadiumCSS-safeguards.css
@@ -57,6 +57,15 @@ img, svg|svg, video {
   break-inside: avoid;
 }
 
+/* Zoom Compensation of viewport units in Chrome/Firefox */
+@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))) {
+  :root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] img,
+  :root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] svg|svg,
+  :root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] video {
+    zoom: calc(100% / var(--USER__fontSize));
+  }
+}
+
 /* Setting width and height for audio creates issues with controls (invisible in Chromium, only the play button is displayed in Webkit).
    These styles should just help a little bit if the fallback is displayed cos audio is not supported. */
    audio {
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.25",
+  "version": "2.0.0",
   "homepage": "https://github.com/readium/css",
   "license": "BSD-3-Clause",
   "keywords": [
@@ -23,11 +23,12 @@
   "bugs": {
     "url": "https://github.com/readium/css/issues"
   },
-  "main": "css/ReadiumCSS-config.css",
   "files": [
     "css/**/*",
     "!css/*.js",
-    "!css/demo/**/*"
+    "!css/demo/**/*",
+    "!css/src/**/*",
+    "!css/ReadiumCSS-config.css"
   ],
   "devDependencies": {
     "@daltontan/postcss-import-json": "^1.1.1",
