Fix vertical writing for Firefox

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.
 

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`