Add flag to disable overflow

JayPanoz · JayPanoz · commit 55321270382f · 2025-06-20T12:43:02.000+02:00
diff --git a/css/ReadiumCSS-config.css b/css/ReadiumCSS-config.css
@@ -34,6 +34,9 @@
 /* Disabling pagination for vertical writing */
 @custom-selector :--no-vertical-pagination [style*="readium-noVerticalPagination-on"];
 
+/* Disabling overflow */
+@custom-selector :--no-overflow [style*="readium-noOverflow-on"];
+
 /* Hiding ruby */
 @custom-selector :--no-ruby [style*="readium-noRuby-on"];
 
diff --git a/css/dist/ReadiumCSS-after.css b/css/dist/ReadiumCSS-after.css
@@ -66,17 +66,20 @@ body{
   max-width:var(--RS__defaultLineLength) !important;
   padding:0 var(--RS__pageGutter) !important;
   margin:0 auto !important;
-  overflow:hidden;
   box-sizing:border-box;
 }
 
+:root:not([style*="readium-noOverflow-on"]) body{
+  overflow:hidden;
+}
+
 @supports (overflow: clip){
 
-   :root{
+   :root:not([style*="readium-noOverflow-on"]){
       overflow:clip;
    }
 
-   body{
+   :root:not([style*="readium-noOverflow-on"]) body{
       overflow:clip;
       overflow-clip-margin:content-box;
    }
@@ -94,18 +97,18 @@ body{
   min-height:0 !important;
 }
 
-:root[style*="readium-scroll-on"] body{
+:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
   max-width:var(--RS__defaultLineLength) !important;
   overflow:auto;
 }
 
 @supports (overflow: clip){
 
-  :root[style*="readium-scroll-on"]{
+  :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){
      overflow:auto;
   }
 
-  :root[style*="readium-scroll-on"] body{
+  :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
      overflow:clip;
   }
 }
diff --git a/css/dist/cjk-horizontal/ReadiumCSS-after.css b/css/dist/cjk-horizontal/ReadiumCSS-after.css
@@ -66,17 +66,20 @@ body{
   max-width:var(--RS__defaultLineLength) !important;
   padding:0 var(--RS__pageGutter) !important;
   margin:0 auto !important;
-  overflow:hidden;
   box-sizing:border-box;
 }
 
+:root:not([style*="readium-noOverflow-on"]) body{
+  overflow:hidden;
+}
+
 @supports (overflow: clip){
 
-   :root{
+   :root:not([style*="readium-noOverflow-on"]){
       overflow:clip;
    }
 
-   body{
+   :root:not([style*="readium-noOverflow-on"]) body{
       overflow:clip;
       overflow-clip-margin:content-box;
    }
@@ -94,18 +97,18 @@ body{
   min-height:0 !important;
 }
 
-:root[style*="readium-scroll-on"] body{
+:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
   max-width:var(--RS__defaultLineLength) !important;
   overflow:auto;
 }
 
 @supports (overflow: clip){
 
-  :root[style*="readium-scroll-on"]{
+  :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){
      overflow:auto;
   }
 
-  :root[style*="readium-scroll-on"] body{
+  :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
      overflow:clip;
   }
 }
diff --git a/css/dist/cjk-vertical/ReadiumCSS-after.css b/css/dist/cjk-vertical/ReadiumCSS-after.css
@@ -77,17 +77,20 @@ body{
   max-height:var(--RS__defaultLineLength) !important;
   padding:var(--RS__pageGutter) 0 !important;
   margin:auto 0 !important;
-  overflow:hidden;
   box-sizing:border-box;
 }
 
+:root:not([style*="readium-noOverflow-on"]) body{
+  overflow:hidden;
+}
+
 @supports (overflow: clip){
 
-  :root{
+  :root:not([style*="readium-noOverflow-on"]){
      overflow:clip;
   }
 
-  body{
+  :root:not([style*="readium-noOverflow-on"]) body{
      overflow:clip;
      overflow-clip-margin:content-box;
   }
@@ -111,11 +114,11 @@ body{
 
 @supports (overflow: clip){
 
-  :root[style*="readium-scroll-on"]{
+  :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){
      overflow:auto;
   }
 
-  :root[style*="readium-scroll-on"] body{
+  :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
      overflow:clip;
   }
 }
diff --git a/css/dist/rtl/ReadiumCSS-after.css b/css/dist/rtl/ReadiumCSS-after.css
@@ -66,17 +66,20 @@ body{
   max-width:var(--RS__defaultLineLength) !important;
   padding:0 var(--RS__pageGutter) !important;
   margin:0 auto !important;
-  overflow:hidden;
   box-sizing:border-box;
 }
 
+:root:not([style*="readium-noOverflow-on"]) body{
+  overflow:hidden;
+}
+
 @supports (overflow: clip){
 
-   :root{
+   :root:not([style*="readium-noOverflow-on"]){
       overflow:clip;
    }
 
-   body{
+   :root:not([style*="readium-noOverflow-on"]) body{
       overflow:clip;
       overflow-clip-margin:content-box;
    }
@@ -94,18 +97,18 @@ body{
   min-height:0 !important;
 }
 
-:root[style*="readium-scroll-on"] body{
+:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
   max-width:var(--RS__defaultLineLength) !important;
   overflow:auto;
 }
 
 @supports (overflow: clip){
 
-  :root[style*="readium-scroll-on"]{
+  :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){
      overflow:auto;
   }
 
-  :root[style*="readium-scroll-on"] body{
+  :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
      overflow:clip;
   }
 }
diff --git a/css/src/modules/ReadiumCSS-pagination-vertical.css b/css/src/modules/ReadiumCSS-pagination-vertical.css
@@ -82,7 +82,6 @@
 }
 
 body {
-  overflow: hidden;
   width: 100%;
 
   /* Limit line-length but we have to reset when 2 columns and control the viewport.
@@ -98,12 +97,16 @@ body {
   padding: var(--RS__pageGutter) 0 !important;
 }
 
+:root:not(:--no-overflow) body {
+  overflow: hidden;
+}
+
 @supports (overflow: clip) {
-  :root {
+  :root:not(:--no-overflow) {
      overflow: clip;
   }
 
-  body {
+  :root:not(:--no-overflow) body {
      overflow: clip;
      overflow-clip-margin: content-box;
   }
diff --git a/css/src/modules/ReadiumCSS-pagination.css b/css/src/modules/ReadiumCSS-pagination.css
@@ -68,7 +68,6 @@
 }
 
 body {
-  overflow: hidden;
   width: 100%;
 
   /* Limit line-length but we have to reset when 2 columns and control the viewport.
@@ -84,12 +83,16 @@ body {
   padding: 0 var(--RS__pageGutter) !important;
 }
 
+:root:not(:--no-overflow) body {
+  overflow: hidden;
+}
+
 @supports (overflow: clip) {
-   :root {
+   :root:not(:--no-overflow) {
       overflow: clip;
    }
 
-   body {
+   :root:not(:--no-overflow) body {
       overflow: clip;
       overflow-clip-margin: content-box;
    }
diff --git a/css/src/modules/ReadiumCSS-scroll-vertical.css b/css/src/modules/ReadiumCSS-scroll-vertical.css
@@ -28,11 +28,11 @@
 }
 
 @supports (overflow: clip) {
-  :root:--scroll-view {
+  :root:--scroll-view:not(:--no-overflow) {
      overflow: auto;
   }
 
-  :root:--scroll-view body {
+  :root:--scroll-view:not(:--no-overflow) body {
      overflow: clip;
   }
 }
diff --git a/css/src/modules/ReadiumCSS-scroll.css b/css/src/modules/ReadiumCSS-scroll.css
@@ -22,17 +22,17 @@
 }
 
 /* Make sure line-length is limited in all configs */
-:root:--scroll-view body {
+:root:--scroll-view:not(:--no-overflow) body {
   overflow: auto;
   max-width: var(--RS__defaultLineLength) !important;
 }
 
 @supports (overflow: clip) {
-  :root:--scroll-view {
+  :root:--scroll-view:not(:--no-overflow) {
      overflow: auto;
   }
 
-  :root:--scroll-view body {
+  :root:--scroll-view:not(:--no-overflow) body {
      overflow: clip;
   }
 }
diff --git a/docs/CSS19-api.md b/docs/CSS19-api.md
@@ -201,6 +201,18 @@ Scope: `html`
 
 Override class: None. It’s a flag meant for implementers’ convenience as it disables vertical-writing pagination so that they can implement theirs.
 
+* * *
+
+```
+:--no-overflow
+```
+
+Preset: `--RS__disableOverflow: readium-noOverflow-on`
+
+Scope: `html`
+
+Override class: None. It’s a flag meant for implementers’ convenience as it disables overflow so that they can implement theirs.
+
 * * * 
 
 ```
diff --git a/docs/CSS28-migration_guide.md b/docs/CSS28-migration_guide.md
@@ -204,4 +204,12 @@ That was a side-effect that could be surprising to implementers, and impacting t
 
 ## Removal of font-override flag
 
-Since version `2.0.0-beta.14`, ReadiumCSS no longer requires the font-override flag `--USER__fontOverride: readium-font-on` to be appended for font-related user settings (family, width, weight, optical-sizing, accessible fonts, etc.) to work. These settings are now applied as soon as they are set.
+Since version `2.0.0-beta.14`, ReadiumCSS no longer requires the font-override flag `--USER__fontOverride: readium-font-on` to be appended for font-related user settings (family, width, weight, optical-sizing, accessible fonts, etc.) to work. These settings are now applied as soon as they are set.
+
+## Addition of a flag to disable overflow
+
+Since version `2.0.0-beta.14`, ReadiumCSS provides a flag if you want to disable its default `overflow` styles on `:root` and `body`.
+
+This can be useful if you want to implement your own overflow handling as it is highly dependent on the platform and way the content is being progressed through.
+
+It is set to `--RS__disableOverflow: readium-noOverflow-on` by default.
diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml
@@ -188,6 +188,16 @@
 
       <hr/>
 
+      <pre><code>:--no-overflow</code></pre>
+
+      <p>Preset: <code>--RS__disableOverflow: readium-noOverflow-on</code></p>
+
+      <p>Scope: <code>html</code></p>
+
+      <p>Override class: None. It’s a flag meant for implementers’ convenience as it disables overflow so that they can implement theirs.</p>
+
+      <hr/>
+
       <pre><code>:--a11y-normalize</code></pre>
 
       <p>Preset: <code>--USER__a11yNormalize: readium-a11y-on</code></p>
diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-028.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-028.xhtml
@@ -248,6 +248,16 @@ const sepiaBackground = sepiaMode.sepiaMode.RS__backgroundColor;</code></pre>
 
       <p>Since version <code>2.0.0-beta.14</code>, ReadiumCSS no longer requires the font-override flag <code>--USER__fontOverride: readium-font-on</code> to be appended for font-related user settings (family, width, weight, optical-sizing, accessible fonts, etc.) to work. These settings are now applied as soon as they are set.</p>
     </section>
+
+    <section id="no-overflow-flag" class="level2">
+      <h2 id="sigil_toc_id_215">Addition of a flag to disable overflow</h2>
+
+      <p>Since version <code>2.0.0-beta.14</code>, ReadiumCSS provides a flag if you want to disable its default <code>overflow</code> styles on <code>:root</code> and <code>body</code>.</p>
+
+      <p>This can be useful if you want to implement your own overflow handling as it is highly dependent on the platform and way the content is being progressed through.</p>
+
+      <p>It is set to <code>--RS__disableOverflow: readium-noOverflow-on</code> by default.</p>
+    </section>
   </section>
 </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -66,17 +66,20 @@ body{`
`66`	`66`	`max-width:var(--RS__defaultLineLength) !important;`
`67`	`67`	`padding:0 var(--RS__pageGutter) !important;`
`68`	`68`	`margin:0 auto !important;`
`69`		`- overflow:hidden;`
`70`	`69`	`box-sizing:border-box;`
`71`	`70`	`}`
`72`	`71`
	`72`	`+:root:not([style*="readium-noOverflow-on"]) body{`
	`73`	`+ overflow:hidden;`
	`74`	`+}`
	`75`	`+`
`73`	`76`	`@supports (overflow: clip){`
`74`	`77`
`75`		`- :root{`
	`78`	`+ :root:not([style*="readium-noOverflow-on"]){`
`76`	`79`	`overflow:clip;`
`77`	`80`	`}`
`78`	`81`
`79`		`- body{`
	`82`	`+ :root:not([style*="readium-noOverflow-on"]) body{`
`80`	`83`	`overflow:clip;`
`81`	`84`	`overflow-clip-margin:content-box;`
`82`	`85`	`}`
`@@ -94,18 +97,18 @@ body{`
`94`	`97`	`min-height:0 !important;`
`95`	`98`	`}`
`96`	`99`
`97`		`-:root[style*="readium-scroll-on"] body{`
	`100`	`+:root[style="readium-scroll-on"]:not([style="readium-noOverflow-on"]) body{`
`98`	`101`	`max-width:var(--RS__defaultLineLength) !important;`
`99`	`102`	`overflow:auto;`
`100`	`103`	`}`
`101`	`104`
`102`	`105`	`@supports (overflow: clip){`
`103`	`106`
`104`		`- :root[style*="readium-scroll-on"]{`
	`107`	`+ :root[style="readium-scroll-on"]:not([style="readium-noOverflow-on"]){`
`105`	`108`	`overflow:auto;`
`106`	`109`	`}`
`107`	`110`
`108`		`- :root[style*="readium-scroll-on"] body{`
	`111`	`+ :root[style="readium-scroll-on"]:not([style="readium-noOverflow-on"]) body{`
`109`	`112`	`overflow:clip;`
`110`	`113`	`}`
`111`	`114`	`}`
Original file line number	Diff line number	Diff line change
`@@ -77,17 +77,20 @@ body{`
`77`	`77`	`max-height:var(--RS__defaultLineLength) !important;`
`78`	`78`	`padding:var(--RS__pageGutter) 0 !important;`
`79`	`79`	`margin:auto 0 !important;`
`80`		`- overflow:hidden;`
`81`	`80`	`box-sizing:border-box;`
`82`	`81`	`}`
`83`	`82`
	`83`	`+:root:not([style*="readium-noOverflow-on"]) body{`
	`84`	`+ overflow:hidden;`
	`85`	`+}`
	`86`	`+`
`84`	`87`	`@supports (overflow: clip){`
`85`	`88`
`86`		`- :root{`
	`89`	`+ :root:not([style*="readium-noOverflow-on"]){`
`87`	`90`	`overflow:clip;`
`88`	`91`	`}`
`89`	`92`
`90`		`- body{`
	`93`	`+ :root:not([style*="readium-noOverflow-on"]) body{`
`91`	`94`	`overflow:clip;`
`92`	`95`	`overflow-clip-margin:content-box;`
`93`	`96`	`}`
`@@ -111,11 +114,11 @@ body{`
`111`	`114`
`112`	`115`	`@supports (overflow: clip){`
`113`	`116`
`114`		`- :root[style*="readium-scroll-on"]{`
	`117`	`+ :root[style="readium-scroll-on"]:not([style="readium-noOverflow-on"]){`
`115`	`118`	`overflow:auto;`
`116`	`119`	`}`
`117`	`120`
`118`		`- :root[style*="readium-scroll-on"] body{`
	`121`	`+ :root[style="readium-scroll-on"]:not([style="readium-noOverflow-on"]) body{`
`119`	`122`	`overflow:clip;`
`120`	`123`	`}`
`121`	`124`	`}`
Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,6 @@`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`body {`
`85`		`- overflow: hidden;`
`86`	`85`	`width: 100%;`
`87`	`86`
`88`	`87`	`/* Limit line-length but we have to reset when 2 columns and control the viewport.`
`@@ -98,12 +97,16 @@ body {`
`98`	`97`	`padding: var(--RS__pageGutter) 0 !important;`
`99`	`98`	`}`
`100`	`99`
	`100`	`+:root:not(:--no-overflow) body {`
	`101`	`+ overflow: hidden;`
	`102`	`+}`
	`103`	`+`
`101`	`104`	`@supports (overflow: clip) {`
`102`		`- :root {`
	`105`	`+ :root:not(:--no-overflow) {`
`103`	`106`	`overflow: clip;`
`104`	`107`	`}`
`105`	`108`
`106`		`- body {`
	`109`	`+ :root:not(:--no-overflow) body {`
`107`	`110`	`overflow: clip;`
`108`	`111`	`overflow-clip-margin: content-box;`
`109`	`112`	`}`
Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,6 @@`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`body {`
`71`		`- overflow: hidden;`
`72`	`71`	`width: 100%;`
`73`	`72`
`74`	`73`	`/* Limit line-length but we have to reset when 2 columns and control the viewport.`
`@@ -84,12 +83,16 @@ body {`
`84`	`83`	`padding: 0 var(--RS__pageGutter) !important;`
`85`	`84`	`}`
`86`	`85`
	`86`	`+:root:not(:--no-overflow) body {`
	`87`	`+ overflow: hidden;`
	`88`	`+}`
	`89`	`+`
`87`	`90`	`@supports (overflow: clip) {`
`88`		`- :root {`
	`91`	`+ :root:not(:--no-overflow) {`
`89`	`92`	`overflow: clip;`
`90`	`93`	`}`
`91`	`94`
`92`		`- body {`
	`95`	`+ :root:not(:--no-overflow) body {`
`93`	`96`	`overflow: clip;`
`94`	`97`	`overflow-clip-margin: content-box;`
`95`	`98`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,11 +28,11 @@`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`@supports (overflow: clip) {`
`31`		`- :root:--scroll-view {`
	`31`	`+ :root:--scroll-view:not(:--no-overflow) {`
`32`	`32`	`overflow: auto;`
`33`	`33`	`}`
`34`	`34`
`35`		`- :root:--scroll-view body {`
	`35`	`+ :root:--scroll-view:not(:--no-overflow) body {`
`36`	`36`	`overflow: clip;`
`37`	`37`	`}`
`38`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,17 +22,17 @@`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`/* Make sure line-length is limited in all configs */`
`25`		`-:root:--scroll-view body {`
	`25`	`+:root:--scroll-view:not(:--no-overflow) body {`
`26`	`26`	`overflow: auto;`
`27`	`27`	`max-width: var(--RS__defaultLineLength) !important;`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`@supports (overflow: clip) {`
`31`		`- :root:--scroll-view {`
	`31`	`+ :root:--scroll-view:not(:--no-overflow) {`
`32`	`32`	`overflow: auto;`
`33`	`33`	`}`
`34`	`34`
`35`		`- :root:--scroll-view body {`
	`35`	`+ :root:--scroll-view:not(:--no-overflow) body {`
`36`	`36`	`overflow: clip;`
`37`	`37`	`}`
`38`	`38`	`}`