@readium/navigator 2.4.0 → 2.5.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.4.0",
+  "version": "2.5.0-beta.2",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",

package/src/audio/index.ts

@@ -1,3 +1,3 @@
 export * from './engine/index.ts';
 export * from './preferences/index.ts';
-export * from './AudioNavigator.ts';
+export * from './AudioNavigator.ts';

package/src/epub/EpubNavigator.ts

@@ -2,8 +2,7 @@ import { Layout, Link, Locator, Profile, Publication, ReadingProgression } from
 import { Configurable, ConfigurableSettings, LineLengths, ProgressionRange, VisualNavigator, VisualNavigatorViewport } from "../index.ts";
 import { FramePoolManager } from "./frame/FramePoolManager.ts";
 import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager.ts";
-import { CommsEventKey, ContextMenuEvent, FXLModules, KeyboardEventData, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables";
-import { BasicTextSelection, FrameClickEvent, SuspiciousActivityEvent } from "@readium/navigator-html-injectables";
+import { CommsEventKey, ContextMenuEvent, FXLModules, KeyboardEventData, ModuleLibrary, ModuleName, ReflowableModules, BasicTextSelection, FrameClickEvent, SuspiciousActivityEvent } from "@readium/navigator-html-injectables";
 import * as path from "path-browserify";
 import { FXLFrameManager } from "./fxl/FXLFrameManager.ts";
 import { FrameManager } from "./frame/FrameManager.ts";
@@ -16,10 +15,11 @@ import { RSProperties, UserProperties } from "./css/Properties.ts";
 import { getContentWidth } from "../helpers/dimensions.ts";
 import { Injector } from "../injection/Injector.ts";
 import { createReadiumEpubRules } from "../injection/epubInjectables.ts";
-import { IInjectablesConfig } from "../injection/Injectable.ts";
+import { IInjectableRule, IInjectablesConfig } from "../injection/Injectable.ts";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator.ts";
 import { NavigatorProtector, NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT } from "../protection/NavigatorProtector.ts";
 import { KeyboardPeripherals, NAVIGATOR_KEYBOARD_PERIPHERAL_EVENT } from "../peripherals/KeyboardPeripherals.ts";
+import { getScriptMode } from "./helpers/scriptMode.ts";
 
 export type ManagerEventKey = "zoom";
 
@@ -80,7 +80,9 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     private _settings: EpubSettings;
     private _css: ReadiumCSS;
     private _preferencesEditor: EpubPreferencesEditor | null = null;
-    private readonly _injector: Injector | null = null;
+    private _injector: Injector | null = null;
+    private readonly _readiumRulesPromise: Promise<IInjectableRule[]>;
+    private readonly _injectablesConfig: IInjectablesConfig;
     private readonly _contentProtection: IContentProtectionConfig;
     private readonly _keyboardPeripherals: IKeyboardPeripheralsConfig;
     private readonly _navigatorProtector: NavigatorProtector | null = null;
@@ -108,8 +110,16 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         this._preferences = new EpubPreferences(configuration.preferences);
         this._defaults = new EpubDefaults(configuration.defaults);
         this._settings = new EpubSettings(this._preferences, this._defaults);
+        // For CJK vertical, force --RS__disablePagination for the entire session.
+        // ReadiumCSS.update() never sets noVerticalPagination, so this persists.
+        const scriptMode = getScriptMode(pub.metadata);
+        const isCJKHorizontal = scriptMode === 'cjk-horizontal';
+        const isCJKVertical = scriptMode === 'cjk-vertical';
+        const isMongolianVertical = scriptMode === 'mongolian-vertical';
+        const isVertical = isCJKVertical || isMongolianVertical;
+        const isCJK = isCJKHorizontal || isCJKVertical;
         this._css = new ReadiumCSS({
-            rsProperties: new RSProperties({}),
+            rsProperties: new RSProperties({ noVerticalPagination: isVertical || undefined }),
             userProperties: new UserProperties({}),
             lineLengths: new LineLengths({
                 optimalChars: this._settings.optimalLineLength,
@@ -121,23 +131,24 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 fontFace: this._settings.fontFamily,
                 letterSpacing: this._settings.letterSpacing,
                 wordSpacing: this._settings.wordSpacing,
+                isCJK: isCJK,
             //    sample: this.pub.metadata.description
             }),
             container: container,
-            constraint: this._settings.constraint
+            constraint: this._settings.constraint,
+            isCJKVertical: isVertical
         });
 
         this._layout = EpubNavigator.determineLayout(pub, !!this._settings.scroll);
         this.currentProgression = pub.metadata.effectiveReadingProgression;
 
-        // Combine Readium rules with user-provided injectables
-        const readiumRules = createReadiumEpubRules(pub.metadata, pub.readingOrder.items);
-        const userConfig = configuration.injectables || { rules: [], allowedDomains: [] };
-
-        this._injector = new Injector({
-            rules: [...readiumRules, ...userConfig.rules],
-            allowedDomains: userConfig.allowedDomains
-        });
+        // Store user injectables config; Injector is created in load() once
+        // the async CSS rules promise has resolved.
+        this._injectablesConfig = configuration.injectables || { rules: [], allowedDomains: [] };
+        // Start loading Readium CSS rules asynchronously. The promise is
+        // awaited in load() before the Injector is created, ensuring the
+        // correct script-mode stylesheets are ready before the first frame.
+        this._readiumRulesPromise = createReadiumEpubRules(pub.metadata, pub.readingOrder.items);
 
         this._contentProtection = configuration.contentProtection || {};
 
@@ -201,6 +212,12 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         if (layout === Layout.scrolled)
             return Layout.scrolled;
 
+        // CJK/Mongolian vertical writing: force scroll mode so the
+        // CJKVerticalSnapper is used and column-based pagination doesn't interfere.
+        const sm = getScriptMode(pub.metadata);
+        if (sm === 'cjk-vertical' || sm === 'mongolian-vertical')
+            return Layout.scrolled;
+
         if (layout === Layout.reflowable && scroll)
             return Layout.scrolled;
 
@@ -210,6 +227,17 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     public async load() {
         if (!this.positions?.length)
             this.positions = await this.pub.positionsFromManifest();
+
+        // Build Injector now that async CSS loading has had time to resolve.
+        // (Started in the constructor, so this typically resolves immediately.)
+        if (!this._injector) {
+            const readiumRules = await this._readiumRulesPromise;
+            this._injector = new Injector({
+                rules: [...readiumRules, ...this._injectablesConfig.rules],
+                allowedDomains: this._injectablesConfig.allowedDomains
+            });
+        }
+
         if(this._layout === Layout.fixed) {
             this.framePool = new FXLFramePoolManager(
                 this.container,
@@ -312,6 +340,10 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     }
 
     private async commitCSS(css: ReadiumCSS) {
+        // framePool is only available after load() — guard against early calls
+        // from the ResizeObserver which is registered in the constructor.
+        if (!this.framePool) return;
+
         // Since we’re updating the CSS properties in injectables by removing
         // the existing properties that are not inside this object first,
         // then adding all from it, we don’t compare the previous properties here
@@ -341,6 +373,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
 
         if (this._layout === Layout.fixed) {
             this.container.style.width = `${ getContentWidth(parentEl) - this._settings.constraint }px`;
+            if (!this.framePool) return;
             (this.framePool as FXLFramePoolManager).resizeHandler();
         } else {
             // for reflow ReadiumCSS gets the width from columns + line-lengths
@@ -371,7 +404,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
      * TODO remove when settings management is incorporated
      */
     public get _cframes(): (FXLFrameManager | FrameManager | undefined)[] {
-        return this.framePool.currentFrames;
+        return (this.framePool?.currentFrames ?? []).filter(f => !(f instanceof FrameManager && f.isDestroyed));
     }
 
     /**
@@ -524,12 +557,19 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         if(this._layout === Layout.fixed) {
             return modules.filter((m) => FXLModules.includes(m));
         } else modules = modules.filter((m) => ReflowableModules.includes(m));
+        
+        // CJK/Mongolian vertical: uses the X-axis snapper, never column or scroll snappers
+        const mode = getScriptMode(this.pub.metadata);
+        if (mode === 'cjk-vertical' || mode === 'mongolian-vertical') {
+            return modules.filter((m) => m !== "column_snapper" && m !== "scroll_snapper");
+        }
 
         // Horizontal vs. Vertical reading
+        const all = modules as ModuleName[];
         if (this._layout === Layout.scrolled)
-            modules = modules.filter((m) => m !== "column_snapper");
+            modules = all.filter((m) => m !== "column_snapper" && m !== "cjk_vertical_snapper");
         else
-            modules = modules.filter((m) => m !== "scroll_snapper");
+            modules = all.filter((m) => m !== "scroll_snapper" && m !== "cjk_vertical_snapper");
 
         return modules;
     }
@@ -655,21 +695,19 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         let first = this.currentLocation;
         let last = undefined;
 
-        // Find the last locator with a progression that's
-        // smaller than or equal to the requested progression.
-        potentialPositions.some((p, idx) => {
+        // Find the last locator whose progression is <= fromProgression.start.
+        // potentialPositions is ordered by progression ascending (0 → 1).
+        const idx = potentialPositions.findLastIndex((p) => {
             const pr = p.locations.progression ?? 0;
-            if (fromProgression.start <= pr) {
-                first = p;
+            return pr <= fromProgression.start;
+        });
 
-                // If there’s a match, check the last in view, from the next progression
-                const nextPositions = potentialPositions.splice(idx + 1, potentialPositions.length);
-                last = this.findLastPositionInProgressionRange(nextPositions, fromProgression);
+        if (idx !== -1) {
+            first = potentialPositions[idx];
+            const nextPositions = potentialPositions.slice(idx + 1);
+            last = this.findLastPositionInProgressionRange(nextPositions, fromProgression);
+        }
 
-                return true;
-            }
-            else return false;
-        });
         return { first: first, last: last }
     }
 
@@ -749,9 +787,11 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     }
 
     get viewport(): VisualNavigatorViewport {
-        return this._layout === Layout.fixed
-            ? (this.framePool as FXLFramePoolManager).viewport
-            : this.reflowViewport;
+        if (this._layout === Layout.fixed) {
+            if (!this.framePool) return { readingOrder: [], progressions: new Map(), positions: null };
+            return (this.framePool as FXLFramePoolManager).viewport;
+        }
+        return this.reflowViewport;
     }
 
     get isScrollStart(): boolean {

package/src/epub/css/ReadiumCSS.ts

@@ -9,6 +9,7 @@ export interface IReadiumCSS {
   lineLengths: LineLengths;
   container: HTMLElement;
   constraint: number;
+  isCJKVertical?: boolean;
 }
 
 export class ReadiumCSS {
@@ -18,6 +19,7 @@ export class ReadiumCSS {
   container: HTMLElement;
   containerParent: HTMLElement;
   constraint: number;
+  private readonly isCJKVertical: boolean;
   private cachedColCount: number | null | undefined;
   private effectiveContainerWidth: number;
 
@@ -28,6 +30,7 @@ export class ReadiumCSS {
     this.container = props.container;
     this.containerParent = props.container.parentElement || document.documentElement;
     this.constraint = props.constraint;
+    this.isCJKVertical = props.isCJKVertical ?? false;
     this.cachedColCount = props.userProperties.colCount;
     this.effectiveContainerWidth = getContentWidth(this.containerParent);
   }
@@ -131,6 +134,14 @@ export class ReadiumCSS {
   }
 
   private updateLayout(scale: number | null, ignoreCompensation: boolean | null, scroll: boolean | null, colCount?: number | null) {
+    // CJK vertical text flows along the block axis (height); the inline axis
+    // (width) must not be constrained by line-length at all — use the full
+    // parent width minus the known constraint.
+    if (this.isCJKVertical) {
+      const w = Math.round(getContentWidth(this.containerParent) - this.constraint);
+      return { colCount: undefined, effectiveContainerWidth: w, effectiveLineLength: w };
+    }
+
     const isScroll = scroll ?? this.userProperties.view === "scroll";
 
     if (isScroll) {

package/src/epub/frame/FrameBlobBuilder.ts

@@ -1,5 +1,6 @@
-import { Link, MediaType, Publication } from "@readium/shared";
+import { Link, MediaType, Publication, ReadingProgression } from "@readium/shared";
 import { Injector } from "../../injection/Injector.ts";
+import { getScriptMode } from "../helpers/scriptMode.ts";
 
 const csp = (domains: string[]) => {
     const d = domains.join(" ");
@@ -136,37 +137,37 @@ export default class FrameBlobBuider {
             if (mediaType === MediaType.XHTML) {
                 // InDesign is infamous for setting xml:lang on the body instead of the root element
                 // So we have to check whether lang is set on the body and move it to the root element
-                const rootLang = document.documentElement.lang || document.documentElement.getAttribute("xml:lang");
-                const bodyLang = document.body.lang || document.body.getAttribute("xml:lang");
+                const rootLang = doc.documentElement.lang || doc.documentElement.getAttribute("xml:lang");
+                const bodyLang = doc.body.lang || doc.body.getAttribute("xml:lang");
                 if (bodyLang && !rootLang) {
-                    document.documentElement.lang = bodyLang;
-                    document.documentElement.setAttribute("xml:lang", bodyLang);
-                    document.body.removeAttribute("xml:lang");
-                    document.body.removeAttribute("lang");
+                    doc.documentElement.lang = bodyLang;
+                    doc.documentElement.setAttribute("xml:lang", bodyLang);
+                    doc.body.removeAttribute("xml:lang");
+                    doc.body.removeAttribute("lang");
                 } else if (!rootLang) {
-                    document.documentElement.lang = primaryLanguage;
-                    document.documentElement.setAttribute("xml:lang", primaryLanguage);
+                    doc.documentElement.lang = primaryLanguage;
+                    doc.documentElement.setAttribute("xml:lang", primaryLanguage);
                 }
             } else if (
                 mediaType === MediaType.HTML &&
-                !document.documentElement.lang
+                !doc.documentElement.lang
             ) {
-                document.documentElement.lang = primaryLanguage;
+                doc.documentElement.lang = primaryLanguage;
             }
         }
 
-        // We need to ensure that dir is set on the root element if rtl
-        // Since body can bubble up, we also need to check it’s not here.
-        // https://github.com/readium/readium-css/blob/develop/docs/CSS03-injection_and_pagination.md#be-cautious-the-direction-propagates
-
-        // TODO: ReadiumCSS stylesheets are injected as LTR/default no matter what so disabled ATM
-        /* if (
-            !document.documentElement.dir &&
-            !document.body.dir &&
-            this.pub.metadata.effectiveReadingProgression === ReadingProgression.rtl
+        // Set dir="rtl" on the root element for RTL publications if the author
+        // has not already declared a direction on html or body.
+        // See: https://github.com/readium/readium-css/blob/develop/docs/CSS03-injection_and_pagination.md#be-cautious-the-direction-propagates
+        // CJK modes must NEVER receive a dir attribute — writing-mode handles
+        // directionality visually, and dir="rtl" would break vertical layout.
+        const scriptMode = getScriptMode(this.pub.metadata);
+        if (scriptMode === "rtl" &&
+            !doc.documentElement.dir &&
+            !doc.body.dir
         ) {
-            document.documentElement.dir = this.pub.metadata.effectiveReadingProgression;
-        } */
+            doc.documentElement.dir = ReadingProgression.rtl;
+        }
 
         if (base !== undefined) {
             // Set all URL bases. Very convenient!

package/src/epub/frame/FrameManager.ts

@@ -173,6 +173,10 @@ export class FrameManager {
         return this.frame.getBoundingClientRect();
     }
 
+    get isDestroyed() {
+        return this.destroyed;
+    }
+
     get window() {
         if(this.destroyed || !this.frame.contentWindow) throw Error("Trying to use frame window when it doesn't exist");
         return this.frame.contentWindow;

package/src/epub/fxl/FXLFramePoolManager.ts

@@ -633,7 +633,11 @@ export class FXLFramePoolManager {
             progressions: new Map(),
             positions: null
         };
-        const currentSpread = this.spreader.currentSpread(this.currentSlide, this.perPage);
+        // Mirror currentFrames: for single-page mode use currentSlide directly,
+        // otherwise use the spreader (which indexes by spread, not by item).
+        const currentSpread = this.perPage < 2
+            ? [this.pub.readingOrder.items[this.currentSlide]]
+            : this.spreader.currentSpread(this.currentSlide, this.perPage);
         currentSpread.forEach(link => {
             viewport.readingOrder.push(link.href);
             viewport.progressions.set(link.href, { start: 0, end: 1 }); // FXL always uses [0,1] progression

package/src/epub/helpers/scriptMode.ts

@@ -0,0 +1,52 @@
+import { Metadata, ReadingProgression } from "@readium/shared";
+
+export type ScriptMode = 'ltr' | 'rtl' | 'cjk-horizontal' | 'cjk-vertical' | 'mongolian-vertical';
+
+/**
+ * Derives the script mode from publication metadata.
+ *
+ * Rules:
+ * - Only the first language in the array is used. A Latin book containing
+ *   some Japanese is still Latin.
+ * - For CJK (zh/ja/ko): both language AND explicit reading progression are
+ *   required. CJK vertical = explicit rtl + CJK language. CJK horizontal =
+ *   CJK language with ltr or unset progression.
+ * - For RTL (ar/fa/he): language wins. If the primary language is a RTL
+ *   script, RTL mode is applied regardless of the explicit progression
+ *   direction declared in the OPF.
+ * - For Mongolian (mn): Traditional Mongolian script (mn-Mong) uses
+ *   writing-mode: vertical-lr. Cyrillic Mongolian (mn-Cyrl) is standard LTR.
+ *   An explicit script subtag is required; bare `mn` defaults to LTR.
+ */
+export function getScriptMode(metadata: Metadata): ScriptMode {
+    const primaryLang = metadata.languages?.[0]?.toLowerCase();
+    // Use explicit readingProgression only — effectiveReadingProgression
+    // auto-detects from language, which would create circular logic here.
+    const progression = metadata.readingProgression;
+
+    if (primaryLang) {
+        const isCJK = primaryLang.startsWith('zh') ||
+                      primaryLang.startsWith('ja') ||
+                      primaryLang.startsWith('ko');
+        if (isCJK) {
+            // Vertical requires explicit rtl progression. If progression
+            // conflicts (e.g. ltr) we fall back to horizontal.
+            return progression === ReadingProgression.rtl
+                ? 'cjk-vertical'
+                : 'cjk-horizontal';
+        }
+
+        // Traditional Mongolian script (mn-Mong): writing-mode vertical-lr.
+        // Requires an explicit Mong script subtag; mn-Cyrl and bare mn stay LTR.
+        if (primaryLang.startsWith('mn-mong')) return 'mongolian-vertical';
+
+        // RTL: language is authoritative. ar/fa/he → rtl regardless of
+        // what the OPF says about page-progression-direction.
+        const isRTLScript = primaryLang.startsWith('ar') ||
+                            primaryLang.startsWith('fa') ||
+                            primaryLang.startsWith('he');
+        if (isRTLScript) return 'rtl';
+    }
+
+    return 'ltr';
+}

package/src/epub/index.ts

@@ -3,3 +3,4 @@ export * from "./frame/index.ts";
 export * from "./fxl/index.ts";
 export * from "./preferences/index.ts";
 export * from "./css/index.ts";
+export { getScriptMode, type ScriptMode } from "./helpers/scriptMode.ts";

package/src/injection/epubInjectables.ts

@@ -1,19 +1,18 @@
 import { IInjectableRule, IInjectable } from "../injection/Injectable.ts";
 import { stripJS, stripCSS } from "../helpers/minify.ts";
 import { Metadata, Layout, Link } from "@readium/shared";
-
-import readiumCSSAfter from "@readium/css/css/dist/ReadiumCSS-after.css?raw";
-import readiumCSSBefore from "@readium/css/css/dist/ReadiumCSS-before.css?raw";
-import readiumCSSDefault from "@readium/css/css/dist/ReadiumCSS-default.css?raw";
+import { getScriptMode } from "../epub/helpers/scriptMode.ts";
 
 import cssSelectorGeneratorContent from "../dom/_readium_cssSelectorGenerator.js?raw";
 import executionPreventionContent from "../dom/_readium_executionPrevention.js?raw";
 import onloadProxyContent from "../dom/_readium_executionCleanup.js?raw";
 
 /**
- * Creates injectable rules for EPUB content documents
+ * Creates injectable rules for EPUB content documents.
+ * Async so that script-specific Readium CSS stylesheets can be imported
+ * dynamically — only the variant that is actually needed is bundled.
  */
-export function createReadiumEpubRules(metadata: Metadata, readingOrderItems: Link[]): IInjectableRule[] {
+export async function createReadiumEpubRules(metadata: Metadata, readingOrderItems: Link[]): Promise<IInjectableRule[]> {
     const isFixedLayout = metadata.effectiveLayout === Layout.fixed;
 
     const htmlHrefs = readingOrderItems
@@ -57,12 +56,70 @@ export function createReadiumEpubRules(metadata: Metadata, readingOrderItems: Li
 
     // Only add Readium CSS for reflowable documents
     if (!isFixedLayout) {
+        const scriptMode = getScriptMode(metadata);
+
+        // Dynamically import only the CSS variant we need
+        let cssBeforeRaw: string;
+        let cssDefaultRaw: string;
+        let cssAfterRaw: string;
+
+        switch (scriptMode) {
+            case 'rtl': {
+                const [before, def, after] = await Promise.all([
+                    import("@readium/css/css/dist/rtl/ReadiumCSS-before.css?raw"),
+                    import("@readium/css/css/dist/rtl/ReadiumCSS-default.css?raw"),
+                    import("@readium/css/css/dist/rtl/ReadiumCSS-after.css?raw"),
+                ]);
+                cssBeforeRaw = before.default;
+                cssDefaultRaw = def.default;
+                cssAfterRaw = after.default;
+                break;
+            }
+            case 'cjk-horizontal': {
+                const [before, def, after] = await Promise.all([
+                    import("@readium/css/css/dist/cjk-horizontal/ReadiumCSS-before.css?raw"),
+                    import("@readium/css/css/dist/cjk-horizontal/ReadiumCSS-default.css?raw"),
+                    import("@readium/css/css/dist/cjk-horizontal/ReadiumCSS-after.css?raw"),
+                ]);
+                cssBeforeRaw = before.default;
+                cssDefaultRaw = def.default;
+                cssAfterRaw = after.default;
+                break;
+            }
+            case 'cjk-vertical':
+            // Traditional Mongolian (vertical-lr) uses the same Readium CSS
+            // layout as CJK vertical-rl — it is an outlier handled by the
+            // same stylesheet set per the Readium CSS spec.
+            case 'mongolian-vertical': {
+                const [before, def, after] = await Promise.all([
+                    import("@readium/css/css/dist/cjk-vertical/ReadiumCSS-before.css?raw"),
+                    import("@readium/css/css/dist/cjk-vertical/ReadiumCSS-default.css?raw"),
+                    import("@readium/css/css/dist/cjk-vertical/ReadiumCSS-after.css?raw"),
+                ]);
+                cssBeforeRaw = before.default;
+                cssDefaultRaw = def.default;
+                cssAfterRaw = after.default;
+                break;
+            }
+            default: {
+                const [before, def, after] = await Promise.all([
+                    import("@readium/css/css/dist/ReadiumCSS-before.css?raw"),
+                    import("@readium/css/css/dist/ReadiumCSS-default.css?raw"),
+                    import("@readium/css/css/dist/ReadiumCSS-after.css?raw"),
+                ]);
+                cssBeforeRaw = before.default;
+                cssDefaultRaw = def.default;
+                cssAfterRaw = after.default;
+                break;
+            }
+        }
+
         // Readium CSS Before - prepended for reflowable
         prependInjectables.unshift({
             id: "readium-css-before",
             as: "link",
             target: "head",
-            blob: new Blob([stripCSS(readiumCSSBefore)], { type: "text/css" }),
+            blob: new Blob([stripCSS(cssBeforeRaw)], { type: "text/css" }),
             rel: "stylesheet"
         });
 
@@ -73,7 +130,7 @@ export function createReadiumEpubRules(metadata: Metadata, readingOrderItems: Li
                 id: "readium-css-default",
                 as: "link",
                 target: "head",
-                blob: new Blob([stripCSS(readiumCSSDefault)], { type: "text/css" }),
+                blob: new Blob([stripCSS(cssDefaultRaw)], { type: "text/css" }),
                 rel: "stylesheet",
                 condition: (doc: Document) => !(doc.querySelector("link[rel='stylesheet']") || doc.querySelector("style") || doc.querySelector("[style]:not([style=''])"))
             },
@@ -82,10 +139,26 @@ export function createReadiumEpubRules(metadata: Metadata, readingOrderItems: Li
                 id: "readium-css-after",
                 as: "link",
                 target: "head",
-                blob: new Blob([stripCSS(readiumCSSAfter)], { type: "text/css" }),
+                blob: new Blob([stripCSS(cssAfterRaw)], { type: "text/css" }),
                 rel: "stylesheet"
             }
         );
+
+        // EBPAJ fonts polyfill — CJK only, when EBPAJ metadata is present
+        if (scriptMode === 'cjk-horizontal' || scriptMode === 'cjk-vertical') {
+            const isEBPAJ = metadata.description === "ebpaj-guide-1.0" ||
+                            metadata.otherMetadata?.["ebpaj:guide-version"] !== undefined;
+            if (isEBPAJ) {
+                const { default: ebpajRaw } = await import("@readium/css/css/dist/ReadiumCSS-ebpaj_fonts_patch.css?raw");
+                appendInjectables.push({
+                    id: "readium-css-ebpaj",
+                    as: "link",
+                    target: "head",
+                    blob: new Blob([stripCSS(ebpajRaw)], { type: "text/css" }),
+                    rel: "stylesheet"
+                });
+            }
+        }
     }
 
     return [

package/src/injection/webpubInjectables.ts

@@ -1,4 +1,4 @@
-import { IInjectableRule, IInjectable } from "../injection/Injectable";
+import { IInjectableRule, IInjectable } from "../injection/Injectable.ts";
 import { stripJS, stripCSS } from "../helpers/minify.ts";
 import { Link } from "@readium/shared";
 

package/src/webpub/WebPubNavigator.ts

@@ -2,11 +2,12 @@ import { Feature, Link, Locator, Publication, ReadingProgression, LocatorLocatio
 import { VisualNavigator, VisualNavigatorViewport, ProgressionRange } from "../Navigator.ts";
 import { Configurable } from "../preferences/Configurable.ts";
 import { WebPubFramePoolManager } from "./WebPubFramePoolManager.ts";
-import { BasicTextSelection, CommsEventKey, ContextMenuEvent, FrameClickEvent, KeyboardEventData, ModuleLibrary, ModuleName, SuspiciousActivityEvent, WebPubModules } from "@readium/navigator-html-injectables";
+import { BasicTextSelection, CommsEventKey, ContextMenuEvent, FrameClickEvent, KeyboardEventData, ModuleName, SuspiciousActivityEvent, WebPubModules } from "@readium/navigator-html-injectables";
 import * as path from "path-browserify";
 import { WebPubFrameManager } from "./WebPubFrameManager.ts";
 
 import { ManagerEventKey } from "../epub/EpubNavigator.ts";
+import { getScriptMode } from "../epub/helpers/scriptMode.ts";
 import { WebPubCSS } from "./css/WebPubCSS.ts";
 import { WebUserProperties, WebRSProperties } from "./css/Properties.ts";
 import { IWebPubPreferences, WebPubPreferences } from "./preferences/WebPubPreferences.ts";
@@ -367,10 +368,14 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
     }
 
     private determineModules(): ModuleName[] {
-        let modules = Array.from(ModuleLibrary.keys()) as ModuleName[];
+        const modules = WebPubModules.slice();
 
-        // For WebPub, use the predefined WebPubModules array and filter
-        return modules.filter((m) => WebPubModules.includes(m));
+        const mode = getScriptMode(this.pub.metadata);
+        if (mode === 'cjk-vertical' || mode === 'mongolian-vertical') {
+            return modules.map((m) => m === "webpub_snapper" ? "cjk_vertical_snapper" : m);
+        }
+
+        return modules;
     }
 
     private attachListener() {

package/types/src/epub/EpubNavigator.d.ts

@@ -2,8 +2,7 @@ import { Layout, Link, Locator, Publication, ReadingProgression } from "@readium
 import { Configurable, ConfigurableSettings, VisualNavigator, VisualNavigatorViewport } from "../index.ts";
 import { FramePoolManager } from "./frame/FramePoolManager.ts";
 import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager.ts";
-import { CommsEventKey, ContextMenuEvent, KeyboardEventData } from "@readium/navigator-html-injectables";
-import { BasicTextSelection, FrameClickEvent, SuspiciousActivityEvent } from "@readium/navigator-html-injectables";
+import { CommsEventKey, ContextMenuEvent, KeyboardEventData, BasicTextSelection, FrameClickEvent, SuspiciousActivityEvent } from "@readium/navigator-html-injectables";
 import { FXLFrameManager } from "./fxl/FXLFrameManager.ts";
 import { FrameManager } from "./frame/FrameManager.ts";
 import { IEpubPreferences, EpubPreferences } from "./preferences/EpubPreferences.ts";
@@ -50,7 +49,9 @@ export declare class EpubNavigator extends VisualNavigator implements Configurab
     private _settings;
     private _css;
     private _preferencesEditor;
-    private readonly _injector;
+    private _injector;
+    private readonly _readiumRulesPromise;
+    private readonly _injectablesConfig;
     private readonly _contentProtection;
     private readonly _keyboardPeripherals;
     private readonly _navigatorProtector;

package/types/src/epub/css/ReadiumCSS.d.ts

@@ -7,6 +7,7 @@ export interface IReadiumCSS {
     lineLengths: LineLengths;
     container: HTMLElement;
     constraint: number;
+    isCJKVertical?: boolean;
 }
 export declare class ReadiumCSS {
     rsProperties: RSProperties;
@@ -15,6 +16,7 @@ export declare class ReadiumCSS {
     container: HTMLElement;
     containerParent: HTMLElement;
     constraint: number;
+    private readonly isCJKVertical;
     private cachedColCount;
     private effectiveContainerWidth;
     constructor(props: IReadiumCSS);

package/types/src/epub/frame/FrameManager.d.ts

@@ -22,6 +22,7 @@ export declare class FrameManager {
     }): void;
     get iframe(): HTMLIFrameElement;
     get realSize(): DOMRect;
+    get isDestroyed(): boolean;
     get window(): Window;
     get atLeft(): boolean;
     get atRight(): boolean;