From b8049952bfdafa6563cfc32a1087b30815c2a773 Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Tue, 21 Feb 2023 07:51:34 +0000
Subject: [PATCH] Fix page breaks

Replace `page-break-*` with `-webkit-column-break-*`.

See https://github.com/johnfactotum/foliate/issues/962#issuecomment-1437982082
---
 epub.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/epub.js b/epub.js
index b3a2804..72d0eb1 100644
--- a/epub.js
+++ b/epub.js
@@ -572,10 +572,15 @@ class Loader {
                 .then(url => `@import "${url}"`))
         const w = window?.innerWidth ?? 800
         const h = window?.innerHeight ?? 600
-        const replacedVwVh = replacedImports
-            .replace(/(\d*\.?\d+)vw/g, (_, d) => parseFloat(d) * w / 100 + 'px')
-            .replace(/(\d*\.?\d+)vh/g, (_, d) => parseFloat(d) * h / 100 + 'px')
-        return replacedVwVh.replaceAll('-epub-', '')
+        return replacedImports
+            // unprefix as most of the props are (only) supported unprefixed
+            .replace(/-epub-/gi, '')
+            // replace vw and vh as they cause problems with layout
+            .replace(/(\d*\.?\d+)vw/gi, (_, d) => parseFloat(d) * w / 100 + 'px')
+            .replace(/(\d*\.?\d+)vh/gi, (_, d) => parseFloat(d) * h / 100 + 'px')
+            // `page-break-*` unsupported in columns; replace with `column-break-*`
+            .replace(/page-break-(after|before|inside)/gi, (_, x) =>
+                `-webkit-column-break-${x}`)
     }
     // find & replace all possible relative paths for all assets without parsing
     replaceString(str, href, parents = []) {