@readium/navigator 2.2.2 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@laynezh/vite-plugin-lib-assets": "^2.1.0",
-    "@readium/css": "2.0.0-beta.19",
+    "@readium/css": "2.0.0-beta.22",
     "@readium/navigator-html-injectables": "workspace:*",
     "@readium/shared": "workspace:*",
     "@types/path-browserify": "^1.0.3",

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/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/css/Properties.ts

@@ -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);

package/src/webpub/css/WebPubCSS.ts

@@ -22,6 +22,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

@@ -12,10 +12,14 @@ import {
   ensureString
 } 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,
@@ -32,6 +36,8 @@ 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;
@@ -47,6 +53,12 @@ export class WebPubDefaults {
     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;

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);

package/src/webpub/preferences/WebPubPreferencesEditor.ts

@@ -74,6 +74,28 @@ export class WebPubPreferencesEditor implements IPreferencesEditor {
     });
   }
 
+  get iOSPatch(): BooleanPreference {
+      return new BooleanPreference({
+        initialValue: this.preferences.iOSPatch,
+        effectiveValue: this.settings.iOSPatch || false,
+        isEffective: true,
+        onChange: (newValue: boolean | null | undefined) => {
+          this.updatePreference("iOSPatch", newValue || null);
+        }
+      });
+    }
+  
+    get iPadOSPatch(): BooleanPreference {
+      return new BooleanPreference({
+        initialValue: this.preferences.iPadOSPatch,
+        effectiveValue: this.settings.iPadOSPatch || false,
+        isEffective: true,
+        onChange: (newValue: boolean | null | undefined) => {
+          this.updatePreference("iPadOSPatch", newValue || null);
+        }
+      });
+    }
+
   get letterSpacing(): RangePreference<number> {
     return new RangePreference<number>({
       initialValue: this.preferences.letterSpacing,

package/src/webpub/preferences/WebPubSettings.ts

@@ -3,10 +3,14 @@ import { TextAlignment } from "../../preferences/Types";
 import { WebPubDefaults } from "./WebPubDefaults";
 import { WebPubPreferences } from "./WebPubPreferences";
 
+import { sMLWithRequest } from "../../helpers";
+
 export interface IWebPubSettings {
   fontFamily?: string | null,
   fontWeight?: number | null,
   hyphens?: boolean | null,
+  iOSPatch?: boolean | null,
+  iPadOSPatch?: boolean | null,
   letterSpacing?: number | null,
   ligatures?: boolean | null,
   lineHeight?: number | null,
@@ -23,6 +27,8 @@ export class WebPubSettings implements ConfigurableSettings {
   fontFamily: string | null = null;
   fontWeight: number | null = null;
   hyphens: boolean | null = null;
+  iOSPatch: boolean | null = null;
+  iPadOSPatch: boolean | null = null;
   letterSpacing: number | null = null;
   ligatures: boolean | null = null;
   lineHeight: number | null = null;
@@ -45,6 +51,16 @@ export class WebPubSettings implements ConfigurableSettings {
       this.hyphens = typeof preferences.hyphens === "boolean" 
         ? preferences.hyphens 
         : defaults.hyphens ?? null;
+      this.iOSPatch = preferences.iOSPatch === false 
+        ? false 
+        : preferences.iOSPatch === true 
+          ? ((sMLWithRequest.OS.iOS || sMLWithRequest.OS.iPadOS) && sMLWithRequest.iOSRequest === "mobile")
+          : defaults.iOSPatch;
+      this.iPadOSPatch = preferences.iPadOSPatch === false 
+        ? false 
+        : preferences.iPadOSPatch === true 
+          ? (sMLWithRequest.OS.iPadOS && sMLWithRequest.iOSRequest === "desktop") 
+          : defaults.iPadOSPatch;
       this.letterSpacing = preferences.letterSpacing !== undefined 
         ? preferences.letterSpacing 
         : defaults.letterSpacing !== undefined 
@@ -81,6 +97,7 @@ export class WebPubSettings implements ConfigurableSettings {
           ? defaults.wordSpacing 
           : null;
     }
+    
     this.zoom = preferences.zoom !== undefined
       ? preferences.zoom
       : defaults.zoom !== undefined

package/types/src/webpub/css/Properties.d.ts

@@ -5,6 +5,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;
@@ -20,6 +22,8 @@ export declare 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;

package/types/src/webpub/css/WebPubStylesheet.d.ts

@@ -1 +1 @@
-export declare const webPubStylesheet = "\n/* FontFamily */\n\n:root[style*=\"--USER__fontFamily\"] {\n  font-family: var(--USER__fontFamily) !important;\n}\n\n:root[style*=\"--USER__fontFamily\"] * {\n  font-family: revert !important;\n}\n\n/* FontWeight */\n\n:root[style*=\"--USER__fontWeight\"] body {\n  font-weight: var(--USER__fontWeight) !important;\n}\n\n/* Attempt to handle known bolds */\n:root[style*=\"--USER__fontWeight\"] b,\n:root[style*=\"--USER__fontWeight\"] strong {\n  font-weight: bolder;\n}\n\n/* Hyphens */\n\n:root[style*=\"--USER__bodyHyphens\"] {\n  -webkit-hyphens: var(--USER__bodyHyphens) !important;\n  -moz-hyphens: var(--USER__bodyHyphens) !important;\n  -ms-hyphens: var(--USER__bodyHyphens) !important;\n  -epub-hyphens: var(--USER__bodyHyphens) !important;\n  hyphens: var(--USER__bodyHyphens) !important;\n}\n\n:root[style*=\"--USER__bodyHyphens\"] body,\n:root[style*=\"--USER__bodyHyphens\"] p,\n:root[style*=\"--USER__bodyHyphens\"] li,\n:root[style*=\"--USER__bodyHyphens\"] div,\n:root[style*=\"--USER__bodyHyphens\"] dd {\n  -webkit-hyphens: inherit;\n  -moz-hyphens: inherit;\n  -ms-hyphens: inherit;\n  -epub-hyphens: inherit;\n  hyphens: inherit;\n}\n\n/* LetterSpacing */\n\n:root[style*=\"--USER__letterSpacing\"] h1,\n:root[style*=\"--USER__letterSpacing\"] h2,\n:root[style*=\"--USER__letterSpacing\"] h3,\n:root[style*=\"--USER__letterSpacing\"] h4,\n:root[style*=\"--USER__letterSpacing\"] h5,\n:root[style*=\"--USER__letterSpacing\"] h6,\n:root[style*=\"--USER__letterSpacing\"] p,\n:root[style*=\"--USER__letterSpacing\"] li,\n:root[style*=\"--USER__letterSpacing\"] div,\n:root[style*=\"--USER__letterSpacing\"] dt,\n:root[style*=\"--USER__letterSpacing\"] dd {\n  letter-spacing: var(--USER__letterSpacing);\n  font-variant: none;\n}\n\n/* Ligatures */\n\n:root[style*=\"--USER__ligatures\"] {\n  font-variant-ligatures: var(--USER__ligatures) !important;\n}\n\n:root[style*=\"--USER__ligatures\"] * {\n  font-variant-ligatures: inherit !important;\n}\n\n/* LineHeight */\n\n:root[style*=\"--USER__lineHeight\"] {\n  line-height: var(--USER__lineHeight) !important;\n}\n\n:root[style*=\"--USER__lineHeight\"] body,\n:root[style*=\"--USER__lineHeight\"] p,\n:root[style*=\"--USER__lineHeight\"] li,\n:root[style*=\"--USER__lineHeight\"] div {\n  line-height: inherit;\n}\n\n/* ParagraphIndent */\n\n:root[style*=\"--USER__paraIndent\"] p {\n  text-indent: var(--USER__paraIndent) !important;\n}\n\n:root[style*=\"--USER__paraIndent\"] p *,\n:root[style*=\"--USER__paraIndent\"] p:first-letter {\n  text-indent: 0 !important;\n}\n\n/* ParagraphSpacing */\n\n:root[style*=\"--USER__paraSpacing\"] p {\n  margin-block: var(--USER__paraSpacing) !important;\n}\n\n/* Ruby */\n\n:root[style*=\"readium-noRuby-on\"] body rt,\n:root[style*=\"readium-noRuby-on\"] body rp {\n  display: none;\n}\n\n/* TextAlign */\n\n:root[style*=\"--USER__textAlign\"] {\n  text-align: var(--USER__textAlign);\n}\n\n:root[style*=\"--USER__textAlign\"] body,\n:root[style*=\"--USER__textAlign\"] p:not(blockquote p):not(figcaption p):not(hgroup p),\n:root[style*=\"--USER__textAlign\"] li,\n:root[style*=\"--USER__textAlign\"] dd {\n  text-align: var(--USER__textAlign) !important;\n  -moz-text-align-last: auto !important;\n  -epub-text-align-last: auto !important;\n  text-align-last: auto !important;\n}\n\n/* TextNormalize */\n\n:root[style*=\"readium-a11y-on\"] {\n  font-weight: normal !important;\n  font-style: normal !important;\n}\n\n:root[style*=\"readium-a11y-on\"] *:not(code):not(var):not(kbd):not(samp) {\n  font-family: inherit !important;\n  font-weight: inherit !important;\n  font-style: inherit !important;\n}\n\n:root[style*=\"readium-a11y-on\"] * {\n  text-decoration: none !important;\n  font-variant-caps: normal !important;\n  font-variant-position: normal !important;\n  font-variant-numeric: normal !important;\n}\n\n:root[style*=\"readium-a11y-on\"] sup,\n:root[style*=\"readium-a11y-on\"] sub {\n  font-size: 1rem !important;\n  vertical-align: baseline !important;\n}\n\n/* Word Spacing */\n\n:root[style*=\"--USER__wordSpacing\"] h1,\n:root[style*=\"--USER__wordSpacing\"] h2,\n:root[style*=\"--USER__wordSpacing\"] h3,\n:root[style*=\"--USER__wordSpacing\"] h4,\n:root[style*=\"--USER__wordSpacing\"] h5,\n:root[style*=\"--USER__wordSpacing\"] h6,\n:root[style*=\"--USER__wordSpacing\"] p,\n:root[style*=\"--USER__wordSpacing\"] li,\n:root[style*=\"--USER__wordSpacing\"] div,\n:root[style*=\"--USER__wordSpacing\"] dt,\n:root[style*=\"--USER__wordSpacing\"] dd {\n  word-spacing: var(--USER__wordSpacing);\n}\n\n/* Zoom */\n\n:root {\n  --USER__zoom: 1;\n}\n\n:root[style*=\"--USER__zoom\"] body {\n  zoom: var(--USER__zoom) !important;\n}\n\n@supports selector(figure:has(> img)) {\n  :root[style*=\"--USER__zoom\"] figure:has(> img),\n  :root[style*=\"--USER__zoom\"] figure:has(> video),\n  :root[style*=\"--USER__zoom\"] figure:has(> svg),\n  :root[style*=\"--USER__zoom\"] figure:has(> canvas),\n  :root[style*=\"--USER__zoom\"] figure:has(> iframe),\n  :root[style*=\"--USER__zoom\"] figure:has(> audio),\n  :root[style*=\"--USER__zoom\"] div:has(> img),\n  :root[style*=\"--USER__zoom\"] div:has(> video),\n  :root[style*=\"--USER__zoom\"] div:has(> svg),\n  :root[style*=\"--USER__zoom\"] div:has(> canvas),\n  :root[style*=\"--USER__zoom\"] div:has(> iframe),\n  :root[style*=\"--USER__zoom\"] div:has(> audio),\n  :root[style*=\"--USER__zoom\"] table {\n    zoom: calc(100% / var(--USER__zoom)) !important;\n  }\n\n  :root[style*=\"--USER__zoom\"] figcaption,\n  :root[style*=\"--USER__zoom\"] caption,\n  :root[style*=\"--USER__zoom\"] td,\n  :root[style*=\"--USER__zoom\"] th {\n    zoom: var(--USER__zoom) !important;\n  }\n}\n";
+export declare const webPubStylesheet = "\n/* TextAlign */\n\n:root[style*=\"--USER__textAlign\"] {\n  text-align: var(--USER__textAlign);\n}\n\n:root[style*=\"--USER__textAlign\"] body,\n:root[style*=\"--USER__textAlign\"] p:not([class*=\"title\"]):not(blockquote p):not(figcaption p):not(header p):not(hgroup p):not(div:has(+ *) > h1 + p):not(div:has(+ *) > p:has(+ h1)),\n:root[style*=\"--USER__textAlign\"] li,\n:root[style*=\"--USER__textAlign\"] dd {\n  text-align: var(--USER__textAlign) !important;\n  -moz-text-align-last: auto !important;\n  -epub-text-align-last: auto !important;\n  text-align-last: auto !important;\n}\n\n/* Hyphens */\n\n:root[style*=\"--USER__bodyHyphens\"] {\n  -webkit-hyphens: var(--USER__bodyHyphens) !important;\n  -moz-hyphens: var(--USER__bodyHyphens) !important;\n  -ms-hyphens: var(--USER__bodyHyphens) !important;\n  -epub-hyphens: var(--USER__bodyHyphens) !important;\n  hyphens: var(--USER__bodyHyphens) !important;\n}\n\n:root[style*=\"--USER__bodyHyphens\"] body,\n:root[style*=\"--USER__bodyHyphens\"] p,\n:root[style*=\"--USER__bodyHyphens\"] li,\n:root[style*=\"--USER__bodyHyphens\"] div,\n:root[style*=\"--USER__bodyHyphens\"] dd {\n  -webkit-hyphens: inherit;\n  -moz-hyphens: inherit;\n  -ms-hyphens: inherit;\n  -epub-hyphens: inherit;\n  hyphens: inherit;\n}\n\n/* FontFamily */\n\n:root[style*=\"--USER__fontFamily\"] {\n  font-family: var(--USER__fontFamily) !important;\n}\n\n:root[style*=\"--USER__fontFamily\"] * {\n  font-family: revert !important;\n}\n\n/* TextNormalize */\n\n:root[style*=\"readium-a11y-on\"] {\n  font-weight: normal !important;\n  font-style: normal !important;\n}\n\n:root[style*=\"readium-a11y-on\"] body *:not(code):not(var):not(kbd):not(samp) {\n  font-family: inherit !important;\n  font-weight: inherit !important;\n  font-style: inherit !important;\n}\n\n:root[style*=\"readium-a11y-on\"] body * {\n  text-decoration: none !important;\n  font-variant-caps: normal !important;\n  font-variant-position: normal !important;\n  font-variant-numeric: normal !important;\n}\n\n:root[style*=\"readium-a11y-on\"] sup,\n:root[style*=\"readium-a11y-on\"] sub {\n  font-size: 1rem !important;\n  vertical-align: baseline !important;\n}\n\n/* Zoom */\n\n:root {\n  --USER__zoom: 1;\n}\n\n:root[style*=\"--USER__zoom\"] body {\n  zoom: var(--USER__zoom) !important;\n}\n\n@supports selector(figure:has(> img)) {\n  :root[style*=\"--USER__zoom\"] figure:has(> img),\n  :root[style*=\"--USER__zoom\"] figure:has(> video),\n  :root[style*=\"--USER__zoom\"] figure:has(> svg),\n  :root[style*=\"--USER__zoom\"] figure:has(> canvas),\n  :root[style*=\"--USER__zoom\"] figure:has(> iframe),\n  :root[style*=\"--USER__zoom\"] figure:has(> audio),\n  :root[style*=\"--USER__zoom\"] div:has(> img),\n  :root[style*=\"--USER__zoom\"] div:has(> video),\n  :root[style*=\"--USER__zoom\"] div:has(> svg),\n  :root[style*=\"--USER__zoom\"] div:has(> canvas),\n  :root[style*=\"--USER__zoom\"] div:has(> iframe),\n  :root[style*=\"--USER__zoom\"] div:has(> audio),\n  :root[style*=\"--USER__zoom\"] table {\n    zoom: calc(100% / var(--USER__zoom)) !important;\n  }\n\n  :root[style*=\"--USER__zoom\"] figcaption,\n  :root[style*=\"--USER__zoom\"] caption,\n  :root[style*=\"--USER__zoom\"] td,\n  :root[style*=\"--USER__zoom\"] th {\n    zoom: var(--USER__zoom) !important;\n  }\n}\n\n/* LineHeight */\n\n:root[style*=\"--USER__lineHeight\"] {\n  line-height: var(--USER__lineHeight) !important;\n}\n\n:root[style*=\"--USER__lineHeight\"] body,\n:root[style*=\"--USER__lineHeight\"] p,\n:root[style*=\"--USER__lineHeight\"] li,\n:root[style*=\"--USER__lineHeight\"] div {\n  line-height: inherit;\n}\n\n/* ParagraphSpacing */\n\n:root[style*=\"--USER__paraSpacing\"] p {\n  margin-block: var(--USER__paraSpacing) !important;\n}\n\n/* ParagraphIndent */\n\n:root[style*=\"--USER__paraIndent\"] p {\n  text-indent: var(--USER__paraIndent) !important;\n}\n\n:root[style*=\"--USER__paraIndent\"] p *,\n:root[style*=\"--USER__paraIndent\"] p:first-letter {\n  text-indent: 0 !important;\n}\n\n/* WordSpacing */\n\n:root[style*=\"--USER__wordSpacing\"] h1,\n:root[style*=\"--USER__wordSpacing\"] h2,\n:root[style*=\"--USER__wordSpacing\"] h3,\n:root[style*=\"--USER__wordSpacing\"] h4,\n:root[style*=\"--USER__wordSpacing\"] h5,\n:root[style*=\"--USER__wordSpacing\"] h6,\n:root[style*=\"--USER__wordSpacing\"] p,\n:root[style*=\"--USER__wordSpacing\"] li,\n:root[style*=\"--USER__wordSpacing\"] div,\n:root[style*=\"--USER__wordSpacing\"] dt,\n:root[style*=\"--USER__wordSpacing\"] dd {\n  word-spacing: var(--USER__wordSpacing);\n}\n\n/* LetterSpacing */\n\n:root[style*=\"--USER__letterSpacing\"] h1,\n:root[style*=\"--USER__letterSpacing\"] h2,\n:root[style*=\"--USER__letterSpacing\"] h3,\n:root[style*=\"--USER__letterSpacing\"] h4,\n:root[style*=\"--USER__letterSpacing\"] h5,\n:root[style*=\"--USER__letterSpacing\"] h6,\n:root[style*=\"--USER__letterSpacing\"] p,\n:root[style*=\"--USER__letterSpacing\"] li,\n:root[style*=\"--USER__letterSpacing\"] div,\n:root[style*=\"--USER__letterSpacing\"] dt,\n:root[style*=\"--USER__letterSpacing\"] dd {\n  letter-spacing: var(--USER__letterSpacing);\n  font-variant: none;\n}\n\n/* FontWeight */\n\n:root[style*=\"--USER__fontWeight\"] body {\n  font-weight: var(--USER__fontWeight) !important;\n}\n\n/* Attempt to handle known bolds */\n:root[style*=\"--USER__fontWeight\"] b,\n:root[style*=\"--USER__fontWeight\"] strong {\n  font-weight: bolder;\n}\n\n/* Ruby */\n\n:root[style*=\"readium-noRuby-on\"] body rt,\n:root[style*=\"readium-noRuby-on\"] body rp {\n  display: none;\n}\n\n/* Ligatures */\n\n:root[style*=\"--USER__ligatures\"] {\n  font-variant-ligatures: var(--USER__ligatures) !important;\n}\n\n:root[style*=\"--USER__ligatures\"] * {\n  font-variant-ligatures: inherit !important;\n}\n";

package/types/src/webpub/css/index.d.ts

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

package/types/src/webpub/preferences/WebPubDefaults.d.ts

@@ -3,6 +3,8 @@ 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;
@@ -18,6 +20,8 @@ export declare 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;

package/types/src/webpub/preferences/WebPubPreferences.d.ts

@@ -4,6 +4,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;
@@ -19,6 +21,8 @@ export declare 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;

package/types/src/webpub/preferences/WebPubPreferencesEditor.d.ts

@@ -15,6 +15,8 @@ export declare class WebPubPreferencesEditor implements IPreferencesEditor {
     get fontFamily(): Preference<string>;
     get fontWeight(): RangePreference<number>;
     get hyphens(): BooleanPreference;
+    get iOSPatch(): BooleanPreference;
+    get iPadOSPatch(): BooleanPreference;
     get letterSpacing(): RangePreference<number>;
     get ligatures(): BooleanPreference;
     get lineHeight(): RangePreference<number>;

package/types/src/webpub/preferences/WebPubSettings.d.ts

@@ -6,6 +6,8 @@ export interface IWebPubSettings {
     fontFamily?: string | null;
     fontWeight?: number | null;
     hyphens?: boolean | null;
+    iOSPatch?: boolean | null;
+    iPadOSPatch?: boolean | null;
     letterSpacing?: number | null;
     ligatures?: boolean | null;
     lineHeight?: number | null;
@@ -21,6 +23,8 @@ export declare class WebPubSettings implements ConfigurableSettings {
     fontFamily: string | null;
     fontWeight: number | null;
     hyphens: boolean | null;
+    iOSPatch: boolean | null;
+    iPadOSPatch: boolean | null;
     letterSpacing: number | null;
     ligatures: boolean | null;
     lineHeight: number | null;

package/src/webpub/css/WebPubStylesheet.ts

@@ -1,204 +0,0 @@
-// WebPubCSS is equivalent to ReadiumCSS for WebPub
-
-export const webPubStylesheet = `
-/* FontFamily */
-
-:root[style*="--USER__fontFamily"] {
-  font-family: var(--USER__fontFamily) !important;
-}
-
-:root[style*="--USER__fontFamily"] * {
-  font-family: revert !important;
-}
-
-/* FontWeight */
-
-:root[style*="--USER__fontWeight"] body {
-  font-weight: var(--USER__fontWeight) !important;
-}
-
-/* Attempt to handle known bolds */
-:root[style*="--USER__fontWeight"] b,
-:root[style*="--USER__fontWeight"] strong {
-  font-weight: bolder;
-}
-
-/* Hyphens */
-
-:root[style*="--USER__bodyHyphens"] {
-  -webkit-hyphens: var(--USER__bodyHyphens) !important;
-  -moz-hyphens: var(--USER__bodyHyphens) !important;
-  -ms-hyphens: var(--USER__bodyHyphens) !important;
-  -epub-hyphens: var(--USER__bodyHyphens) !important;
-  hyphens: var(--USER__bodyHyphens) !important;
-}
-
-:root[style*="--USER__bodyHyphens"] body,
-:root[style*="--USER__bodyHyphens"] p,
-:root[style*="--USER__bodyHyphens"] li,
-:root[style*="--USER__bodyHyphens"] div,
-:root[style*="--USER__bodyHyphens"] dd {
-  -webkit-hyphens: inherit;
-  -moz-hyphens: inherit;
-  -ms-hyphens: inherit;
-  -epub-hyphens: inherit;
-  hyphens: inherit;
-}
-
-/* LetterSpacing */
-
-:root[style*="--USER__letterSpacing"] h1,
-:root[style*="--USER__letterSpacing"] h2,
-:root[style*="--USER__letterSpacing"] h3,
-:root[style*="--USER__letterSpacing"] h4,
-:root[style*="--USER__letterSpacing"] h5,
-:root[style*="--USER__letterSpacing"] h6,
-:root[style*="--USER__letterSpacing"] p,
-:root[style*="--USER__letterSpacing"] li,
-:root[style*="--USER__letterSpacing"] div,
-:root[style*="--USER__letterSpacing"] dt,
-:root[style*="--USER__letterSpacing"] dd {
-  letter-spacing: var(--USER__letterSpacing);
-  font-variant: none;
-}
-
-/* Ligatures */
-
-:root[style*="--USER__ligatures"] {
-  font-variant-ligatures: var(--USER__ligatures) !important;
-}
-
-:root[style*="--USER__ligatures"] * {
-  font-variant-ligatures: inherit !important;
-}
-
-/* LineHeight */
-
-:root[style*="--USER__lineHeight"] {
-  line-height: var(--USER__lineHeight) !important;
-}
-
-:root[style*="--USER__lineHeight"] body,
-:root[style*="--USER__lineHeight"] p,
-:root[style*="--USER__lineHeight"] li,
-:root[style*="--USER__lineHeight"] div {
-  line-height: inherit;
-}
-
-/* ParagraphIndent */
-
-:root[style*="--USER__paraIndent"] p {
-  text-indent: var(--USER__paraIndent) !important;
-}
-
-:root[style*="--USER__paraIndent"] p *,
-:root[style*="--USER__paraIndent"] p:first-letter {
-  text-indent: 0 !important;
-}
-
-/* ParagraphSpacing */
-
-:root[style*="--USER__paraSpacing"] p {
-  margin-block: var(--USER__paraSpacing) !important;
-}
-
-/* Ruby */
-
-:root[style*="readium-noRuby-on"] body rt,
-:root[style*="readium-noRuby-on"] body rp {
-  display: none;
-}
-
-/* TextAlign */
-
-:root[style*="--USER__textAlign"] {
-  text-align: var(--USER__textAlign);
-}
-
-:root[style*="--USER__textAlign"] body,
-:root[style*="--USER__textAlign"] p:not(blockquote p):not(figcaption p):not(hgroup p),
-:root[style*="--USER__textAlign"] li,
-:root[style*="--USER__textAlign"] dd {
-  text-align: var(--USER__textAlign) !important;
-  -moz-text-align-last: auto !important;
-  -epub-text-align-last: auto !important;
-  text-align-last: auto !important;
-}
-
-/* TextNormalize */
-
-:root[style*="readium-a11y-on"] {
-  font-weight: normal !important;
-  font-style: normal !important;
-}
-
-:root[style*="readium-a11y-on"] *:not(code):not(var):not(kbd):not(samp) {
-  font-family: inherit !important;
-  font-weight: inherit !important;
-  font-style: inherit !important;
-}
-
-:root[style*="readium-a11y-on"] * {
-  text-decoration: none !important;
-  font-variant-caps: normal !important;
-  font-variant-position: normal !important;
-  font-variant-numeric: normal !important;
-}
-
-:root[style*="readium-a11y-on"] sup,
-:root[style*="readium-a11y-on"] sub {
-  font-size: 1rem !important;
-  vertical-align: baseline !important;
-}
-
-/* Word Spacing */
-
-:root[style*="--USER__wordSpacing"] h1,
-:root[style*="--USER__wordSpacing"] h2,
-:root[style*="--USER__wordSpacing"] h3,
-:root[style*="--USER__wordSpacing"] h4,
-:root[style*="--USER__wordSpacing"] h5,
-:root[style*="--USER__wordSpacing"] h6,
-:root[style*="--USER__wordSpacing"] p,
-:root[style*="--USER__wordSpacing"] li,
-:root[style*="--USER__wordSpacing"] div,
-:root[style*="--USER__wordSpacing"] dt,
-:root[style*="--USER__wordSpacing"] dd {
-  word-spacing: var(--USER__wordSpacing);
-}
-
-/* Zoom */
-
-:root {
-  --USER__zoom: 1;
-}
-
-:root[style*="--USER__zoom"] body {
-  zoom: var(--USER__zoom) !important;
-}
-
-@supports selector(figure:has(> img)) {
-  :root[style*="--USER__zoom"] figure:has(> img),
-  :root[style*="--USER__zoom"] figure:has(> video),
-  :root[style*="--USER__zoom"] figure:has(> svg),
-  :root[style*="--USER__zoom"] figure:has(> canvas),
-  :root[style*="--USER__zoom"] figure:has(> iframe),
-  :root[style*="--USER__zoom"] figure:has(> audio),
-  :root[style*="--USER__zoom"] div:has(> img),
-  :root[style*="--USER__zoom"] div:has(> video),
-  :root[style*="--USER__zoom"] div:has(> svg),
-  :root[style*="--USER__zoom"] div:has(> canvas),
-  :root[style*="--USER__zoom"] div:has(> iframe),
-  :root[style*="--USER__zoom"] div:has(> audio),
-  :root[style*="--USER__zoom"] table {
-    zoom: calc(100% / var(--USER__zoom)) !important;
-  }
-
-  :root[style*="--USER__zoom"] figcaption,
-  :root[style*="--USER__zoom"] caption,
-  :root[style*="--USER__zoom"] td,
-  :root[style*="--USER__zoom"] th {
-    zoom: var(--USER__zoom) !important;
-  }
-}
-`;