@readium/navigator 1.3.4 → 2.0.0-beta.10

package/src/epub/css/ReadiumCSS.ts

@@ -0,0 +1,339 @@
+import { LineLengths } from "../../helpers";
+import { getContentWidth } from "../../helpers/dimensions";
+import { LayoutStrategy } from "../../preferences";
+import { EpubSettings } from "../preferences/EpubSettings";
+import { IUserProperties, RSProperties, UserProperties } from "./Properties";
+
+export interface IReadiumCSS {
+  rsProperties: RSProperties;
+  userProperties: UserProperties;
+  lineLengths: LineLengths;
+  container: HTMLElement;
+  constraint: number;
+  layoutStrategy?: LayoutStrategy | null;
+}
+
+export class ReadiumCSS {
+  rsProperties: RSProperties;
+  userProperties: UserProperties;
+  lineLengths: LineLengths;
+  container: HTMLElement;
+  containerParent: HTMLElement;
+  constraint: number;
+  layoutStrategy: LayoutStrategy;
+  private cachedColCount: number | null | undefined;
+  private effectiveContainerWidth: number;
+
+  constructor(props: IReadiumCSS) {
+    this.rsProperties = props.rsProperties;
+    this.userProperties = props.userProperties;
+    this.lineLengths = props.lineLengths;
+    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);
+  }
+
+  update(settings: EpubSettings) {
+    // We need to keep the column count reference for resizeHandler
+    this.cachedColCount = settings.columnCount;
+
+    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;
+
+    if (settings.scrollPaddingBottom !== this.rsProperties.scrollPaddingBottom)
+      this.rsProperties.scrollPaddingBottom = settings.scrollPaddingBottom;
+
+    // if (settings.scrollPaddingLeft !== this.rsProperties.scrollPaddingLeft)
+    //   this.rsProperties.scrollPaddingLeft = settings.scrollPaddingLeft;
+
+    // if (settings.scrollPaddingRight !== this.rsProperties.scrollPaddingRight)
+    //   this.rsProperties.scrollPaddingRight = settings.scrollPaddingRight;
+
+    if (settings.scrollPaddingTop !== this.rsProperties.scrollPaddingTop)
+      this.rsProperties.scrollPaddingTop = settings.scrollPaddingTop;
+
+    // This has to be updated before pagination
+    // otherwise the metrics won’t be correct for line length
+    this.lineLengths.update({
+      fontFace: settings.fontFamily,
+      letterSpacing: settings.letterSpacing,
+      pageGutter: settings.pageGutter,
+      wordSpacing: settings.wordSpacing,
+      optimalChars: settings.optimalLineLength,
+      minChars: settings.minimalLineLength,
+      maxChars: settings.maximalLineLength
+    });
+
+    const layout = this.updateLayout(settings.fontSize, settings.deprecatedFontSize || settings.iOSPatch, settings.scroll, settings.columnCount);
+
+    if (layout?.effectiveContainerWidth)
+      this.effectiveContainerWidth = layout?.effectiveContainerWidth;
+    
+    const updated: IUserProperties = {
+      a11yNormalize: settings.textNormalization,
+      appearance: settings.theme,
+      backgroundColor: settings.backgroundColor,
+      blendFilter: settings.blendFilter,
+      bodyHyphens: typeof settings.hyphens !== "boolean" 
+        ? null 
+        : settings.hyphens 
+          ? "auto" 
+          : "none",
+      colCount: layout?.colCount,
+      darkenFilter: settings.darkenFilter,
+      deprecatedFontSize: settings.deprecatedFontSize,
+      fontFamily: settings.fontFamily,
+      fontOpticalSizing: typeof settings.fontOpticalSizing !== "boolean" 
+        ? null 
+        : settings.fontOpticalSizing 
+          ? "auto" 
+          : "none",
+      fontSize: settings.fontSize,
+      fontSizeNormalize: settings.fontSizeNormalize,
+      fontWeight: settings.fontWeight,
+      fontWidth: settings.fontWidth,
+      invertFilter: settings.invertFilter,
+      invertGaijiFilter: settings.invertGaijiFilter,
+      iOSPatch: settings.iOSPatch,
+      iPadOSPatch: settings.iPadOSPatch,
+      letterSpacing: settings.letterSpacing,
+      ligatures: typeof settings.ligatures !== "boolean" 
+        ? null 
+        : settings.ligatures 
+          ? "common-ligatures" 
+          : "none",
+      lineHeight: settings.lineHeight,
+      lineLength: layout?.effectiveLineLength,
+      linkColor: settings.linkColor,
+      noRuby: settings.noRuby,
+      paraIndent: settings.paragraphIndent,
+      paraSpacing: settings.paragraphSpacing,
+      selectionBackgroundColor: settings.selectionBackgroundColor,
+      selectionTextColor: settings.selectionTextColor,
+      textAlign: settings.textAlign,
+      textColor: settings.textColor,
+      view: typeof settings.scroll !== "boolean" 
+        ? null 
+        : settings.scroll 
+          ? "scroll" 
+          : "paged",
+      visitedColor: settings.visitedColor,
+      wordSpacing: settings.wordSpacing
+    };
+
+    this.userProperties = new UserProperties(updated);
+  }
+
+  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, ignoreCompensation);
+    } else {
+      return this.paginate(scale, ignoreCompensation, colCount);
+    }
+  }
+
+  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
+      : ignoreCompensation 
+        ? zoomFactor 
+        : 1;
+
+    return {
+      zoomFactor: zoomFactor,
+      zoomCompensation: zoomCompensation,
+      optimal: Math.round(this.lineLengths.optimalLineLength) * zoomFactor,
+      minimal: this.lineLengths.minimalLineLength !== null 
+        ? Math.round(this.lineLengths.minimalLineLength * zoomFactor) 
+        : null,
+      maximal: this.lineLengths.maximalLineLength !== null 
+        ? Math.round(this.lineLengths.maximalLineLength * zoomFactor) 
+        : null
+    }
+  }
+
+  // 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, ignoreCompensation: boolean | null, colCount?: number | null) {
+    const constrainedWidth = Math.round(getContentWidth(this.containerParent) - (this.constraint));
+    const metrics = this.getCompensatedMetrics(scale, ignoreCompensation);
+    const zoomCompensation = metrics.zoomCompensation;
+    const optimal = metrics.optimal;
+    const minimal = metrics.minimal;
+    const maximal = metrics.maximal;
+
+    let RCSSColCount = 1;
+    let effectiveContainerWidth = constrainedWidth;
+
+    if (colCount === undefined) {
+      return { 
+        colCount: undefined, 
+        effectiveContainerWidth: effectiveContainerWidth, 
+        effectiveLineLength: Math.round((effectiveContainerWidth / RCSSColCount) * zoomCompensation) 
+      };
+    }
+    
+    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;
+        }
+      }
+    } 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));
+          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);
+        } else {
+          RCSSColCount = colCount;
+        }
+        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 
+      }
+    }
+
+    return { 
+      colCount: RCSSColCount, 
+      effectiveContainerWidth: effectiveContainerWidth, 
+      effectiveLineLength: Math.round(((effectiveContainerWidth / RCSSColCount) / (scale && scale >= 1 ? scale : 1)) * zoomCompensation)
+    };
+  }
+
+  // This behaves as paginate where colCount = 1
+  private computeScrollLength(scale: number | null, ignoreCompensation: boolean | null) {
+    const constrainedWidth = Math.round(getContentWidth(this.containerParent) - (this.constraint));
+    const metrics = this.getCompensatedMetrics(scale && (scale < 1 || ignoreCompensation) ? scale : 1, ignoreCompensation);
+    const zoomCompensation = metrics.zoomCompensation;
+    const optimal = metrics.optimal;
+    const maximal = metrics.maximal;
+
+    let RCSSColCount = undefined;
+    let effectiveContainerWidth = constrainedWidth;
+    let effectiveLineLength = Math.round(optimal * zoomCompensation);
+
+    if (this.layoutStrategy === LayoutStrategy.margin) {
+      const computedWidth = Math.min(Math.round(optimal * zoomCompensation), constrainedWidth);
+      effectiveLineLength = ignoreCompensation ? 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 = ignoreCompensation ? computedWidth : Math.round(computedWidth * zoomCompensation);
+      }
+    }
+
+    return { 
+      colCount: RCSSColCount, 
+      effectiveContainerWidth: effectiveContainerWidth, 
+      effectiveLineLength: effectiveLineLength
+    }
+  }
+
+  setContainerWidth() {
+    this.container.style.width = `${ this.effectiveContainerWidth }px`;
+  }
+
+  resizeHandler() {
+    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;
+    this.container.style.width = `${ this.effectiveContainerWidth }px`;
+  }
+}

