@readium/navigator-html-injectables 2.4.0-beta.1 → 2.4.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator-html-injectables",
-  "version": "2.4.0-beta.1",
+  "version": "2.4.0-beta.2",
   "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",

package/src/helpers/document.ts

@@ -1,12 +1,18 @@
 import { ReadiumWindow } from "./dom.ts";
 
 export function isRTL(wnd: ReadiumWindow): boolean {
-    // Check body first (author-declared direction), then fall back to the
-    // root element where we inject dir="rtl" for RTL publications.
-    const dir = wnd.document.body.dir || wnd.document.documentElement.dir;
+    // Check documentElement first, then fall back to body.
+    const dir = wnd.document.documentElement.dir || wnd.document.body.dir;
     return dir.toLowerCase() === "rtl";
 }
 
+export function isVerticalLR(wnd: ReadiumWindow): boolean {
+    // Check documentElement first, then fall back to body.
+    const writingMode = wnd.getComputedStyle(wnd.document.documentElement).writingMode
+        || wnd.getComputedStyle(wnd.document.body).writingMode;
+    return writingMode === 'vertical-lr';
+}
+
 export function getColumnCountPerScreen(wnd: ReadiumWindow): number {
     return parseInt(
         wnd.getComputedStyle(

package/src/modules/snapper/CJKVerticalSnapper.ts

@@ -4,7 +4,7 @@ import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/
 import { ModuleName } from "../ModuleLibrary.ts";
 import { Snapper } from "./Snapper.ts";
 import { rangeFromLocator } from "../../helpers/locator.ts";
-import { forceWebkitRecalc } from "../../helpers/document.ts";
+import { forceWebkitRecalc, isVerticalLR } from "../../helpers/document.ts";
 import { PatternAnalyzer } from "../../protection/PatternAnalyzer.ts";
 import { SCROLL_PROTECTION_CONFIG } from "../../protection/config.ts";
 import { BaseSuspiciousActivityEvent } from "../Peripherals.ts";
@@ -54,6 +54,10 @@ export class CJKVerticalSnapper extends Snapper {
     private lastScrollLeft = 0;
     private isResizing = false;
     private resizeDebounce: number | null = null;
+    // true for writing-mode: vertical-lr (Traditional Mongolian).
+    // vertical-lr uses non-negative scrollLeft like LTR horizontal, so
+    // absolute position writes must be positive, not negative.
+    private verticalLR = false;
 
     private doc() {
         return this.wnd.document.scrollingElement as HTMLElement;
@@ -150,6 +154,7 @@ export class CJKVerticalSnapper extends Snapper {
         this.initialScrollHandled = false;
         this.lastScrollLeft = 0;
         this.isResizing = false;
+        this.verticalLR = isVerticalLR(wnd);
         if (this.resizeDebounce) {
             this.wnd.clearTimeout(this.resizeDebounce);
             this.resizeDebounce = null;
@@ -193,10 +198,13 @@ export class CJKVerticalSnapper extends Snapper {
         comms.register("force_webkit_recalc", CJKVerticalSnapper.moduleName, () => {
             forceWebkitRecalc(this.wnd);
             const current = this.doc().scrollLeft;
-            if (Math.abs(current) > 1) {
-                this.doc().scrollLeft = current < 0 ? current + 1 : current - 1;
+            // Nudge by ±1 then restore to force a style recalculation.
+            // vertical-lr: scrollLeft ≥ 0, nudge toward 0 when possible.
+            // vertical-rl: scrollLeft ≤ 0, nudge toward 0 when possible.
+            if (this.verticalLR) {
+                this.doc().scrollLeft = current > 1 ? current - 1 : current + 1;
             } else {
-                this.doc().scrollLeft = current < 0 ? current - 1 : current + 1;
+                this.doc().scrollLeft = current < -1 ? current + 1 : current - 1;
             }
             this.doc().scrollLeft = current;
         });
@@ -211,8 +219,10 @@ export class CJKVerticalSnapper extends Snapper {
                 return;
             }
             this.wnd.requestAnimationFrame(() => {
-                // position 0 = start (scrollLeft=0), position 1 = end (scrollLeft=-scrollable)
-                this.doc().scrollLeft = -(this.scrollable() * position);
+                // position 0 = start (scrollLeft=0), position 1 = end.
+                // vertical-lr: scrollLeft is positive; vertical-rl: negative.
+                const target = this.scrollable() * position;
+                this.doc().scrollLeft = this.verticalLR ? target : -target;
                 this.reportProgress();
                 deselect(this.wnd);
                 ack(true);
@@ -263,11 +273,12 @@ export class CJKVerticalSnapper extends Snapper {
             ack(true);
         });
 
-        // go_end = document end = left edge. Write -scrollable; browsers normalize
-        // the sign internally so this works regardless of their scrollLeft convention.
+        // go_end = document end.
+        // vertical-lr: scrollLeft = +scrollable (rightmost column).
+        // vertical-rl: scrollLeft = -scrollable (leftmost column).
         comms.register("go_end", CJKVerticalSnapper.moduleName, (_, ack) => {
             if (Math.abs(this.doc().scrollLeft) === this.scrollable()) return ack(false);
-            this.doc().scrollLeft = -this.scrollable();
+            this.doc().scrollLeft = this.verticalLR ? this.scrollable() : -this.scrollable();
             this.reportProgress();
             ack(true);
         });

package/src/modules/snapper/ColumnSnapper.ts

@@ -36,6 +36,7 @@ export class ColumnSnapper extends Snapper {
     private lastTurnTime: number = 0;
     private wnd!: ReadiumWindow;
     private comms!: Comms;
+    private rtl = false;
     private doc() { return this.wnd.document.scrollingElement as HTMLElement; }
     private scrollOffset() {
         // The reason we do this is because when the document is transformed (translate3d),
@@ -47,7 +48,7 @@ export class ColumnSnapper extends Snapper {
     }
 
     snapOffset(offset: number) {
-        const value = offset + (isRTL(this.wnd) ? -1 : 1);
+        const value = offset + (this.rtl ? -1 : 1);
         return value - (value % this.wnd.innerWidth);
     }
 
@@ -66,9 +67,8 @@ export class ColumnSnapper extends Snapper {
      * scrollLeft may be negative depending on the browser — Math.abs() normalizes it.
      */
     private normScroll(): number {
-        const rtl = isRTL(this.wnd);
         const raw = this.doc().scrollLeft || this.alreadyScrollLeft;
-        return rtl ? Math.abs(raw) : Math.max(0, this.wnd.scrollX > 0 ? this.wnd.scrollX : raw);
+        return this.rtl ? Math.abs(raw) : Math.max(0, this.wnd.scrollX > 0 ? this.wnd.scrollX : raw);
     }
 
     reportProgress() {
@@ -97,7 +97,7 @@ export class ColumnSnapper extends Snapper {
         // LTR: end is on the right → bounce-r. RTL: start is on the right (norm≈0),
         // end is on the left → bounce direction flips based on which boundary we're at.
         const atStart = this.normScroll() < 5;
-        const bounceClass = isRTL(this.wnd)
+        const bounceClass = this.rtl
             ? (atStart ? "readium-bounce-r" : "readium-bounce-l")
             : "readium-bounce-r";
         doc.classList.add(bounceClass);
@@ -125,7 +125,6 @@ export class ColumnSnapper extends Snapper {
 
     // Snaps the current offset to the page width.
     snapCurrentOffset(smooth=false, noprogress=false) {
-        const rtl = isRTL(this.wnd);
         const doc = this.doc();
         const columnCount = getColumnCountPerScreen(this.wnd);
         const maxScroll = this.cachedScrollWidth - this.wnd.innerWidth;
@@ -137,14 +136,14 @@ export class ColumnSnapper extends Snapper {
         // Forward drag: LTR = drag left (cdo > 0), RTL = drag right (cdo < 0).
         // Normalize so that positive = moving forward in reading order.
         const cdo = this.dragOffset();
-        const normalizedCdo = rtl ? -cdo : cdo;
+        const normalizedCdo = this.rtl ? -cdo : cdo;
         const hurdle = (this.wnd.innerWidth / 3) * (normalizedCdo > 0 ? 2 : 1);
 
         const snappedNorm = Math.min(maxScroll, Math.max(0, this.snapNormOffset(currentNorm + hurdle)));
 
         // Convert back to signed scrollLeft for the actual DOM write.
-        const so = rtl ? -snappedNorm : snappedNorm;
-        const currentScrollLeft = rtl ? -currentNorm : currentNorm;
+        const so = this.rtl ? -snappedNorm : snappedNorm;
+        const currentScrollLeft = this.rtl ? -currentNorm : currentNorm;
 
         const direction = so > currentScrollLeft ? "right" : "left";
         this.checkSuspiciousSnap(direction, Math.abs(so - currentScrollLeft));
@@ -227,12 +226,11 @@ export class ColumnSnapper extends Snapper {
         if(this.touchState === ScrollTouchState.MOVE) {
             // Get the horizontal drag distance
             const dragOffset = this.dragOffset();
-            const rtl = isRTL(this.wnd);
 
             // Normalize: distance from document start, forward drag is positive.
             const norm = this.normScroll();
             const maxScroll = this.cachedScrollWidth - this.wnd.innerWidth;
-            const normalizedDrag = rtl ? -dragOffset : dragOffset;
+            const normalizedDrag = this.rtl ? -dragOffset : dragOffset;
 
             if(this.cachedScrollWidth <= this.wnd.innerWidth) {
                 // Only a single page, meaning any swipe triggers next/prev
@@ -245,7 +243,7 @@ export class ColumnSnapper extends Snapper {
                 this.comms.send("no_less", undefined);
             } else if((maxScroll - norm) < 5 && normalizedDrag > 5) {
                 // At document end, tried to go forward
-                this.alreadyScrollLeft = rtl ? -maxScroll : maxScroll;
+                this.alreadyScrollLeft = this.rtl ? -maxScroll : maxScroll;
                 this.comms.send("no_more", undefined);
             }
 
@@ -279,8 +277,8 @@ export class ColumnSnapper extends Snapper {
 
         // For RTL, scrollLeft is in [-(scrollWidth - innerWidth), 0].
         // For LTR, scrollLeft is in [0, scrollWidth - innerWidth].
-        const minScrollLeft = isRTL(this.wnd) ? -(this.cachedScrollWidth - this.wnd.innerWidth) : 0;
-        const maxScrollLeft = isRTL(this.wnd) ? 0 : (this.cachedScrollWidth - this.wnd.innerWidth);
+        const minScrollLeft = this.rtl ? -(this.cachedScrollWidth - this.wnd.innerWidth) : 0;
+        const maxScrollLeft = this.rtl ? 0 : (this.cachedScrollWidth - this.wnd.innerWidth);
 
         if(newpos < minScrollLeft) {
             this.overscroll = newpos;
@@ -330,6 +328,7 @@ export class ColumnSnapper extends Snapper {
     mount(wnd: ReadiumWindow, comms: Comms): boolean {
         this.wnd = wnd;
         this.comms = comms;
+        this.rtl = isRTL(wnd);
         if(!super.mount(wnd, comms)) return false;
 
         wnd.navigator.epubReadingSystem && (wnd.navigator.epubReadingSystem.layoutStyle = "paginated");
@@ -451,7 +450,7 @@ export class ColumnSnapper extends Snapper {
                 this.cachedScrollWidth = this.doc().scrollWidth!;
                 const scrollable = this.cachedScrollWidth - wnd.innerWidth;
                 const norm = scrollable * position;
-                if (isRTL(wnd)) {
+                if (this.rtl) {
                     this.doc().scrollLeft = -this.snapNormOffset(norm);
                 } else {
                     this.doc().scrollLeft = this.snapOffset(norm);
@@ -469,7 +468,7 @@ export class ColumnSnapper extends Snapper {
                 return;
             }
             this.wnd.requestAnimationFrame(() => {
-                if (isRTL(wnd)) {
+                if (this.rtl) {
                     this.doc().scrollLeft = -this.snapNormOffset(element.getBoundingClientRect().left + wnd.scrollX);
                 } else {
                     this.doc().scrollLeft = this.snapOffset(element.getBoundingClientRect().left + wnd.scrollX);
@@ -504,7 +503,7 @@ export class ColumnSnapper extends Snapper {
                 return;
             }
             this.wnd.requestAnimationFrame(() => {
-                if (isRTL(wnd)) {
+                if (this.rtl) {
                     this.doc().scrollLeft = -this.snapNormOffset(r.getBoundingClientRect().left + wnd.scrollX);
                 } else {
                     this.doc().scrollLeft = this.snapOffset(r.getBoundingClientRect().left + wnd.scrollX);
@@ -519,7 +518,7 @@ export class ColumnSnapper extends Snapper {
             this.wnd.requestAnimationFrame(() => {
                 this.cachedScrollWidth = this.doc().scrollWidth!;
                 let snappedFinal: number;
-                if (isRTL(wnd)) {
+                if (this.rtl) {
                     // RTL: end is the leftmost position, using normalized snapping first
                     snappedFinal = -this.snapNormOffset(this.cachedScrollWidth - wnd.innerWidth);
                 } else {
@@ -548,7 +547,7 @@ export class ColumnSnapper extends Snapper {
             this.wnd.requestAnimationFrame(() => {
                 this.cachedScrollWidth = this.doc().scrollWidth!;
                 let change: boolean;
-                if (isRTL(wnd)) {
+                if (this.rtl) {
                     // RTL: go_prev = toward document start = decreasing norm = scrollLeft toward 0
                     change = rtlScrollToNorm(this.normScroll() - wnd.innerWidth);
                 } else {
@@ -567,7 +566,7 @@ export class ColumnSnapper extends Snapper {
             this.wnd.requestAnimationFrame(() => {
                 this.cachedScrollWidth = this.doc().scrollWidth!;
                 let change: boolean;
-                if (isRTL(wnd)) {
+                if (this.rtl) {
                     // RTL: go_next = toward document end = increasing norm = scrollLeft more negative
                     change = rtlScrollToNorm(this.normScroll() + wnd.innerWidth);
                 } else {

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

@@ -1,5 +1,6 @@
 import { ReadiumWindow } from "./dom.ts";
 export declare function isRTL(wnd: ReadiumWindow): boolean;
+export declare function isVerticalLR(wnd: ReadiumWindow): boolean;
 export declare function getColumnCountPerScreen(wnd: ReadiumWindow): number;
 /**
 * Returns the "content height" of an element, which is its clientHeight

package/types/src/modules/snapper/CJKVerticalSnapper.d.ts

@@ -46,6 +46,7 @@ export declare class CJKVerticalSnapper extends Snapper {
     private lastScrollLeft;
     private isResizing;
     private resizeDebounce;
+    private verticalLR;
     private doc;
     /** Total horizontally scrollable distance (magnitude). */
     private scrollable;

package/types/src/modules/snapper/ColumnSnapper.d.ts

@@ -19,6 +19,7 @@ export declare class ColumnSnapper extends Snapper {
     private lastTurnTime;
     private wnd;
     private comms;
+    private rtl;
     private doc;
     private scrollOffset;
     snapOffset(offset: number): number;