From 759a3b31a7cd08cad954f98e272da40ab988f9aa Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Thu, 20 Oct 2022 15:30:49 +0000
Subject: [PATCH] Fix vertical writing for Firefox

---
 README.md    |  2 +-
 paginator.js | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 85a4565..73a295e 100644
--- a/README.md
+++ b/README.md
@@ -134,7 +134,7 @@ It can parse and stringify spatial and temporal offsets, as well as text locatio
 
 ### Supported Browsers
 
-The main use of the library is for use in [Foliate](https://github.com/johnfactotum/foliate), which uses WebKitGTK. As such it's the only engine that has been tested extensively. But it should also work in Chromium and Firefox. Currently, one severe bug is that vertical writing is broken on Firefox.
+The main use of the library is for use in [Foliate](https://github.com/johnfactotum/foliate), which uses WebKitGTK. As such it's the only engine that has been tested extensively. But it should also work in Chromium and Firefox.
 
 Apart from the renderers, using the modules outside browsers is also possible. Most features depend on having the global objects `Blob`, `TextDecoder`, `TextEncoder`, `DOMParser`, `XMLSerializer`, and `URL`, and should work if you polyfill them. Note that `epubcfi.js` can be used as is in any envirnoment if you only need to parse or sort CFIs.
 
diff --git a/paginator.js b/paginator.js
index e1cb235..692b816 100644
--- a/paginator.js
+++ b/paginator.js
@@ -164,12 +164,18 @@ class View {
                 const doc = this.document
                 afterLoad?.(doc)
 
+                // it needs to be visible for Firefox to get computed style
+                this.#iframe.style.display = 'block'
                 const { vertical, rtl } = getDirection(doc)
+                this.#iframe.style.display = 'none'
+
                 this.#vertical = vertical
                 this.#rtl = rtl
 
                 this.#contentRange.selectNodeContents(doc.body)
-                this.render(beforeRender?.({ vertical, rtl }))
+                const layout = beforeRender?.({ vertical, rtl })
+                this.#iframe.style.display = 'block'
+                this.render(layout)
                 new ResizeObserver(() => this.expand()).observe(doc.body)
 
                 resolve()
@@ -185,7 +191,6 @@ class View {
     }
     scrolled({ gap, columnWidth }) {
         const vertical = this.#vertical
-        this.#iframe.style.display = 'block'
         const doc = this.document
         Object.assign(doc.documentElement.style, {
             boxSizing: 'border-box',
@@ -204,7 +209,6 @@ class View {
     columnize({ width, height, margin, gap, columnWidth }) {
         const vertical = this.#vertical
         this.#size = vertical ? height : width
-        this.#iframe.style.display = 'block'
 
         const doc = this.document
         const gapPadding = `${gap / 2}px`