@readium/navigator 2.0.0-beta.9 → 2.1.0

package/src/epub/css/ReadiumCSS.ts

@@ -1,6 +1,5 @@
 import { LineLengths } from "../../helpers";
 import { getContentWidth } from "../../helpers/dimensions";
-import { LayoutStrategy } from "../../preferences";
 import { EpubSettings } from "../preferences/EpubSettings";
 import { IUserProperties, RSProperties, UserProperties } from "./Properties";
 
@@ -10,7 +9,6 @@ export interface IReadiumCSS {
   lineLengths: LineLengths;
   container: HTMLElement;
   constraint: number;
-  layoutStrategy?: LayoutStrategy | null;
 }
 
 export class ReadiumCSS {
@@ -20,7 +18,6 @@ export class ReadiumCSS {
   container: HTMLElement;
   containerParent: HTMLElement;
   constraint: number;
-  layoutStrategy: LayoutStrategy;
   private cachedColCount: number | null | undefined;
   private effectiveContainerWidth: number;
 
@@ -31,7 +28,6 @@ export class ReadiumCSS {
     this.container = props.container;
     this.containerParent = props.container.parentElement || document.documentElement;
     this.constraint = props.constraint;
-    this.layoutStrategy = props.layoutStrategy || LayoutStrategy.lineLength;
     this.cachedColCount = props.userProperties.colCount;
     this.effectiveContainerWidth = getContentWidth(this.containerParent);
   }
@@ -43,9 +39,6 @@ export class ReadiumCSS {
     if (settings.constraint !== this.constraint) 
       this.constraint = settings.constraint;
 
-    if (settings.layoutStrategy && settings.layoutStrategy !== this.layoutStrategy) 
-      this.layoutStrategy = settings.layoutStrategy;
-
     if (settings.pageGutter !== this.rsProperties.pageGutter)
       this.rsProperties.pageGutter = settings.pageGutter;
 
@@ -73,7 +66,7 @@ export class ReadiumCSS {
       maxChars: settings.maximalLineLength
     });
 
-    const layout = this.updateLayout(settings.fontSize, settings.deprecatedFontSize, settings.scroll, settings.columnCount);
+    const layout = this.updateLayout(settings.fontSize, settings.deprecatedFontSize || settings.iOSPatch, settings.scroll, settings.columnCount);
 
     if (layout?.effectiveContainerWidth)
       this.effectiveContainerWidth = layout?.effectiveContainerWidth;
@@ -103,6 +96,7 @@ export class ReadiumCSS {
       fontWidth: settings.fontWidth,
       invertFilter: settings.invertFilter,
       invertGaijiFilter: settings.invertGaijiFilter,
+      iOSPatch: settings.iOSPatch,
       iPadOSPatch: settings.iPadOSPatch,
       letterSpacing: settings.letterSpacing,
       ligatures: typeof settings.ligatures !== "boolean" 
@@ -132,23 +126,21 @@ export class ReadiumCSS {
     this.userProperties = new UserProperties(updated);
   }
 
-  private updateLayout(scale: number | null, deprecatedImplem: boolean | null, scroll: boolean | null, colCount?: number | null) {
+  private updateLayout(scale: number | null, ignoreCompensation: boolean | null, scroll: boolean | null, colCount?: number | null) {
     const isScroll = scroll ?? this.userProperties.view === "scroll";
 
     if (isScroll) {
-      return this.computeScrollLength(scale, deprecatedImplem);
+      return this.computeScrollLength(scale, ignoreCompensation);
     } else {
-      return this.paginate(scale, deprecatedImplem, colCount);
+      return this.paginate(scale, ignoreCompensation, colCount);
     }
   }
 
-  private getCompensatedMetrics(scale: number | null, deprecatedImplem: boolean | null) {
+  private getCompensatedMetrics(scale: number | null, ignoreCompensation: boolean | null) {
     const zoomFactor = scale || this.userProperties.fontSize || 1;
     const zoomCompensation = zoomFactor < 1 
-      ? this.layoutStrategy === LayoutStrategy.margin 
-        ? 1 / (zoomFactor + 0.003)
-        : 1 / zoomFactor
-      : deprecatedImplem 
+      ? 1 / zoomFactor
+      : ignoreCompensation 
         ? zoomFactor 
         : 1;
 
@@ -168,13 +160,18 @@ export class ReadiumCSS {
   // Note: Kept intentionally verbose for debugging
   // TODO: As scroll shows, the effective line-length
   // should be the same as uncompensated when scale >= 1
-  private paginate(scale: number | null, deprecatedImplem: boolean | null, colCount?: number | null) {
-    const constrainedWidth = Math.round(getContentWidth(this.containerParent) - (this.constraint));
-    const metrics = this.getCompensatedMetrics(scale, deprecatedImplem);
-    const zoomCompensation = metrics.zoomCompensation;
-    const optimal = metrics.optimal;
-    const minimal = metrics.minimal;
-    const maximal = metrics.maximal;
+  private paginate(scale: number | null, ignoreCompensation: boolean | null, colCount?: number | null) {
+    const constrainedWidth = Math.round(getContentWidth(this.containerParent) - this.constraint);
+    const metrics = this.getCompensatedMetrics(scale, ignoreCompensation);
+    const { zoomCompensation, optimal, minimal, maximal } = metrics;
+
+    // Helper function for single column width calculation
+    const getSingleColWidth = (): number => {
+      if (constrainedWidth >= optimal && maximal !== null) {
+        return Math.min(Math.round(maximal * zoomCompensation), constrainedWidth);
+      }
+      return constrainedWidth;
+    };
 
     let RCSSColCount = 1;
     let effectiveContainerWidth = constrainedWidth;
@@ -188,96 +185,43 @@ export class ReadiumCSS {
     }
     
     if (colCount === null) {
-      if (this.layoutStrategy === LayoutStrategy.margin) {
-        if (constrainedWidth >= optimal) {
-          RCSSColCount = Math.floor(constrainedWidth / optimal);
-          const requiredWidth = Math.round(RCSSColCount * (optimal * zoomCompensation));
-          effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
-        } else {
-          RCSSColCount = 1;
-          effectiveContainerWidth = constrainedWidth;
-        }
-      } else if (this.layoutStrategy === LayoutStrategy.lineLength) {
-        if (constrainedWidth < optimal || maximal === null) {
-          RCSSColCount = 1;
-          effectiveContainerWidth = constrainedWidth;
-        } else {
-          RCSSColCount = Math.floor(constrainedWidth / optimal);
-          const requiredWidth = Math.round(RCSSColCount * (maximal * zoomCompensation));
-          effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
-        }
-      } else if (this.layoutStrategy === LayoutStrategy.columns) {
-        if (constrainedWidth >= optimal) {
-          if (maximal === null) {
-            RCSSColCount = Math.floor(constrainedWidth / optimal);
-            effectiveContainerWidth = constrainedWidth;
-          } else {
-            RCSSColCount = Math.floor(constrainedWidth / (minimal || optimal));
-            const requiredWidth = Math.round((RCSSColCount * (optimal * zoomCompensation)));
-            effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
-          }
-        } else {
-          RCSSColCount = 1;
-          effectiveContainerWidth = constrainedWidth;
-        }
+      if (constrainedWidth >= optimal && maximal !== null) {
+        RCSSColCount = Math.floor(constrainedWidth / optimal);
+        const requiredWidth = Math.round(RCSSColCount * (maximal * zoomCompensation));
+        effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
+      } else {
+        effectiveContainerWidth = getSingleColWidth();
       }
     } else if (colCount > 1) {
       const minRequiredWidth = Math.round(colCount * (minimal !== null ? minimal : optimal));
     
       if (constrainedWidth >= minRequiredWidth) {
         RCSSColCount = colCount;
-        if (this.layoutStrategy === LayoutStrategy.margin) {
-          const requiredWidth = Math.round(RCSSColCount * (optimal * zoomCompensation));
+        if (maximal === null) {
+          effectiveContainerWidth = constrainedWidth
+        } else {
+          const requiredWidth = Math.round(RCSSColCount * (maximal * zoomCompensation));
           effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
-        } else if (
-          this.layoutStrategy === LayoutStrategy.lineLength ||
-          this.layoutStrategy === LayoutStrategy.columns
-        ) {
-          if (maximal === null) {
-            effectiveContainerWidth = constrainedWidth
-          } else {
-            const requiredWidth = Math.round(RCSSColCount * (maximal * zoomCompensation));
-            effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
-          }
-
-          if (this.layoutStrategy === LayoutStrategy.columns) {
-            console.error("Columns strategy is not compatible with a column count whose value is a number. Falling back to lineLength strategy.");
-          }
         }
       } else {
         if (minimal !== null && constrainedWidth < Math.round(colCount * minimal)) {
           RCSSColCount = Math.floor(constrainedWidth / minimal);
+          if (RCSSColCount <= 1) {
+            RCSSColCount = 1;
+            effectiveContainerWidth = getSingleColWidth();
+          } else {
+            const requiredWidth = Math.round(RCSSColCount * (optimal * zoomCompensation));
+            effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
+          }
         } else {
           RCSSColCount = colCount;
+          const requiredWidth = Math.round(RCSSColCount * (optimal * zoomCompensation));
+          effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
         }
-        const requiredWidth = Math.round((RCSSColCount * (optimal * zoomCompensation)));
-        effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
       }
     } else {
       RCSSColCount = 1;
-      
-      if (constrainedWidth >= optimal) {
-        if (this.layoutStrategy === LayoutStrategy.margin) {
-          const requiredWidth = Math.round(optimal * zoomCompensation);
-          effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
-        } else if (
-          this.layoutStrategy === LayoutStrategy.lineLength ||
-          this.layoutStrategy === LayoutStrategy.columns
-        ) {
-          if (maximal === null) {
-            effectiveContainerWidth = constrainedWidth
-          } else {
-            const requiredWidth = Math.round(maximal * zoomCompensation);
-            effectiveContainerWidth = Math.min(requiredWidth, constrainedWidth);
-          }
-          
-          if (this.layoutStrategy === LayoutStrategy.columns) {
-            console.error("Columns strategy is not compatible with a column count whose value is a number. Falling back to lineLength strategy.");
-          }
-        }
-      } else {
-        effectiveContainerWidth = constrainedWidth 
-      }
+      effectiveContainerWidth = getSingleColWidth();
     }
 
     return { 
@@ -288,9 +232,9 @@ export class ReadiumCSS {
   }
 
   // This behaves as paginate where colCount = 1
-  private computeScrollLength(scale: number | null, deprecatedImplem: boolean | null) {
+  private computeScrollLength(scale: number | null, ignoreCompensation: boolean | null) {
     const constrainedWidth = Math.round(getContentWidth(this.containerParent) - (this.constraint));
-    const metrics = this.getCompensatedMetrics(scale && (scale < 1 || deprecatedImplem) ? scale : 1, deprecatedImplem);
+    const metrics = this.getCompensatedMetrics(scale && (scale < 1 || ignoreCompensation) ? scale : 1, ignoreCompensation);
     const zoomCompensation = metrics.zoomCompensation;
     const optimal = metrics.optimal;
     const maximal = metrics.maximal;
@@ -299,22 +243,11 @@ export class ReadiumCSS {
     let effectiveContainerWidth = constrainedWidth;
     let effectiveLineLength = Math.round(optimal * zoomCompensation);
 
-    if (this.layoutStrategy === LayoutStrategy.margin) {
-      const computedWidth = Math.min(Math.round(optimal * zoomCompensation), constrainedWidth);
-      effectiveLineLength = deprecatedImplem ? computedWidth : Math.round(computedWidth * zoomCompensation);
-    } else if (
-      this.layoutStrategy === LayoutStrategy.lineLength ||
-      this.layoutStrategy === LayoutStrategy.columns
-    ) {
-      if (this.layoutStrategy === LayoutStrategy.columns) {
-        console.error("Columns strategy is not compatible with scroll. Falling back to lineLength strategy.");
-      }
-      if (maximal === null) {
-        effectiveLineLength = constrainedWidth;
-      } else {
-        const computedWidth = Math.min(Math.round(maximal * zoomCompensation), constrainedWidth);
-        effectiveLineLength = deprecatedImplem ? computedWidth : Math.round(computedWidth * zoomCompensation);
-      }
+    if (maximal === null) {
+      effectiveLineLength = constrainedWidth;
+    } else {
+      const computedWidth = Math.min(Math.round(maximal * zoomCompensation), constrainedWidth);
+      effectiveLineLength = ignoreCompensation ? computedWidth : Math.round(computedWidth * zoomCompensation);
     }
 
     return { 
@@ -329,7 +262,7 @@ export class ReadiumCSS {
   }
 
   resizeHandler() {
-    const pagination = this.updateLayout(this.userProperties.fontSize, this.userProperties.deprecatedFontSize, this.userProperties.view === "scroll", this.cachedColCount);
+    const pagination = this.updateLayout(this.userProperties.fontSize, this.userProperties.deprecatedFontSize || this.userProperties.iOSPatch, this.userProperties.view === "scroll", this.cachedColCount);
     this.userProperties.colCount = pagination.colCount;
     this.userProperties.lineLength = pagination.effectiveLineLength;
     this.effectiveContainerWidth = pagination.effectiveContainerWidth;

package/src/epub/frame/FrameManager.ts

@@ -1,6 +1,7 @@
 import { Loader, ModuleName } from "@readium/navigator-html-injectables";
 import { FrameComms } from "./FrameComms";
 import { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
+import { sML } from "../../helpers";
 
 
 export class FrameManager {
@@ -95,9 +96,14 @@ export class FrameManager {
                         this.frame.style.removeProperty("opacity");
                         this.frame.style.removeProperty("pointer-events");
                         this.hidden = false;
+
+                        if (sML.UA.WebKit) {
+                            this.comms?.send("force_webkit_recalc", undefined);
+                        }
+
                         res();
                     }
-                    if(atProgress && atProgress > 0) {
+                    if(atProgress !== undefined) {
                         this.comms?.send("go_progression", atProgress, remove);
                     } else {
                         remove();

package/src/epub/frame/FramePoolManager.ts

@@ -155,9 +155,8 @@ export class FramePoolManager {
                     await newFrame.load(modules); // In order to ensure modules match the latest configuration
 
                 // Update progression if necessary and show the new frame
-                const hasProgression = (locator?.locations?.progression ?? 0) > 0;
                 if(newFrame) // If user is speeding through the publication, this can get destroyed
-                    await newFrame.show(hasProgression ? locator.locations.progression! : undefined); // Show/activate new frame
+                    await newFrame.show(locator.locations.progression); // Show/activate new frame
 
                 this._currentFrame = newFrame;
             }

package/src/epub/fxl/FXLFramePoolManager.ts

@@ -1,10 +1,11 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
-import { Locator, Publication, ReadingProgression, Orientation, Page, Link, Spread } from "@readium/shared";
+import { Locator, Publication, ReadingProgression, Page, Link } from "@readium/shared";
 import { FrameCommsListener } from "../frame";
 import FrameBlobBuider from "../frame/FrameBlobBuilder";
 import { FXLFrameManager } from "./FXLFrameManager";
 import { FXLPeripherals } from "./FXLPeripherals";
-import { FXLSpreader } from "./FXLSpreader";
+import { FXLSpreader, Orientation, Spread } from "./FXLSpreader";
+import { VisualNavigatorViewport } from "../../Navigator";
 
 const UPPER_BOUNDARY = 8;
 const LOWER_BOUNDARY = 5;
@@ -47,7 +48,7 @@ export class FXLFramePoolManager {
         this.container = container;
         this.positions = positions;
         this.pub = pub;
-        this.spreadPresentation = pub.metadata.getPresentation()?.spread || Spread.auto;
+        this.spreadPresentation = pub.metadata.otherMetadata?.spread || Spread.auto;
 
         if(this.pub.metadata.effectiveReadingProgression !== ReadingProgression.rtl && this.pub.metadata.effectiveReadingProgression !== ReadingProgression.ltr)
             // TODO support TTB and BTT
@@ -78,7 +79,7 @@ export class FXLFramePoolManager {
 
             // this.pages.push(fm);
             this.pool.set(link.href, fm);
-            fm.width = 100 / this.length * (link.properties?.getOrientation() === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
+            fm.width = 100 / this.length * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
             fm.height = this.height;
         });
     }
@@ -123,7 +124,7 @@ export class FXLFramePoolManager {
             this.pool.forEach((frm, linkHref) => {
                 let i = this.pub.readingOrder.items.findIndex(l => l.href === linkHref);
                 const link = this.pub.readingOrder.items[i];
-                frm.width = 100 / this.length * (link.properties?.getOrientation() === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
+                frm.width = 100 / this.length * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
                 frm.height = this.height;
                 if(!frm.loaded) return;
                 const spread = this.spreader.findByLink(link)!;
@@ -602,7 +603,25 @@ export class FXLFramePoolManager {
         return ret as DOMRect;
     }
 
-    get currentNumbers(): number[] {
+    get viewport(): VisualNavigatorViewport {
+        const viewport: VisualNavigatorViewport = {
+            readingOrder: [],
+            progressions: new Map(),
+            positions: null
+        };
+        const currentSpread = 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
+        });
+
+        // Set positions using currentNumbers
+        viewport.positions = this.getCurrentNumbers();
+    
+        return viewport;
+    }
+
+    private getCurrentNumbers(): number[] {
         if(this.perPage < 2) {
             const link = this.pub.readingOrder.items[this.currentSlide];
             return [link.properties?.otherProperties["number"]];

package/src/epub/fxl/FXLSpreader.ts

@@ -1,4 +1,17 @@
-import { Link, Links, Orientation, Page, Publication, ReadingProgression, Spread } from "@readium/shared";
+import { Link, Links, Page, Publication, ReadingProgression } from "@readium/shared";
+
+export enum Orientation {
+    auto = "auto",
+    landscape = "landscape",
+    portrait = "portrait",
+}
+
+export enum Spread {
+    auto = "auto",
+    both = "both",
+    none = "none",
+    landscape = "landscape",
+}
 
 export class FXLSpreader {
     shift = true; // TODO getter
@@ -22,8 +35,8 @@ export class FXLSpreader {
                 });
                 // if(!orientation) item.Properties.Orientation = item.Width > item.Height ? "landscape" : "portrait";
             }
-            const isLandscape = item.properties?.getOrientation() === Orientation.landscape ? true : false;
-            if((!item.properties?.getPage() || redo)) item.properties = item.properties?.add({
+            const isLandscape = item.properties?.otherProperties["orientation"] === Orientation.landscape ? true : false;
+            if((!item.properties?.page || redo)) item.properties = item.properties?.add({
                 "page": isLandscape ? // If a landscape image
                     "center" : // Center it
                     ((((this.shift ? 0 : 1) + index - this.nLandscape) % 2) ? 
@@ -44,21 +57,21 @@ export class FXLSpreader {
             if(item.length > 1)
                 return; // Only left with single-page "spreads"
             const single = item[0];
-            const orientation = single.properties?.getOrientation();
+            const orientation = single.properties?.otherProperties["orientation"];
 
             // First page is landscape/spread means no shift
-            if(index === 0 && (orientation === Orientation.landscape || (orientation !== Orientation.portrait && ((single.width || 0) > (single.height || 0) || single.properties?.getSpread() === Spread.both))))
+            if(index === 0 && (orientation === Orientation.landscape || (orientation !== Orientation.portrait && ((single.width || 0) > (single.height || 0) || single.properties?.otherProperties["spread"] === Spread.both))))
                 this.shift = false;
 
             // If last was a true single, and this spread is a center page (that's not special), something's wrong
-            if(wasLastSingle && single.properties?.getPage() === Page.center) {
+            if(wasLastSingle && single.properties?.page === Page.center) {
                 this.spreads[index - 1][0].addProperties({"addBlank": true});
                 /*if(single.findFlag("final"))
                     this.nLandscape++;*/
             }
 
             // If this single page spread is an orphaned component of a double page spread (and it's not the first page)
-            if(orientation === Orientation.portrait && single.properties?.getPage() !== "center" && single.properties?.otherProperties["number"] > 1)
+            if(orientation === Orientation.portrait && single.properties?.page !== "center" && single.properties?.otherProperties["number"] > 1)
                 wasLastSingle = true;
             else
                 wasLastSingle = false;
@@ -72,7 +85,7 @@ export class FXLSpreader {
         spine.items.forEach((item, index) => {
             if(!index && this.shift) {
                 this.spreads.push([item]);
-            } else if(item.properties?.getPage() === Page.center) { // If a center (single) page spread, push immediately and reset current set
+            } else if(item.properties?.page === Page.center) { // If a center (single) page spread, push immediately and reset current set
                 if(currentSet.length > 0) this.spreads.push(currentSet);
                 this.spreads.push([item]);
                 currentSet = [];

package/src/epub/preferences/EpubDefaults.ts

@@ -2,7 +2,6 @@ import {
   fontSizeRangeConfig, 
   fontWeightRangeConfig, 
   fontWidthRangeConfig, 
-  LayoutStrategy, 
   TextAlignment, 
   Theme 
 } from "../../preferences/Types";
@@ -37,8 +36,8 @@ export interface IEpubDefaults {
   hyphens?: boolean | null,
   invertFilter?: boolean | number | null,
   invertGaijiFilter?: boolean | number | null,
+  iOSPatch?: boolean | null,
   iPadOSPatch?: boolean | null,
-  layoutStrategy?: LayoutStrategy | null,
   letterSpacing?: number | null,
   ligatures?: boolean | null,
   lineHeight?: number | null,
@@ -81,8 +80,8 @@ export class EpubDefaults {
   hyphens: boolean | null;
   invertFilter: boolean | number | null;
   invertGaijiFilter: boolean | number | null;
+  iOSPatch: boolean;
   iPadOSPatch: boolean;
-  layoutStrategy: LayoutStrategy | null;
   letterSpacing: number | null;
   ligatures: boolean | null;
   lineHeight: number | null;
@@ -127,10 +126,12 @@ export class EpubDefaults {
     this.hyphens = ensureBoolean(defaults.hyphens) ?? null;
     this.invertFilter = ensureFilter(defaults.invertFilter) ?? false;
     this.invertGaijiFilter = ensureFilter(defaults.invertGaijiFilter) ?? false;
+    this.iOSPatch = defaults.iOSPatch === false 
+        ? false 
+        : ((sMLWithRequest.OS.iOS || sMLWithRequest.OS.iPadOS) && sMLWithRequest.iOSRequest === "mobile");
     this.iPadOSPatch = defaults.iPadOSPatch === false 
         ? false 
         : (sMLWithRequest.OS.iPadOS && sMLWithRequest.iOSRequest === "desktop");
-    this.layoutStrategy = ensureEnumValue<LayoutStrategy>(defaults.layoutStrategy, LayoutStrategy) || LayoutStrategy.lineLength;
     this.letterSpacing = ensureNonNegative(defaults.letterSpacing) || null;
     this.ligatures = ensureBoolean(defaults.ligatures) ?? null;
     this.lineHeight = ensureNonNegative(defaults.lineHeight) || null;

package/src/epub/preferences/EpubPreferences.ts

@@ -1,7 +1,6 @@
 import { ConfigurablePreferences } from "../../preferences/Configurable";
 
 import { 
-  LayoutStrategy,
   TextAlignment, 
   Theme, 
   fontSizeRangeConfig, 
@@ -34,8 +33,8 @@ export interface IEpubPreferences {
   hyphens?: boolean | null,
   invertFilter?: boolean | number | null,
   invertGaijiFilter?: boolean | number | null,
+  iOSPatch?: boolean | null,
   iPadOSPatch?: boolean | null,
-  layoutStrategy?: LayoutStrategy | null,
   letterSpacing?: number | null,
   ligatures?: boolean | null,
   lineHeight?: number | null,
@@ -78,8 +77,8 @@ export class EpubPreferences implements ConfigurablePreferences {
   hyphens?: boolean | null;
   invertFilter?: boolean | number | null;
   invertGaijiFilter?: boolean | number | null;
+  iOSPatch?: boolean | null;
   iPadOSPatch?: boolean | null;
-  layoutStrategy?: LayoutStrategy | null;
   letterSpacing?: number | null;
   ligatures?: boolean | null;
   lineHeight?: number | null;
@@ -121,8 +120,8 @@ export class EpubPreferences implements ConfigurablePreferences {
     this.hyphens = ensureBoolean(preferences.hyphens);
     this.invertFilter = ensureFilter(preferences.invertFilter);
     this.invertGaijiFilter = ensureFilter(preferences.invertGaijiFilter);
+    this.iOSPatch = ensureBoolean(preferences.iOSPatch);
     this.iPadOSPatch = ensureBoolean(preferences.iPadOSPatch);
-    this.layoutStrategy = ensureEnumValue<LayoutStrategy>(preferences.layoutStrategy, LayoutStrategy);
     this.letterSpacing = ensureNonNegative(preferences.letterSpacing);
     this.ligatures = ensureBoolean(preferences.ligatures);
     this.lineHeight = ensureNonNegative(preferences.lineHeight);