@readium/navigator 2.5.0-beta.1 → 2.5.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.5.0-beta.1",
+  "version": "2.5.0-beta.3",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -50,7 +50,7 @@
     "generate:css-selector": "node scripts/generate-css-selector.js"
   },
   "devDependencies": {
-    "@readium/css": "^2.0.1",
+    "@readium/css": "^2.0.2",
     "@readium/navigator-html-injectables": "workspace:*",
     "@readium/shared": "workspace:*",
     "@types/path-browserify": "^1.0.3",

package/src/epub/EpubNavigator.ts

@@ -19,7 +19,7 @@ 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";
+import { getScriptMode } from "../helpers/scriptMode.ts";
 
 export type ManagerEventKey = "zoom";
 
@@ -115,9 +115,11 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         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({ noVerticalPagination: isCJKVertical || undefined }),
+            rsProperties: new RSProperties({ noVerticalPagination: isVertical || undefined }),
             userProperties: new UserProperties({}),
             lineLengths: new LineLengths({
                 optimalChars: this._settings.optimalLineLength,
@@ -133,7 +135,8 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             //    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);
@@ -209,9 +212,10 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         if (layout === Layout.scrolled)
             return Layout.scrolled;
 
-        // CJK vertical writing: force scroll mode so the ScrollSnapper is
-        // used and column-based pagination doesn't interfere.
-        if (getScriptMode(pub.metadata) === 'cjk-vertical')
+        // 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)
@@ -554,8 +558,9 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             return modules.filter((m) => FXLModules.includes(m));
         } else modules = modules.filter((m) => ReflowableModules.includes(m));
         
-        // CJK vertical: uses its own X-axis snapper, never column or scroll snappers
-        if (getScriptMode(this.pub.metadata) === 'cjk-vertical') {
+        // 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");
         }
 

package/src/epub/css/ReadiumCSS.ts

@@ -1,5 +1,5 @@
 import { LineLengths } from "../../helpers/index.ts";
-import { getContentWidth } from "../../helpers/dimensions.ts";
+import { getContentWidth, getContentHeight } from "../../helpers/dimensions.ts";
 import { EpubSettings } from "../preferences/EpubSettings.ts";
 import { IUserProperties, RSProperties, UserProperties } from "./Properties.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,13 @@ 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) {
+      return this.computeCJKVerticalLength(scale, ignoreCompensation);
+    }
+
     const isScroll = scroll ?? this.userProperties.view === "scroll";
 
     if (isScroll) {
@@ -235,6 +245,16 @@ export class ReadiumCSS {
     };
   }
 
+  private computeCJKVerticalLength(scale: number | null, ignoreCompensation: boolean | null) {
+    const w = Math.round(getContentWidth(this.containerParent) - this.constraint);
+    const h = Math.round(getContentHeight(this.containerParent));
+    const metrics = this.getCompensatedMetrics(scale, ignoreCompensation);
+    const effectiveLineLength = metrics.maximal !== null
+      ? Math.min(Math.round(metrics.maximal * metrics.zoomCompensation), h)
+      : h;
+    return { colCount: undefined, effectiveContainerWidth: w, effectiveLineLength };
+  }
+
   // This behaves as paginate where colCount = 1
   private computeScrollLength(scale: number | null, ignoreCompensation: boolean | null) {
     const constrainedWidth = Math.round(getContentWidth(this.containerParent) - (this.constraint));

package/src/epub/frame/FrameBlobBuilder.ts

@@ -1,6 +1,6 @@
 import { Link, MediaType, Publication, ReadingProgression } from "@readium/shared";
 import { Injector } from "../../injection/Injector.ts";
-import { getScriptMode } from "../helpers/scriptMode.ts";
+import { getScriptMode } from "../../helpers/scriptMode.ts";
 
 const csp = (domains: string[]) => {
     const d = domains.join(" ");

package/src/epub/index.ts

@@ -3,4 +3,3 @@ 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/helpers/dimensions.ts

@@ -11,3 +11,10 @@ export function getContentWidth(el: Element) {
   return el.clientWidth - paddingLeft - paddingRight;
 }
 
+export function getContentHeight(el: Element) {
+  const cStyle = getComputedStyle(el);
+  const paddingTop = parseFloat(cStyle.paddingTop || "0");
+  const paddingBottom = parseFloat(cStyle.paddingBottom || "0");
+  return el.clientHeight - paddingTop - paddingBottom;
+}
+

package/src/helpers/index.ts

@@ -1,2 +1,3 @@
 export * from "./lineLength.ts";
 export * from './sML.ts';
+export * from './scriptMode.ts';

package/src/{epub/helpers → helpers}/scriptMode.ts

@@ -1,6 +1,6 @@
 import { Metadata, ReadingProgression } from "@readium/shared";
 
-export type ScriptMode = 'ltr' | 'rtl' | 'cjk-horizontal' | 'cjk-vertical';
+export type ScriptMode = 'ltr' | 'rtl' | 'cjk-horizontal' | 'cjk-vertical' | 'mongolian-vertical';
 
 /**
  * Derives the script mode from publication metadata.
@@ -14,6 +14,9 @@ export type ScriptMode = 'ltr' | 'rtl' | 'cjk-horizontal' | 'cjk-vertical';
  * - 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();
@@ -33,6 +36,10 @@ export function getScriptMode(metadata: Metadata): ScriptMode {
                 : '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') ||

package/src/injection/epubInjectables.ts

@@ -1,7 +1,7 @@
 import { IInjectableRule, IInjectable } from "../injection/Injectable.ts";
 import { stripJS, stripCSS } from "../helpers/minify.ts";
 import { Metadata, Layout, Link } from "@readium/shared";
-import { getScriptMode } from "../epub/helpers/scriptMode.ts";
+import { getScriptMode } from "../helpers/scriptMode.ts";
 
 import cssSelectorGeneratorContent from "../dom/_readium_cssSelectorGenerator.js?raw";
 import executionPreventionContent from "../dom/_readium_executionPrevention.js?raw";
@@ -86,7 +86,11 @@ export async function createReadiumEpubRules(metadata: Metadata, readingOrderIte
                 cssAfterRaw = after.default;
                 break;
             }
-            case 'cjk-vertical': {
+            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"),

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 "../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/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);
@@ -22,6 +24,7 @@ export declare class ReadiumCSS {
     private updateLayout;
     private getCompensatedMetrics;
     private paginate;
+    private computeCJKVerticalLength;
     private computeScrollLength;
     setContainerWidth(): void;
     resizeHandler(): void;

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

@@ -3,4 +3,3 @@ 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/types/src/helpers/dimensions.d.ts

@@ -5,3 +5,4 @@
  * @param el - The element to measure.
  */
 export declare function getContentWidth(el: Element): number;
+export declare function getContentHeight(el: Element): number;

package/types/src/helpers/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./lineLength.ts";
 export * from './sML.ts';
+export * from './scriptMode.ts';

package/types/src/{epub/helpers → helpers}/scriptMode.d.ts

@@ -1,5 +1,5 @@
 import { Metadata } from "@readium/shared";
-export type ScriptMode = 'ltr' | 'rtl' | 'cjk-horizontal' | 'cjk-vertical';
+export type ScriptMode = 'ltr' | 'rtl' | 'cjk-horizontal' | 'cjk-vertical' | 'mongolian-vertical';
 /**
  * Derives the script mode from publication metadata.
  *
@@ -12,5 +12,8 @@ export type ScriptMode = 'ltr' | 'rtl' | 'cjk-horizontal' | 'cjk-vertical';
  * - 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 declare function getScriptMode(metadata: Metadata): ScriptMode;