Skip to content

Commit 9c093e9

Browse files
mickael-menumickael-menu
authored
Fix broken pagination when an EPUB uses overflow-x: hidden (#294)
1 parent 30c7296 commit 9c093e9

File tree

5 files changed

+93
-4
lines changed

5 files changed

+93
-4
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ All notable changes to this project will be documented in this file. Take a look
9696
* The `onTap` event is not sent when an EPUB text selection is active anymore, to prevent showing the app bar while dismissing a selection.
9797
* [#76](https://github.com/readium/kotlin-toolkit/issues/76) Fixed EPUB fixed layout font size affected by device settings.
9898
* `Decoration` objects are now properly comparable with `equals()`.
99+
* [#292](https://github.com/readium/kotlin-toolkit/issues/292) Fix broken pagination when an EPUB uses `overflow-x: hidden`.
99100

100101

101102
## [2.2.1]

‎readium/navigator/src/main/java/org/readium/r2/navigator/epub/css/ReadiumCss.kt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,16 @@ internal data class ReadiumCss(
5757
// https://github.com/readium/r2-navigator-kotlin/issues/193
5858
add("<style>audio[controls] { width: revert; height: revert; }</style>")
5959

60+
// Fix broken pagination when a book contains `overflow-x: hidden`.
61+
// https://github.com/readium/kotlin-toolkit/issues/292
62+
// Inspired by https://github.com/readium/readium-css/issues/119#issuecomment-1302348238
63+
add("""
64+
<style>
65+
:root[style], :root { overflow: visible !important; }
66+
:root[style] > body, :root > body { overflow: visible !important; }
67+
</style>
68+
""".trimMargin())
69+
6070
if (!hasStyles) {
6171
add(stylesheetLink(stylesheetsFolder + "ReadiumCSS-default.css"))
6272
}

‎readium/navigator/src/test/java/org/readium/r2/navigator/epub/css/ReadiumCssTest.kt‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ class HtmlInjectionTest {
3131
<head>
3232
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
3333
<style>audio[controls] { width: revert; height: revert; }</style>
34+
<style>
35+
:root[style], :root { overflow: visible !important; }
36+
:root[style] > body, :root > body { overflow: visible !important; }
37+
</style>
3438
3539
<title>Publication</title>
3640
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -72,6 +76,10 @@ class HtmlInjectionTest {
7276
<head xmlns:xlink="http://www.w3.org/1999/xlink">
7377
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
7478
<style>audio[controls] { width: revert; height: revert; }</style>
79+
<style>
80+
:root[style], :root { overflow: visible !important; }
81+
:root[style] > body, :root > body { overflow: visible !important; }
82+
</style>
7583
7684
<title>Publication</title>
7785
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -111,6 +119,10 @@ class HtmlInjectionTest {
111119
<?xml version="1.0" encoding="utf-8"?><html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head xmlns:xlink="http://www.w3.org/1999/xlink">
112120
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
113121
<style>audio[controls] { width: revert; height: revert; }</style>
122+
<style>
123+
:root[style], :root { overflow: visible !important; }
124+
:root[style] > body, :root > body { overflow: visible !important; }
125+
</style>
114126
<title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/>
115127
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-after.css"/>
116128
</head><body dir="ltr" xmlns:xlink="http://www.w3.org/1999/xlink"></body></html>
@@ -138,6 +150,10 @@ class HtmlInjectionTest {
138150
<?xml version="1.0" encoding="utf-8"?><HTML dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><HEAD xmlns:xlink="http://www.w3.org/1999/xlink">
139151
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
140152
<style>audio[controls] { width: revert; height: revert; }</style>
153+
<style>
154+
:root[style], :root { overflow: visible !important; }
155+
:root[style] > body, :root > body { overflow: visible !important; }
156+
</style>
141157
<title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/>
142158
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-after.css"/>
143159
</HEAD><BODY dir="ltr" xmlns:xlink="http://www.w3.org/1999/xlink"></BODY></HTML>
@@ -167,6 +183,10 @@ class HtmlInjectionTest {
167183
<head>
168184
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
169185
<style>audio[controls] { width: revert; height: revert; }</style>
186+
<style>
187+
:root[style], :root { overflow: visible !important; }
188+
:root[style] > body, :root > body { overflow: visible !important; }
189+
</style>
170190
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-default.css"/>
171191
172192
<title>Publication</title>
@@ -265,6 +285,10 @@ class HtmlInjectionTest {
265285
<head>
266286
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/rtl/ReadiumCSS-before.css"/>
267287
<style>audio[controls] { width: revert; height: revert; }</style>
288+
<style>
289+
:root[style], :root { overflow: visible !important; }
290+
:root[style] > body, :root > body { overflow: visible !important; }
291+
</style>
268292
269293
<title>Publication</title>
270294
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -306,6 +330,10 @@ class HtmlInjectionTest {
306330
<head>
307331
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/cjk-horizontal/ReadiumCSS-before.css"/>
308332
<style>audio[controls] { width: revert; height: revert; }</style>
333+
<style>
334+
:root[style], :root { overflow: visible !important; }
335+
:root[style] > body, :root > body { overflow: visible !important; }
336+
</style>
309337
310338
<title>Publication</title>
311339
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -348,6 +376,10 @@ class HtmlInjectionTest {
348376
<head>
349377
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/cjk-vertical/ReadiumCSS-before.css"/>
350378
<style>audio[controls] { width: revert; height: revert; }</style>
379+
<style>
380+
:root[style], :root { overflow: visible !important; }
381+
:root[style] > body, :root > body { overflow: visible !important; }
382+
</style>
351383
352384
<title>Publication</title>
353385
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -389,6 +421,10 @@ class HtmlInjectionTest {
389421
<head>
390422
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
391423
<style>audio[controls] { width: revert; height: revert; }</style>
424+
<style>
425+
:root[style], :root { overflow: visible !important; }
426+
:root[style] > body, :root > body { overflow: visible !important; }
427+
</style>
392428
393429
<title>Publication</title>
394430
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -430,6 +466,10 @@ class HtmlInjectionTest {
430466
<head>
431467
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
432468
<style>audio[controls] { width: revert; height: revert; }</style>
469+
<style>
470+
:root[style], :root { overflow: visible !important; }
471+
:root[style] > body, :root > body { overflow: visible !important; }
472+
</style>
433473
434474
<title>Publication</title>
435475
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -471,6 +511,10 @@ class HtmlInjectionTest {
471511
<head>
472512
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
473513
<style>audio[controls] { width: revert; height: revert; }</style>
514+
<style>
515+
:root[style], :root { overflow: visible !important; }
516+
:root[style] > body, :root > body { overflow: visible !important; }
517+
</style>
474518
475519
<title>Publication</title>
476520
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -512,6 +556,10 @@ class HtmlInjectionTest {
512556
<head>
513557
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
514558
<style>audio[controls] { width: revert; height: revert; }</style>
559+
<style>
560+
:root[style], :root { overflow: visible !important; }
561+
:root[style] > body, :root > body { overflow: visible !important; }
562+
</style>
515563
516564
<title>Publication</title>
517565
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -558,6 +606,10 @@ class HtmlInjectionTest {
558606
<head>
559607
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
560608
<style>audio[controls] { width: revert; height: revert; }</style>
609+
<style>
610+
:root[style], :root { overflow: visible !important; }
611+
:root[style] > body, :root > body { overflow: visible !important; }
612+
</style>
561613
562614
<title>Publication</title>
563615
<link rel="stylesheet" href="style.css" type="text/css"/>
@@ -604,6 +656,10 @@ class HtmlInjectionTest {
604656
<head>
605657
<link rel="stylesheet" type="text/css" href="/assets/readium/readium-css/ReadiumCSS-before.css"/>
606658
<style>audio[controls] { width: revert; height: revert; }</style>
659+
<style>
660+
:root[style], :root { overflow: visible !important; }
661+
:root[style] > body, :root > body { overflow: visible !important; }
662+
</style>
607663
608664
<title>Publication</title>
609665
<link rel="stylesheet" href="style.css" type="text/css"/>

‎readium/streamer/src/main/java/org/readium/r2/streamer/fetcher/HtmlInjector.kt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,16 @@ internal class HtmlInjector(
8989
</style>
9090
""".trimIndent())
9191

92+
// Fix broken pagination when a book contains `overflow-x: hidden`.
93+
// https://github.com/readium/kotlin-toolkit/issues/292
94+
// Inspired by https://github.com/readium/readium-css/issues/119#issuecomment-1302348238
95+
beginIncludes.add("""
96+
<style>
97+
:root[style], :root { overflow: visible !important; }
98+
:root[style] > body, :root > body { overflow: visible !important; }
99+
</style>
100+
""".trimMargin())
101+
92102
endIncludes.add(getHtmlLink("/assets/readium-css/${layout.readiumCSSPath}ReadiumCSS-after.css"))
93103
endIncludes.add(getHtmlScript("/assets/scripts/readium-reflowable.js"))
94104

‎readium/streamer/src/test/java/org/readium/r2/streamer/fetcher/HtmlInjectorTest.kt‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ class HtmlInjectorTest {
2121
width: revert;
2222
height: revert;
2323
}
24-
</style>
24+
</style> <style>
25+
:root[style], :root { overflow: visible !important; }
26+
:root[style] > body, :root > body { overflow: visible !important; }
27+
</style>
2528
<title>Publication</title>
2629
<link rel="stylesheet" href="style.css" type="text/css"/>
2730
<link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
@@ -59,7 +62,10 @@ class HtmlInjectorTest {
5962
width: revert;
6063
height: revert;
6164
}
62-
</style>
65+
</style> <style>
66+
:root[style], :root { overflow: visible !important; }
67+
:root[style] > body, :root > body { overflow: visible !important; }
68+
</style>
6369
<title>Publication</title>
6470
<link rel="stylesheet" href="style.css" type="text/css"/>
6571
<link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
@@ -95,7 +101,10 @@ class HtmlInjectorTest {
95101
width: revert;
96102
height: revert;
97103
}
98-
</style><title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
104+
</style> <style>
105+
:root[style], :root { overflow: visible !important; }
106+
:root[style] > body, :root > body { overflow: visible !important; }
107+
</style><title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
99108
<script type="text/javascript" src="/assets/scripts/readium-reflowable.js"></script>
100109
<style>@import url('https://fonts.googleapis.com/css?family=PT+Serif|Roboto|Source+Sans+Pro|Vollkorn');</style>
101110
<style type="text/css"> @font-face{font-family: "OpenDyslexic"; src:url("/assets/fonts/OpenDyslexic-Regular.otf") format('truetype');}</style>
@@ -121,7 +130,10 @@ class HtmlInjectorTest {
121130
width: revert;
122131
height: revert;
123132
}
124-
</style><title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
133+
</style> <style>
134+
:root[style], :root { overflow: visible !important; }
135+
:root[style] > body, :root > body { overflow: visible !important; }
136+
</style><title>Publication</title><link rel="stylesheet" href="style.css" type="text/css"/><link rel="stylesheet" type="text/css" href="/assets/readium-css/ReadiumCSS-after.css"/>
125137
<script type="text/javascript" src="/assets/scripts/readium-reflowable.js"></script>
126138
<style>@import url('https://fonts.googleapis.com/css?family=PT+Serif|Roboto|Source+Sans+Pro|Vollkorn');</style>
127139
<style type="text/css"> @font-face{font-family: "OpenDyslexic"; src:url("/assets/fonts/OpenDyslexic-Regular.otf") format('truetype');}</style>

0 commit comments

Comments
 (0)