@readium/navigator 2.2.3 → 2.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -49,16 +49,16 @@
   },
   "devDependencies": {
     "@laynezh/vite-plugin-lib-assets": "^2.1.0",
-    "@readium/css": "2.0.0-beta.20",
+    "@readium/css": "2.0.0-beta.24",
     "@readium/navigator-html-injectables": "workspace:*",
     "@readium/shared": "workspace:*",
     "@types/path-browserify": "^1.0.3",
     "css-selector-generator": "^3.6.9",
     "path-browserify": "^1.0.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
     "user-agent-data-types": "^0.4.2",
-    "vite": "^7.1.5"
+    "vite": "^7.2.4"
   }
 }

package/src/epub/css/Properties.ts

@@ -1,4 +1,4 @@
-import { TextAlignment } from "../../preferences/Types";
+import { ExperimentKey, experiments, TextAlignment } from "../../preferences/Types";
 import { 
   BodyHyphens, 
   BoxSizing, 
@@ -214,6 +214,7 @@ export interface IRSProperties {
   textColor?: string | null;
   typeScale?: TypeScale | null;
   visitedColor?: string | null;
+  experiments?: Array<ExperimentKey> | null;
 }
 
 export class RSProperties extends Properties {
@@ -258,6 +259,7 @@ export class RSProperties extends Properties {
   textColor: string | null;
   typeScale: TypeScale | null;
   visitedColor: string | null;
+  experiments: Array<ExperimentKey> | null;
 
   constructor(props: IRSProperties) {
     super();
@@ -302,6 +304,7 @@ export class RSProperties extends Properties {
     this.textColor = props.textColor ?? null;
     this.typeScale = props.typeScale ?? null;
     this.visitedColor = props.visitedColor ?? null;
+    this.experiments = props.experiments ?? null;
   }
 
   toCSSProperties(): { [key: string]: string; } {
@@ -349,6 +352,12 @@ export class RSProperties extends Properties {
     if (this.typeScale) cssProperties["--RS__typeScale"] = this.toUnitless(this.typeScale);
     if (this.visitedColor) cssProperties["--RS__visitedColor"] = this.visitedColor;
 
+    if (this.experiments) {
+      this.experiments.forEach((exp) => {
+        cssProperties["--RS__" + exp] = experiments[exp].value;
+      });
+    };
+
     return cssProperties;
   }
 }

package/src/epub/css/ReadiumCSS.ts

@@ -54,6 +54,9 @@ export class ReadiumCSS {
     if (settings.scrollPaddingTop !== this.rsProperties.scrollPaddingTop)
       this.rsProperties.scrollPaddingTop = settings.scrollPaddingTop;
 
+    if (settings.experiments !== this.rsProperties.experiments)
+      this.rsProperties.experiments = settings.experiments;
+
     // This has to be updated before pagination
     // otherwise the metrics won’t be correct for line length
     this.lineLengths.update({

package/src/epub/frame/FrameBlobBuilder.ts

@@ -50,7 +50,10 @@ const cssSelectorGenerator = (doc: Document) => scriptify(doc, cached("css-selec
 
 // Note: we aren't blocking some of the events right now to try and be as nonintrusive as possible.
 // For a more comprehensive implementation, see https://github.com/hackademix/noscript/blob/3a83c0e4a506f175e38b0342dad50cdca3eae836/src/content/syncFetchPolicy.js#L142
+// The snippet of code at the beginning of this source is an attempt at defence against JS using persistent storage
 const rBefore = (doc: Document) => scriptify(doc, cached("JS-Before", () => blobify(stripJS(`
+    const noop=()=>{},emptyObj={},emptyPromise=()=>Promise.resolve(void 0),fakeStorage={getItem:noop,setItem:noop,removeItem:noop,clear:noop,key:noop,length:0};["localStorage","sessionStorage"].forEach((e=>Object.defineProperty(window,e,{get:()=>fakeStorage,configurable:!0}))),Object.defineProperty(document,"cookie",{get:()=>"",set:noop,configurable:!0}),Object.defineProperty(window,"indexedDB",{get:()=>{},configurable:!0}),Object.defineProperty(window,"caches",{get:()=>emptyObj,configurable:!0}),Object.defineProperty(navigator,"storage",{get:()=>({persist:emptyPromise,persisted:emptyPromise,estimate:()=>Promise.resolve({quota:0,usage:0})}),configurable:!0}),Object.defineProperty(navigator,"serviceWorker",{get:()=>({register:emptyPromise,getRegistration:emptyPromise,ready:emptyPromise()}),configurable:!0});
+
     window._readium_blockedEvents = [];
     window._readium_blockEvents = true;
     window._readium_eventBlocker = (e) => {
@@ -78,6 +81,24 @@ const rAfter = (doc: Document) => scriptify(doc, cached("JS-After", () => blobif
     });`
 ), "text/javascript")));
 
+const csp = (domains: string[]) => {
+    const d = domains.join(" ");
+    return [
+        // 'self' is useless because the document is loaded from a blob: URL
+        `upgrade-insecure-requests`,
+        `default-src ${d} blob:`,
+        `connect-src 'none'`, // No fetches to anywhere. TODO: change?
+        `script-src ${d} blob: 'unsafe-inline'`, // JS scripts
+        `style-src ${d} blob: 'unsafe-inline'`, // CSS styles
+        `img-src ${d} blob: data:`, // Images
+        `font-src ${d} blob: data:`, // Fonts
+        `object-src ${d} blob:`, // Despite not being recommended, still necessary in EPUBs for <object>
+        `child-src ${d}`, // <iframe>, web workers
+        `form-action 'none'`, // No form submissions
+        //`report-uri ?`,
+    ].join("; ");
+};
+
 export default class FrameBlobBuider {
     private readonly item: Link;
     private readonly burl: string;
@@ -93,7 +114,7 @@ export default class FrameBlobBuider {
 
     public async build(fxl = false): Promise<string> {
         if(!this.item.mediaType.isHTML) {
-            if(this.item.mediaType.isBitmap) {
+            if(this.item.mediaType.isBitmap || this.item.mediaType.equals(MediaType.SVG)) {
                 return this.buildImageFrame();
             } else
                 throw Error("Unsupported frame mediatype " + this.item.mediaType.string);
@@ -115,7 +136,7 @@ export default class FrameBlobBuider {
             const details = perror.querySelector("div");
             throw new Error(`Failed parsing item ${this.item.href}: ${details?.textContent || perror.textContent}`);
         }
-        return this.finalizeDOM(doc, this.burl, this.item.mediaType, fxl, this.cssProperties);
+        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, fxl, this.cssProperties);
     }
 
     private buildImageFrame(): string {
@@ -126,7 +147,7 @@ export default class FrameBlobBuider {
         simg.alt = this.item.title || "";
         simg.decoding = "async";
         doc.body.appendChild(simg);
-        return this.finalizeDOM(doc, this.burl, this.item.mediaType, true);
+        return this.finalizeDOM(doc, this.pub.baseURL, this.burl, this.item.mediaType, true);
     }
 
     // Has JS that may have side-effects when the document is loaded, without any user interaction
@@ -159,7 +180,7 @@ export default class FrameBlobBuider {
         }
     }
 
-    private finalizeDOM(doc: Document, base: string | undefined, mediaType: MediaType, fxl = false, cssProperties?: { [key: string]: string }): string {
+    private finalizeDOM(doc: Document, root: string | undefined, base: string | undefined, mediaType: MediaType, fxl = false, cssProperties?: { [key: string]: string }): string {
         if(!doc) return "";
 
         // Inject styles
@@ -233,8 +254,8 @@ export default class FrameBlobBuider {
         ) {
             document.documentElement.dir = this.pub.metadata.effectiveReadingProgression;
         } */
-    
-        if(base !== undefined) {
+
+        if (base !== undefined) {
             // Set all URL bases. Very convenient!
             const b = doc.createElement("base");
             b.href = base;
@@ -244,17 +265,24 @@ export default class FrameBlobBuider {
 
         // Inject script to prevent in-publication scripts from executing until we want them to
         const hasExecutable = this.hasExecutable(doc);
-        if(hasExecutable) doc.head.firstChild!.before(rBefore(doc));
+        if (hasExecutable) doc.head.firstChild!.before(rBefore(doc));
         doc.head.firstChild!.before(cssSelectorGenerator(doc)); // CSS selector utility
-        if(hasExecutable) doc.head.appendChild(rAfter(doc)); // Another execution prevention script
+        if (hasExecutable) doc.head.appendChild(rAfter(doc)); // Another execution prevention script
+
+        // Add CSP
+        const meta = doc.createElement("meta");
+        meta.httpEquiv = "Content-Security-Policy";
+        meta.content = csp(root ? [root] : []);
+        meta.dataset.readium = "true";
+        doc.head.firstChild!.before(meta);
 
 
         // Make blob from doc
         return URL.createObjectURL(
             new Blob([new XMLSerializer().serializeToString(doc)], {
-              type: mediaType.isHTML
-                ? mediaType.string
-                : "application/xhtml+xml", // Fallback to XHTML
+                type: mediaType.isHTML
+                    ? mediaType.string
+                    : "application/xhtml+xml", // Fallback to XHTML
             })
         );
     }

package/src/epub/frame/FrameManager.ts

@@ -16,6 +16,7 @@ export class FrameManager {
 
     constructor(source: string) {
         this.frame = document.createElement("iframe");
+        this.frame.sandbox.value = "allow-same-origin allow-scripts";
         this.frame.classList.add("readium-navigator-iframe");
         this.frame.style.visibility = "hidden";
         this.frame.style.setProperty("aria-hidden", "true");

package/src/epub/fxl/FXLFrameManager.ts

@@ -23,6 +23,7 @@ export class FXLFrameManager {
         this.peripherals = peripherals;
         this.debugHref = debugHref;
         this.frame = document.createElement("iframe");
+        this.frame.sandbox.value = "allow-same-origin allow-scripts";
         this.frame.classList.add("readium-navigator-iframe");
         this.frame.classList.add("blank");
         this.frame.scrolling = "no";

package/src/epub/preferences/EpubDefaults.ts

@@ -1,4 +1,5 @@
 import { 
+  ExperimentKey,
   fontSizeRangeConfig, 
   fontWeightRangeConfig, 
   fontWidthRangeConfig, 
@@ -8,13 +9,14 @@ import {
 import { 
   ensureBoolean, 
   ensureEnumValue, 
+  ensureExperiment, 
   ensureFilter, 
   ensureLessThanOrEqual, 
   ensureMoreThanOrEqual, 
   ensureNonNegative, 
   ensureString, 
   ensureValueInRange, 
-  withFallback
+  withFallback 
 } from "../../preferences/guards";
 
 import { sMLWithRequest } from "../../helpers";
@@ -59,7 +61,8 @@ export interface IEpubDefaults {
   textColor?: string | null,
   textNormalization?: boolean | null,
   visitedColor?: string | null,
-  wordSpacing?: number | null
+  wordSpacing?: number | null,
+  experiments?: Array<ExperimentKey> | null
 }
 
 export class EpubDefaults {
@@ -103,6 +106,7 @@ export class EpubDefaults {
   textNormalization: boolean | null;
   visitedColor: string | null;
   wordSpacing: number | null;
+  experiments: Array<ExperimentKey> | null;
 
   constructor(defaults: IEpubDefaults) {
     this.backgroundColor = ensureString(defaults.backgroundColor) || null;
@@ -153,5 +157,7 @@ export class EpubDefaults {
     this.optimalLineLength = ensureNonNegative(defaults.optimalLineLength) || 65;
     this.maximalLineLength = withFallback(ensureMoreThanOrEqual(defaults.maximalLineLength, this.optimalLineLength), 80);
     this.minimalLineLength = withFallback(ensureLessThanOrEqual(defaults.minimalLineLength, this.optimalLineLength), 40);
+
+    this.experiments = ensureExperiment(defaults.experiments) || null;
   }
 }

package/src/epub/preferences/EpubPreferencesEditor.ts

@@ -256,9 +256,30 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
     return new BooleanPreference({
       initialValue: this.preferences.ligatures,
       effectiveValue: this.settings.ligatures || true,
-      isEffective: this.layout !== Layout.fixed
-        && this.metadata?.languages?.some(lang => lang === "ar" || lang === "fa")
-        && this.preferences.ligatures !== null || false,
+      isEffective: (() => {
+        // Always respect explicit null (disabled) preference
+        if (this.preferences.ligatures === null) {
+          return false;
+        }
+        
+        // Disable for fixed layout
+        if (this.layout === Layout.fixed) {
+          return false;
+        }
+        
+        // Check for languages/scripts that should disable ligatures
+        // ReadiumCSS does not apply in CJK
+        const primaryLang = this.metadata?.languages?.[0]?.toLowerCase();
+        if (primaryLang) {
+          // Disable for Chinese, Japanese, Korean, and Traditional Mongolian (mn-Mong)
+          if (["zh", "ja", "ko", "mn-mong"].some(lang => primaryLang.startsWith(lang))) {
+            return false;
+          }
+        }
+        
+        // Enable by default
+        return true;
+      })(),
       onChange: (newValue: boolean | null | undefined) => {
         this.updatePreference("ligatures", newValue || null);
       }

package/src/epub/preferences/EpubSettings.ts

@@ -1,5 +1,5 @@
 import { ConfigurableSettings } from "../../preferences/Configurable";
-import { TextAlignment } from "../../preferences/Types";
+import { ExperimentKey, TextAlignment } from "../../preferences/Types";
 import { EpubDefaults } from "./EpubDefaults";
 import { EpubPreferences } from "./EpubPreferences";
 
@@ -45,7 +45,8 @@ export interface IEpubSettings {
   textColor?: string | null,
   textNormalization?: boolean | null,
   visitedColor?: string | null,
-  wordSpacing?: number | null
+  wordSpacing?: number | null,
+  experiments?: Array<ExperimentKey> | null
 }
 
 export class EpubSettings implements ConfigurableSettings {
@@ -89,6 +90,7 @@ export class EpubSettings implements ConfigurableSettings {
   textNormalization: boolean | null;
   visitedColor: string | null;
   wordSpacing: number | null;
+  experiments: Array<ExperimentKey> | null;
 
   constructor(preferences: EpubPreferences, defaults: EpubDefaults) {
     this.backgroundColor = preferences.backgroundColor || defaults.backgroundColor || null;
@@ -229,5 +231,7 @@ export class EpubSettings implements ConfigurableSettings {
       : defaults.wordSpacing !== undefined 
         ? defaults.wordSpacing 
         : null;
+
+    this.experiments = defaults.experiments || null;
   }
 }

package/src/preferences/Types.ts

@@ -1,3 +1,9 @@
+import RCSSExperiments from "@readium/css/css/vars/experiments.json";
+
+export type ExperimentKey = keyof typeof RCSSExperiments;
+
+export const experiments = RCSSExperiments;
+
 export enum TextAlignment {
   start = "start",
   left = "left",

package/src/preferences/guards.ts

@@ -1,3 +1,5 @@
+import { ExperimentKey, experiments } from './Types';
+
 export function ensureLessThanOrEqual<T extends number | null | undefined>(value: T, compareTo: T): T | undefined {
   if (value === undefined || value === null) {
     return value;
@@ -83,3 +85,13 @@ export function ensureValueInRange(value: number | null | undefined, range: [num
 export function withFallback<T>(value: T | null | undefined, defaultValue: T | null): T | null {
   return value === undefined ? defaultValue : value;
 }
+
+export function ensureExperiment(experimentsInput: ExperimentKey[] | null | undefined): ExperimentKey[] | null | undefined {
+  if (experimentsInput === undefined) {
+    return undefined;
+  }
+  if (experimentsInput === null) {
+    return null;
+  }
+  return experimentsInput.filter(exp => exp in experiments);
+}

package/src/webpub/WebPubBlobBuilder.ts

@@ -1,9 +1,16 @@
 import { Link, Publication } from "@readium/shared";
-import { webPubStylesheet } from "./css/WebPubStylesheet";
 
-// Utilities (matching FrameBlobBuilder pattern)
+// Readium CSS imports
+// The "?inline" query is to prevent some bundlers from injecting these into the page (e.g. vite)
+// @ts-ignore
+import readiumCSSWebPub from "@readium/css/css/dist/webPub/ReadiumCSS-webPub.css?inline";
+
+// Utilities
 const blobify = (source: string, type: string) => URL.createObjectURL(new Blob([source], { type }));
 const stripJS = (source: string) => source.replace(/\/\/.*/g, "").replace(/\/\*[\s\S]*?\*\//g, "").replace(/\n/g, "").replace(/\s+/g, " ");
+const stripCSS = (source: string) => source.replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '').replace(/ {2,}/g, ' ')
+    // Fully resolve absolute local URLs created by bundlers since it's going into a blob
+    .replace(/url\((?!(https?:)?\/\/)("?)\/([^\)]+)/g, `url($2${window.location.origin}/$3`);
 const scriptify = (doc: Document, source: string) => {
     const s = doc.createElement("script");
     s.dataset.readium = "true";
@@ -11,16 +18,18 @@ const scriptify = (doc: Document, source: string) => {
     return s;
 }
 const styleify = (doc: Document, source: string) => {
-    const s = doc.createElement("style");
+    const s = doc.createElement("link");
     s.dataset.readium = "true";
-    s.textContent = source;
+    s.rel = "stylesheet";
+    s.type = "text/css";
+    s.href = source.startsWith("blob:") ? source : blobify(source, "text/css");
     return s;
 }
 
 type CacheFunction = () => string;
 const resourceBlobCache = new Map<string, string>();
 const cached = (key: string, cacher: CacheFunction) => {
-    if (resourceBlobCache.has(key)) return resourceBlobCache.get(key)!;
+    if(resourceBlobCache.has(key)) return resourceBlobCache.get(key)!;
     const value = cacher();
     resourceBlobCache.set(key, value);
     return value;
@@ -103,9 +112,9 @@ export class WebPubBlobBuilder {
     private finalizeDOM(doc: Document, base: string | undefined, mediaType: any, txt?: string, cssProperties?: { [key: string]: string }): string {
         if(!doc) return "";
 
-        // Add WebPubCSS stylesheet at end of head (like EPUB ReadiumCSS-after)
-        const webPubStyle = styleify(doc, webPubStylesheet);
-        doc.head.appendChild(webPubStyle);
+        // ReadiumCSS WebPub
+        doc.head.appendChild(styleify(doc, cached("ReadiumCSS-webpub", () => blobify(stripCSS(readiumCSSWebPub), "text/css"))));
+
         if (cssProperties) {
             this.setProperties(cssProperties, doc);
         }

package/src/webpub/WebPubNavigator.ts

@@ -8,12 +8,13 @@ import { WebPubFrameManager } from "./WebPubFrameManager";
 
 import { ManagerEventKey } from "../epub/EpubNavigator";
 import { WebPubCSS } from "./css/WebPubCSS";
-import { WebUserProperties } from "./css/Properties";
+import { WebUserProperties, WebRSProperties } from "./css/Properties";
 import { IWebPubPreferences, WebPubPreferences } from "./preferences/WebPubPreferences";
 import { IWebPubDefaults, WebPubDefaults } from "./preferences/WebPubDefaults";
 import { WebPubSettings } from "./preferences/WebPubSettings";
 import { IPreferencesEditor } from "../preferences/PreferencesEditor";
 import { WebPubPreferencesEditor } from "./preferences/WebPubPreferencesEditor";
+
 export interface WebPubNavigatorConfiguration {
     preferences: IWebPubPreferences;
     defaults: IWebPubDefaults;
@@ -74,6 +75,7 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
         this._defaults = new WebPubDefaults(configuration.defaults);
         this._settings = new WebPubSettings(this._preferences, this._defaults, this.hasDisplayTransformability);
         this._css = new WebPubCSS({
+            rsProperties: new WebRSProperties({ experiments: this._settings.experiments || null }),
             userProperties: new WebUserProperties({ zoom: this._settings.zoom })
         });
 
@@ -135,6 +137,12 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
     private compileCSSProperties(css: WebPubCSS) {
         const properties: { [key: string]: string } = {};
 
+        // Include RS properties (i.e. experiments)
+        for (const [key, value] of Object.entries(css.rsProperties.toCSSProperties())) {
+            properties[key] = value;
+        }
+
+        // Include user properties
         for (const [key, value] of Object.entries(css.userProperties.toCSSProperties())) {
             properties[key] = value;
         }

package/src/webpub/css/Properties.ts

@@ -1,4 +1,4 @@
-import { TextAlignment } from "../../preferences/Types";
+import { ExperimentKey, experiments, TextAlignment } from "../../preferences/Types";
 import { BodyHyphens, Ligatures, Properties } from "../../css/Properties";
 
 export interface IWebUserProperties {
@@ -6,6 +6,8 @@ export interface IWebUserProperties {
   bodyHyphens?: BodyHyphens | null;
   fontFamily?: string | null;
   fontWeight?: number | null;
+  iOSPatch?: boolean | null;
+  iPadOSPatch?: boolean | null;
   letterSpacing?: number | null;
   ligatures?: Ligatures | null;
   lineHeight?: number | null;
@@ -22,6 +24,8 @@ export class WebUserProperties extends Properties {
   bodyHyphens: BodyHyphens | null;
   fontFamily: string | null;
   fontWeight: number | null;
+  iOSPatch: boolean | null;
+  iPadOSPatch: boolean | null;
   letterSpacing: number | null;
   ligatures: Ligatures | null;
   lineHeight: number | null;
@@ -38,6 +42,8 @@ export class WebUserProperties extends Properties {
     this.bodyHyphens = props.bodyHyphens ?? null;
     this.fontFamily = props.fontFamily ?? null;
     this.fontWeight = props.fontWeight ?? null;
+    this.iOSPatch = props.iOSPatch ?? null;
+    this.iPadOSPatch = props.iPadOSPatch ?? null;
     this.letterSpacing = props.letterSpacing ?? null;
     this.ligatures = props.ligatures ?? null;
     this.lineHeight = props.lineHeight ?? null;
@@ -56,6 +62,8 @@ export class WebUserProperties extends Properties {
     if (this.bodyHyphens) cssProperties["--USER__bodyHyphens"] = this.bodyHyphens;
     if (this.fontFamily) cssProperties["--USER__fontFamily"] = this.fontFamily;
     if (this.fontWeight != null) cssProperties["--USER__fontWeight"] = this.toUnitless(this.fontWeight);
+    if (this.iOSPatch) cssProperties["--USER__iOSPatch"] = this.toFlag("iOSPatch");
+    if (this.iPadOSPatch) cssProperties["--USER__iPadOSPatch"] = this.toFlag("iPadOSPatch");
     if (this.letterSpacing != null) cssProperties["--USER__letterSpacing"] = this.toRem(this.letterSpacing);
     if (this.ligatures) cssProperties["--USER__ligatures"] = this.ligatures;
     if (this.lineHeight != null) cssProperties["--USER__lineHeight"] = this.toUnitless(this.lineHeight);
@@ -69,3 +77,28 @@ export class WebUserProperties extends Properties {
     return cssProperties;
   }
 }
+
+export interface IWebRSProperties {
+  experiments: Array<ExperimentKey> | null;
+}
+
+export class WebRSProperties extends Properties {
+  experiments: Array<ExperimentKey> | null;
+
+  constructor(props: IWebRSProperties) {
+    super();
+    this.experiments = props.experiments ?? null;
+  }
+
+  toCSSProperties() {
+    const cssProperties: { [key: string]: string } = {};
+
+    if (this.experiments) {
+      this.experiments.forEach((exp) => {
+        cssProperties["--RS__" + exp] = experiments[exp].value;
+      });
+    };
+
+    return cssProperties;
+  }
+}

package/src/webpub/css/WebPubCSS.ts

@@ -1,18 +1,25 @@
 import { WebPubSettings } from "../preferences/WebPubSettings";
-import { IWebUserProperties, WebUserProperties } from "./Properties";
+import { IWebUserProperties, WebRSProperties, WebUserProperties } from "./Properties";
 
 export interface IWebPubCSS {
+  rsProperties: WebRSProperties;
   userProperties: WebUserProperties;
 }
 
 export class WebPubCSS {
+  rsProperties: WebRSProperties;
   userProperties: WebUserProperties;
 
   constructor(props: IWebPubCSS) {
+    this.rsProperties = props.rsProperties;
     this.userProperties = props.userProperties;
   }
 
   update(settings: WebPubSettings) {
+    if (settings.experiments) {
+      this.rsProperties.experiments = settings.experiments;
+    }
+
     const updated: IWebUserProperties = {
       a11yNormalize: settings.textNormalization,
       bodyHyphens: typeof settings.hyphens !== "boolean" 
@@ -22,6 +29,8 @@ export class WebPubCSS {
           : "none",
       fontFamily: settings.fontFamily,
       fontWeight: settings.fontWeight,
+      iOSPatch: settings.iOSPatch,
+      iPadOSPatch: settings.iPadOSPatch,
       letterSpacing: settings.letterSpacing,
       ligatures: typeof settings.ligatures !== "boolean" 
         ? null 

package/src/webpub/css/index.ts

@@ -1,3 +1,2 @@
 export * from "./Properties";
-export * from "./WebPubCSS";
-export * from "./WebPubStylesheet";
+export * from "./WebPubCSS";

package/src/webpub/preferences/WebPubDefaults.ts

@@ -1,4 +1,5 @@
 import { 
+  ExperimentKey,
   fontWeightRangeConfig, 
   TextAlignment, 
   zoomRangeConfig 
@@ -9,13 +10,18 @@ import {
   ensureEnumValue,
   ensureNonNegative,
   ensureValueInRange,
-  ensureString
+  ensureString,
+  ensureExperiment
 } from "../../preferences/guards";
 
+import { sMLWithRequest } from "../../helpers";
+
 export interface IWebPubDefaults {
   fontFamily?: string | null,
   fontWeight?: number | null,
   hyphens?: boolean | null,
+  iOSPatch?: boolean | null,
+  iPadOSPatch?: boolean | null,
   letterSpacing?: number | null,
   ligatures?: boolean | null,
   lineHeight?: number | null,
@@ -25,13 +31,16 @@ export interface IWebPubDefaults {
   textAlign?: TextAlignment | null,
   textNormalization?: boolean | null,
   wordSpacing?: number | null,
-  zoom?: number | null
+  zoom?: number | null,
+  experiments?: Array<ExperimentKey> | null,
 }
 
 export class WebPubDefaults {
   fontFamily: string | null;
   fontWeight: number | null;
   hyphens: boolean | null;
+  iOSPatch: boolean | null;
+  iPadOSPatch: boolean | null;
   letterSpacing: number | null;
   ligatures: boolean | null;
   lineHeight: number | null;
@@ -42,11 +51,18 @@ export class WebPubDefaults {
   textNormalization: boolean | null;
   wordSpacing: number | null;
   zoom: number;
+  experiments: Array<ExperimentKey> | null;
 
   constructor(defaults: IWebPubDefaults) {
     this.fontFamily = ensureString(defaults.fontFamily) || null;
     this.fontWeight = ensureValueInRange(defaults.fontWeight, fontWeightRangeConfig.range) || null;
     this.hyphens = ensureBoolean(defaults.hyphens) ?? null;
+    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.letterSpacing = ensureNonNegative(defaults.letterSpacing) || null;
     this.ligatures = ensureBoolean(defaults.ligatures) ?? null;
     this.lineHeight = ensureNonNegative(defaults.lineHeight) || null;
@@ -57,5 +73,6 @@ export class WebPubDefaults {
     this.textNormalization = ensureBoolean(defaults.textNormalization) ?? false;
     this.wordSpacing = ensureNonNegative(defaults.wordSpacing) || null;
     this.zoom = ensureValueInRange(defaults.zoom, zoomRangeConfig.range) || 1;
+    this.experiments = ensureExperiment(defaults.experiments) ?? null;
   }
 }

package/src/webpub/preferences/WebPubPreferences.ts

@@ -18,6 +18,8 @@ export interface IWebPubPreferences {
   fontFamily?: string | null,
   fontWeight?: number | null,
   hyphens?: boolean | null,
+  iOSPatch?: boolean | null,
+  iPadOSPatch?: boolean | null,
   letterSpacing?: number | null,
   ligatures?: boolean | null,
   lineHeight?: number | null,
@@ -34,6 +36,8 @@ export class WebPubPreferences implements ConfigurablePreferences {
   fontFamily?: string | null;
   fontWeight?: number | null;
   hyphens?: boolean | null;
+  iOSPatch?: boolean | null;
+  iPadOSPatch?: boolean | null;
   letterSpacing?: number | null;
   ligatures?: boolean | null;
   lineHeight?: number | null;
@@ -49,6 +53,8 @@ export class WebPubPreferences implements ConfigurablePreferences {
     this.fontFamily = ensureString(preferences.fontFamily);
     this.fontWeight = ensureValueInRange(preferences.fontWeight, fontWeightRangeConfig.range);
     this.hyphens = ensureBoolean(preferences.hyphens);
+    this.iOSPatch = ensureBoolean(preferences.iOSPatch);
+    this.iPadOSPatch = ensureBoolean(preferences.iPadOSPatch);
     this.letterSpacing = ensureNonNegative(preferences.letterSpacing);
     this.ligatures = ensureBoolean(preferences.ligatures);
     this.lineHeight = ensureNonNegative(preferences.lineHeight);