package/src/epub/css/index.ts

@@ -0,0 +1,2 @@
+export * from "./Properties";
+export * from "./ReadiumCSS";

package/src/epub/frame/FrameBlobBuilder.ts

@@ -82,11 +82,13 @@ export default class FrameBlobBuider {
     private readonly item: Link;
     private readonly burl: string;
     private readonly pub: Publication;
+    private readonly cssProperties?: { [key: string]: string };
 
-    constructor(pub: Publication, baseURL: string, item: Link) {
+    constructor(pub: Publication, baseURL: string, item: Link, cssProperties?: { [key: string]: string }) {
         this.pub = pub;
         this.item = item;
         this.burl = item.toURL(baseURL) || "";
+        this.cssProperties = cssProperties;
     }
 
     public async build(fxl = false): Promise<string> {
@@ -113,7 +115,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);
+        return this.finalizeDOM(doc, this.burl, this.item.mediaType, fxl, this.cssProperties);
     }
 
     private buildImageFrame(): string {
@@ -150,7 +152,14 @@ export default class FrameBlobBuider {
         return false;
     }
 
-    private finalizeDOM(doc: Document, base: string | undefined, mediaType: MediaType, fxl = false): string {
+    private setProperties(cssProperties: { [key: string]: string }, doc: Document) {
+        for (const key in cssProperties) {
+            const value = cssProperties[key];
+            if (value) doc.documentElement.style.setProperty(key, value);
+        }
+    }
+
+    private finalizeDOM(doc: Document, base: string | undefined, mediaType: MediaType, fxl = false, cssProperties?: { [key: string]: string }): string {
         if(!doc) return "";
 
         // Inject styles
@@ -159,18 +168,16 @@ export default class FrameBlobBuider {
             const rcssBefore = styleify(doc, cached("ReadiumCSS-before", () => blobify(stripCSS(readiumCSSBefore), "text/css")));
             doc.head.firstChild ? doc.head.firstChild.before(rcssBefore) : doc.head.appendChild(rcssBefore);
 
-            // Patch
-            const patch = doc.createElement("style");
-            patch.dataset.readium = "true";
-            patch.innerHTML = `audio[controls] { width: revert; height: revert; }`; // https://github.com/readium/readium-css/issues/94
-            rcssBefore.after(patch);
-
             // Readium CSS defaults
             if(!this.hasStyle(doc))
                 rcssBefore.after(styleify(doc, cached("ReadiumCSS-default", () => blobify(stripCSS(readiumCSSDefault), "text/css"))))
 
             // Readium CSS After
             doc.head.appendChild(styleify(doc, cached("ReadiumCSS-after", () => blobify(stripCSS(readiumCSSAfter), "text/css"))));
+
+            if (cssProperties) {
+                this.setProperties(cssProperties, doc);
+            }
         }
 
         // Set all <img> elements to high priority
@@ -183,6 +190,49 @@ export default class FrameBlobBuider {
         doc.body.querySelectorAll("img").forEach((img) => {
             img.setAttribute("fetchpriority", "high");
         });
+
+        // We need to ensure that lang is set on the root element 
+        // since it is used for settings such as font-family, hyphens, ligatures, etc.
+        // but also screen readers, etc.
+        // Metadata’s effectiveReadingProgression uses first item in array as primary language 
+        // so we keep it consistent.
+        if (mediaType.isHTML && this.pub.metadata.languages?.[0]) {
+            const primaryLanguage = this.pub.metadata.languages[0];
+
+            if (mediaType === MediaType.XHTML) {
+                // InDesign is infamous for setting xml:lang on the body instead of the root element
+                // So we have to check whether lang is set on the body and move it to the root element
+                const rootLang = document.documentElement.lang || document.documentElement.getAttribute("xml:lang");
+                const bodyLang = document.body.lang || document.body.getAttribute("xml:lang");
+                if (bodyLang && !rootLang) {
+                    document.documentElement.lang = bodyLang;
+                    document.documentElement.setAttribute("xml:lang", bodyLang);
+                    document.body.removeAttribute("xml:lang");
+                    document.body.removeAttribute("lang");
+                } else if (!rootLang) {
+                    document.documentElement.lang = primaryLanguage;
+                    document.documentElement.setAttribute("xml:lang", primaryLanguage);
+                }
+            } else if (
+                mediaType === MediaType.HTML && 
+                !document.documentElement.lang
+            ) {
+                document.documentElement.lang = primaryLanguage;
+            }
+        }
+
+        // We need to ensure that dir is set on the root element if rtl
+        // Since body can bubble up, we also need to check it’s not here.
+        // https://github.com/readium/readium-css/blob/develop/docs/CSS03-injection_and_pagination.md#be-cautious-the-direction-propagates
+
+        // TODO: ReadiumCSS stylesheets are injected as LTR/default no matter what so disabled ATM
+        /* if (
+            !document.documentElement.dir &&
+            !document.body.dir && 
+            this.pub.metadata.effectiveReadingProgression === ReadingProgression.rtl
+        ) {
+            document.documentElement.dir = this.pub.metadata.effectiveReadingProgression;
+        } */
     
         if(base !== undefined) {
             // Set all URL bases. Very convenient!

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 {
@@ -8,6 +9,7 @@ export class FrameManager {
     private loader: Loader | undefined;
     public readonly source: string;
     private comms: FrameComms | undefined;
+    private hidden: boolean = true;
     private destroyed: boolean = false;
 
     private currModules: ModuleName[] = [];
@@ -67,6 +69,7 @@ export class FrameManager {
         this.frame.style.setProperty("aria-hidden", "true");
         this.frame.style.opacity = "0";
         this.frame.style.pointerEvents = "none";
+        this.hidden = true;
         if(this.frame.parentElement) {
             if(this.comms === undefined || !this.comms.ready) return;
             return new Promise((res, _) => {
@@ -92,9 +95,15 @@ export class FrameManager {
                         this.frame.style.removeProperty("aria-hidden");
                         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();
@@ -104,6 +113,19 @@ export class FrameManager {
         });
     }
 
+    setCSSProperties(properties: { [key: string]: string }) {
+        if(this.destroyed || !this.frame.contentWindow) return;
+        
+        // We need to resume and halt postMessage to update the properties
+        // if the frame is hidden since it’s been halted in hide()
+        if (this.hidden) {
+            if (this.comms) this.comms?.resume();
+            else this.comms = new FrameComms(this.frame.contentWindow!, this.source);
+        }
+        this.comms?.send("update_properties", properties);
+        if (this.hidden) this.comms?.halt();
+    }
+
     get iframe() {
         if(this.destroyed) throw Error("Trying to use frame when it doesn't exist");
         return this.frame;

package/src/epub/frame/FramePoolManager.ts

@@ -10,14 +10,17 @@ export class FramePoolManager {
     private readonly container: HTMLElement;
     private readonly positions: Locator[];
     private _currentFrame: FrameManager | undefined;
+    private currentCssProperties: { [key: string]: string } | undefined;
     private readonly pool: Map<string, FrameManager> = new Map();
     private readonly blobs: Map<string, string> = new Map();
     private readonly inprogress: Map<string, Promise<void>> = new Map();
+    private pendingUpdates: Map<string, { inPool: boolean }> = new Map();
     private currentBaseURL: string | undefined;
 
-    constructor(container: HTMLElement, positions: Locator[]) {
+    constructor(container: HTMLElement, positions: Locator[], cssProperties?: { [key: string]: string }) {
         this.container = container;
         this.positions = positions;
+        this.currentCssProperties = cssProperties;
     }
 
     async destroy() {
@@ -80,6 +83,8 @@ export class FramePoolManager {
                 if(!this.pool.has(href)) return;
                 await this.pool.get(href)?.destroy();
                 this.pool.delete(href);
+                if(this.pendingUpdates.has(href))
+                    this.pendingUpdates.set(href, { inPool: false });
             });
 
             // Check if base URL of publication has changed
@@ -91,11 +96,31 @@ export class FramePoolManager {
             this.currentBaseURL = pub.baseURL;
 
             const creator = async (href: string) => {
+                if(force) {
+                    // Revoke all blobs so that CSSProperties are not stale
+                    // When using force, we switch scroll/paginated
+                    // If this property is not up to date, it creates issues
+                    // when navigating backwards, where paginated will go the
+                    // start of the resource instead of the end due to the
+                    // corrupted width ColumnSnapper (injectables) gets on init
+                    this.blobs.forEach(v => URL.revokeObjectURL(v));
+                    this.blobs.clear();
+                    this.pendingUpdates.clear();
+                }
+                if(this.pendingUpdates.has(href) && this.pendingUpdates.get(href)?.inPool === false) {
+                    const url = this.blobs.get(href);
+                    if(url) {
+                        URL.revokeObjectURL(url);
+                        this.blobs.delete(href);
+                        this.pendingUpdates.delete(href);
+                    }
+                }
                 if(this.pool.has(href)) {
                     const fm = this.pool.get(href)!;
                     if(!this.blobs.has(href)) {
                         await fm.destroy();
                         this.pool.delete(href);
+                        this.pendingUpdates.delete(href);
                     } else {
                         await fm.load(modules);
                         return;
@@ -104,7 +129,7 @@ export class FramePoolManager {
                 const itm = pub.readingOrder.findWithHref(href);
                 if(!itm) return; // TODO throw?
                 if(!this.blobs.has(href)) {
-                    const blobBuilder = new FrameBlobBuider(pub, this.currentBaseURL || "", itm);
+                    const blobBuilder = new FrameBlobBuider(pub, this.currentBaseURL || "", itm, this.currentCssProperties);
                     const blobURL = await blobBuilder.build();
                     this.blobs.set(href, blobURL);
                 }
@@ -130,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;
             }
@@ -144,6 +168,40 @@ export class FramePoolManager {
         this.inprogress.delete(newHref); // Delete it from the in progress map!
     }
 
+    setCSSProperties(properties: { [key: string]: string }) {
+        const deepCompare = (obj1: { [key: string]: string }, obj2: { [key: string]: string }) => {
+            const keys1 = Object.keys(obj1);
+            const keys2 = Object.keys(obj2);
+          
+            if (keys1.length !== keys2.length) {
+              return false;
+            }
+          
+            for (const key of keys1) {
+              if (obj1[key] !== obj2[key]) {
+                return false;
+              }
+            }
+          
+            return true;
+        };
+
+        // If CSSProperties have changed, we update the currentCssProperties,
+        // and set the CSS Properties to all frames already in the pool
+        // We also need to invalidate the blobs and recreate them with the new properties.
+        // We do that in update, by updating them when needed (they are added into the pool)
+        // so that we do not invalidate and recreate blobs over and over again.
+        if(!deepCompare(this.currentCssProperties || {}, properties)) {
+            this.currentCssProperties = properties;
+            this.pool.forEach((frame) => {
+                frame.setCSSProperties(properties);
+            });
+            for (const href of this.blobs.keys()) {
+                this.pendingUpdates.set(href, { inPool: this.pool.has(href) });
+            }
+        }
+    }
+
     get currentFrames(): (FrameManager | undefined)[] {
         return [this._currentFrame];
     }