@readium/navigator 2.2.0 → 2.2.1

package/src/webpub/preferences/WebPubPreferencesEditor.ts

@@ -0,0 +1,193 @@
+import { Feature, Metadata } from "@readium/shared";
+
+import { IPreferencesEditor } from "../../preferences/PreferencesEditor";
+import { WebPubPreferences } from "./WebPubPreferences";
+import { WebPubSettings } from "./WebPubSettings";
+import { BooleanPreference, EnumPreference, Preference, RangePreference } from "../../preferences/Preference";
+import { 
+  fontWeightRangeConfig, 
+  letterSpacingRangeConfig, 
+  lineHeightRangeConfig, 
+  paragraphIndentRangeConfig, 
+  paragraphSpacingRangeConfig, 
+  TextAlignment, 
+  wordSpacingRangeConfig, 
+  zoomRangeConfig 
+} from "../../preferences/Types";
+export class WebPubPreferencesEditor implements IPreferencesEditor {
+  preferences: WebPubPreferences;
+  private settings: WebPubSettings;
+  private metadata: Metadata | null;
+
+  constructor(initialPreferences: WebPubPreferences, settings: WebPubSettings, metadata: Metadata) {
+    this.preferences = initialPreferences;
+    this.settings = settings;
+    this.metadata = metadata;
+  }
+
+  clear() {
+    this.preferences = new WebPubPreferences({});
+  }
+
+  private updatePreference<K extends keyof WebPubPreferences>(key: K, value: WebPubPreferences[K]) {
+    this.preferences[key] = value;
+  }
+
+  get fontFamily(): Preference<string> {
+    return new Preference<string>({
+      initialValue: this.preferences.fontFamily,
+      effectiveValue: this.settings.fontFamily || null,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: string | null | undefined) => {
+        this.updatePreference("fontFamily", newValue || null);
+      }
+    });
+  }
+
+  get fontWeight(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.fontWeight,
+      effectiveValue: this.settings.fontWeight || 400,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("fontWeight", newValue || null);
+      },
+      supportedRange: fontWeightRangeConfig.range,
+      step: fontWeightRangeConfig.step
+    });
+  }
+
+  get hyphens(): BooleanPreference {
+    return new BooleanPreference({
+      initialValue: this.preferences.hyphens,
+      effectiveValue: this.settings.hyphens || false,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: boolean | null | undefined) => {
+        this.updatePreference("hyphens", newValue || null);
+      }
+    });
+  }
+
+  get letterSpacing(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.letterSpacing,
+      effectiveValue: this.settings.letterSpacing || 0,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("letterSpacing", newValue || null);
+      },
+      supportedRange: letterSpacingRangeConfig.range,
+      step: letterSpacingRangeConfig.step
+    });
+  }
+
+  get ligatures(): BooleanPreference {
+    return new BooleanPreference({
+      initialValue: this.preferences.ligatures,
+      effectiveValue: this.settings.ligatures || true,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: boolean | null | undefined) => {
+        this.updatePreference("ligatures", newValue || null);
+      }
+    });
+  }
+
+  get lineHeight(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.lineHeight,
+      effectiveValue: this.settings.lineHeight,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("lineHeight", newValue || null);
+      },
+      supportedRange: lineHeightRangeConfig.range,
+      step: lineHeightRangeConfig.step
+    });
+  }
+
+  get noRuby(): BooleanPreference {
+    return new BooleanPreference({
+      initialValue: this.preferences.noRuby,
+      effectiveValue: this.settings.noRuby || false,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: boolean | null | undefined) => {
+        this.updatePreference("noRuby", newValue || null);
+      }
+    });
+  }
+
+  get paragraphIndent(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.paragraphIndent,
+      effectiveValue: this.settings.paragraphIndent || 0,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("paragraphIndent", newValue || null);
+      },
+      supportedRange: paragraphIndentRangeConfig.range,
+      step: paragraphIndentRangeConfig.step
+    });
+  }
+
+  get paragraphSpacing(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.paragraphSpacing,
+      effectiveValue: this.settings.paragraphSpacing || 0,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("paragraphSpacing", newValue || null);
+      },
+      supportedRange: paragraphSpacingRangeConfig.range,
+      step: paragraphSpacingRangeConfig.step
+    });
+  }
+
+  get textAlign(): EnumPreference<TextAlignment> {
+    return new EnumPreference<TextAlignment>({
+      initialValue: this.preferences.textAlign,
+      effectiveValue: this.settings.textAlign || TextAlignment.start,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: TextAlignment | null | undefined) => {
+        this.updatePreference("textAlign", newValue || null);
+      },
+      supportedValues: Object.values(TextAlignment)
+    });
+  }
+
+  get textNormalization(): BooleanPreference {
+    return new BooleanPreference({
+      initialValue: this.preferences.textNormalization,
+      effectiveValue: this.settings.textNormalization || false,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: boolean | null | undefined) => {
+        this.updatePreference("textNormalization", newValue || null);
+      }
+    });
+  }
+
+  get wordSpacing(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.wordSpacing,
+      effectiveValue: this.settings.wordSpacing || 0,
+      isEffective: this.metadata?.accessibility?.feature?.includes(Feature.DISPLAY_TRANSFORMABILITY) ?? false,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("wordSpacing", newValue || null);
+      },
+      supportedRange: wordSpacingRangeConfig.range,
+      step: wordSpacingRangeConfig.step
+    });
+  }
+
+  get zoom(): RangePreference<number> {
+    return new RangePreference<number>({
+      initialValue: this.preferences.zoom,
+      effectiveValue: this.settings.zoom || 1,
+      isEffective: CSS.supports("zoom", "1") ?? false,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("zoom", newValue || null);
+      },
+      supportedRange: zoomRangeConfig.range,
+      step: zoomRangeConfig.step
+    });
+  }
+}

package/src/webpub/preferences/WebPubSettings.ts

@@ -0,0 +1,88 @@
+import { ConfigurableSettings } from "../../preferences/Configurable";
+import { TextAlignment } from "../../preferences/Types";
+import { WebPubDefaults } from "./WebPubDefaults";
+import { WebPubPreferences } from "./WebPubPreferences";
+
+export interface IWebPubSettings {
+  fontFamily?: string | null,
+  fontWeight?: number | null,
+  hyphens?: boolean | null,
+  letterSpacing?: number | null,
+  ligatures?: boolean | null,
+  lineHeight?: number | null,
+  noRuby?: boolean | null,
+  paragraphIndent?: number | null,
+  paragraphSpacing?: number | null,
+  textAlign?: TextAlignment | null,
+  textNormalization?: boolean | null,
+  wordSpacing?: number | null,
+  zoom?: number | null;
+}
+
+export class WebPubSettings implements ConfigurableSettings {
+  fontFamily: string | null;
+  fontWeight: number | null;
+  hyphens: boolean | null;
+  letterSpacing: number | null;
+  ligatures: boolean | null;
+  lineHeight: number | null;
+  noRuby: boolean | null;
+  paragraphIndent: number | null;
+  paragraphSpacing: number | null;
+  textAlign: TextAlignment | null;
+  textNormalization: boolean | null;
+  wordSpacing: number | null;
+  zoom: number | null;
+
+  constructor(preferences: WebPubPreferences, defaults: WebPubDefaults) {
+    this.fontFamily = preferences.fontFamily || defaults.fontFamily || null;
+    this.fontWeight = preferences.fontWeight !== undefined 
+      ? preferences.fontWeight 
+      : defaults.fontWeight !== undefined 
+        ? defaults.fontWeight 
+        : null;
+    this.hyphens = typeof preferences.hyphens === "boolean" 
+      ? preferences.hyphens 
+      : defaults.hyphens ?? null;
+    this.letterSpacing = preferences.letterSpacing !== undefined 
+      ? preferences.letterSpacing 
+      : defaults.letterSpacing !== undefined 
+        ? defaults.letterSpacing 
+        : null;
+    this.ligatures = typeof preferences.ligatures === "boolean"
+      ? preferences.ligatures 
+      : defaults.ligatures ?? null;
+    this.lineHeight = preferences.lineHeight !== undefined 
+      ? preferences.lineHeight 
+      : defaults.lineHeight !== undefined 
+        ? defaults.lineHeight 
+        : null;
+    this.noRuby = typeof preferences.noRuby === "boolean" 
+      ? preferences.noRuby 
+      : defaults.noRuby ?? null;
+    this.paragraphIndent = preferences.paragraphIndent !== undefined 
+      ? preferences.paragraphIndent 
+      : defaults.paragraphIndent !== undefined 
+        ? defaults.paragraphIndent 
+        : null;
+    this.paragraphSpacing = preferences.paragraphSpacing !== undefined 
+      ? preferences.paragraphSpacing 
+      : defaults.paragraphSpacing !== undefined 
+        ? defaults.paragraphSpacing 
+        : null;
+    this.textAlign = preferences.textAlign || defaults.textAlign || null;
+    this.textNormalization = typeof preferences.textNormalization === "boolean" 
+      ? preferences.textNormalization 
+      : defaults.textNormalization ?? null;
+    this.wordSpacing = preferences.wordSpacing !== undefined 
+      ? preferences.wordSpacing 
+      : defaults.wordSpacing !== undefined 
+        ? defaults.wordSpacing 
+        : null;
+    this.zoom = preferences.zoom !== undefined
+      ? preferences.zoom
+      : defaults.zoom !== undefined
+        ? defaults.zoom
+        : null;
+  }
+}

package/src/webpub/preferences/index.ts

@@ -0,0 +1,4 @@
+export * from "./WebPubDefaults";
+export * from "./WebPubPreferencesEditor";
+export * from "./WebPubPreferences";
+export * from "./WebPubSettings";

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

@@ -0,0 +1,20 @@
+export type BodyHyphens = "auto" | "none";
+export type BoxSizing = "content-box" | "border-box";
+export type FontOpticalSizing = "auto" | "none";
+export type FontWidth = "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | "normal" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | number;
+export type Ligatures = "common-ligatures" | "none";
+export type TypeScale = 1 | 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618;
+export type View = "paged" | "scroll";
+export declare abstract class Properties {
+    constructor();
+    protected toFlag(name: string): string;
+    protected toUnitless(value: number): string;
+    protected toPercentage(value: number, ratio?: boolean): string;
+    protected toVw(value: number): string;
+    protected toVh(value: number): string;
+    protected toPx(value: number): string;
+    protected toRem(value: number): string;
+    abstract toCSSProperties(): {
+        [key: string]: string;
+    };
+}

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

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

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

@@ -1,24 +1,5 @@
 import { TextAlignment } from "../../preferences/Types";
-export type BodyHyphens = "auto" | "none";
-export type BoxSizing = "content-box" | "border-box";
-export type FontOpticalSizing = "auto" | "none";
-export type FontWidth = "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | "normal" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | number;
-export type Ligatures = "common-ligatures" | "none";
-export type TypeScale = 1 | 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618;
-export type View = "paged" | "scroll";
-declare abstract class Properties {
-    constructor();
-    protected toFlag(name: string): string;
-    protected toUnitless(value: number): string;
-    protected toPercentage(value: number, ratio?: boolean): string;
-    protected toVw(value: number): string;
-    protected toVh(value: number): string;
-    protected toPx(value: number): string;
-    protected toRem(value: number): string;
-    abstract toCSSProperties(): {
-        [key: string]: string;
-    };
-}
+import { BodyHyphens, BoxSizing, FontOpticalSizing, FontWidth, Ligatures, Properties, TypeScale, View } from "../../css/Properties";
 export interface IUserProperties {
     advancedSettings?: boolean | null;
     a11yNormalize?: boolean | null;
@@ -178,4 +159,3 @@ export declare class RSProperties extends Properties {
         [key: string]: string;
     };
 }
-export {};

package/types/src/index.d.ts

@@ -4,3 +4,4 @@ export * from './epub';
 export * from './audio';
 export * from './helpers';
 export * from './preferences';
+export * from './css';

package/types/src/preferences/Types.d.ts

@@ -8,6 +8,14 @@ export type RangeConfig = {
     range: [number, number];
     step: number;
 };
+export declare const filterRangeConfig: RangeConfig;
 export declare const fontSizeRangeConfig: RangeConfig;
 export declare const fontWeightRangeConfig: RangeConfig;
 export declare const fontWidthRangeConfig: RangeConfig;
+export declare const letterSpacingRangeConfig: RangeConfig;
+export declare const lineHeightRangeConfig: RangeConfig;
+export declare const lineLengthRangeConfig: RangeConfig;
+export declare const paragraphIndentRangeConfig: RangeConfig;
+export declare const paragraphSpacingRangeConfig: RangeConfig;
+export declare const wordSpacingRangeConfig: RangeConfig;
+export declare const zoomRangeConfig: RangeConfig;

package/types/src/preferences/guards.d.ts

@@ -0,0 +1,9 @@
+export declare function ensureLessThanOrEqual<T extends number | null | undefined>(value: T, compareTo: T): T | undefined;
+export declare function ensureMoreThanOrEqual<T extends number | null | undefined>(value: T, compareTo: T): T | undefined;
+export declare function ensureString(value: string | null | undefined): string | null | undefined;
+export declare function ensureBoolean(value: boolean | null | undefined): boolean | null | undefined;
+export declare function ensureEnumValue<T extends string>(value: T | null | undefined, enumType: Record<T, string>): T | null | undefined;
+export declare function ensureFilter(filter: boolean | number | null | undefined): boolean | number | null | undefined;
+export declare function ensureNonNegative(value: number | null | undefined): number | null | undefined;
+export declare function ensureValueInRange(value: number | null | undefined, range: [number, number]): number | null | undefined;
+export declare function withFallback<T>(value: T | null | undefined, defaultValue: T | null): T | null;

package/types/src/preferences/index.d.ts

@@ -2,3 +2,4 @@ export * from "./Configurable";
 export * from "./Preference";
 export * from "./PreferencesEditor";
 export * from "./Types";
+export * from "./guards";

package/types/src/webpub/WebPubBlobBuilder.d.ts

@@ -3,10 +3,14 @@ export declare class WebPubBlobBuilder {
     private readonly item;
     private readonly burl;
     private readonly pub;
-    constructor(pub: Publication, baseURL: string, item: Link);
+    private readonly cssProperties?;
+    constructor(pub: Publication, baseURL: string, item: Link, cssProperties?: {
+        [key: string]: string;
+    });
     build(): Promise<string>;
     private buildHtmlFrame;
     private hasExecutable;
+    private setProperties;
     private finalizeDOM;
     private serializeAsHTML;
 }

package/types/src/webpub/WebPubFrameManager.d.ts

@@ -5,6 +5,7 @@ export declare class WebPubFrameManager {
     private loader;
     readonly source: string;
     private comms;
+    private hidden;
     private destroyed;
     private currModules;
     constructor(source: string);
@@ -12,6 +13,9 @@ export declare class WebPubFrameManager {
     destroy(): Promise<void>;
     hide(): Promise<void>;
     show(atProgress?: number): Promise<void>;
+    setCSSProperties(properties: {
+        [key: string]: string;
+    }): void;
     get iframe(): HTMLIFrameElement;
     get realSize(): DOMRect;
     get window(): Window;

package/types/src/webpub/WebPubFramePoolManager.d.ts

@@ -4,13 +4,20 @@ import { WebPubFrameManager } from "./WebPubFrameManager";
 export declare class WebPubFramePoolManager {
     private readonly container;
     private _currentFrame;
+    private currentCssProperties;
     private readonly pool;
     private readonly blobs;
     private readonly inprogress;
+    private pendingUpdates;
     private currentBaseURL;
-    constructor(container: HTMLElement);
+    constructor(container: HTMLElement, cssProperties?: {
+        [key: string]: string;
+    });
     destroy(): Promise<void>;
     update(pub: Publication, locator: Locator, modules: ModuleName[]): Promise<void>;
+    setCSSProperties(properties: {
+        [key: string]: string;
+    }): void;
     get currentFrames(): (WebPubFrameManager | undefined)[];
     get currentBounds(): DOMRect;
 }

package/types/src/webpub/WebPubNavigator.d.ts

@@ -1,7 +1,16 @@
 import { Link, Locator, Publication, ReadingProgression } from "@readium/shared";
 import { VisualNavigator, VisualNavigatorViewport } from "../Navigator";
+import { Configurable } from "../preferences/Configurable";
 import { BasicTextSelection, CommsEventKey, FrameClickEvent } from "@readium/navigator-html-injectables";
 import { ManagerEventKey } from "../epub/EpubNavigator";
+import { IWebPubPreferences, WebPubPreferences } from "./preferences/WebPubPreferences";
+import { IWebPubDefaults } from "./preferences/WebPubDefaults";
+import { WebPubSettings } from "./preferences/WebPubSettings";
+import { IPreferencesEditor } from "../preferences/PreferencesEditor";
+export interface WebPubNavigatorConfiguration {
+    preferences: IWebPubPreferences;
+    defaults: IWebPubDefaults;
+}
 export interface WebPubNavigatorListeners {
     frameLoaded: (wnd: Window) => void;
     positionChanged: (locator: Locator) => void;
@@ -13,16 +22,28 @@ export interface WebPubNavigatorListeners {
     handleLocator: (locator: Locator) => boolean;
     textSelected: (selection: BasicTextSelection) => void;
 }
-declare class WebPubNavigator extends VisualNavigator {
+export declare class WebPubNavigator extends VisualNavigator implements Configurable<WebPubSettings, WebPubPreferences> {
     private readonly pub;
     private readonly container;
     private readonly listeners;
     private framePool;
     private currentIndex;
     private currentLocation;
+    private _preferences;
+    private _defaults;
+    private _settings;
+    private _css;
+    private _preferencesEditor;
     private webViewport;
-    constructor(container: HTMLElement, pub: Publication, listeners: WebPubNavigatorListeners, initialPosition?: Locator | undefined);
+    constructor(container: HTMLElement, pub: Publication, listeners: WebPubNavigatorListeners, initialPosition?: Locator | undefined, configuration?: WebPubNavigatorConfiguration);
     load(): Promise<void>;
+    get settings(): Readonly<WebPubSettings>;
+    get preferencesEditor(): IPreferencesEditor;
+    submitPreferences(preferences: WebPubPreferences): Promise<void>;
+    private applyPreferences;
+    private updateCSS;
+    private compileCSSProperties;
+    private commitCSS;
     eventListener(key: CommsEventKey | ManagerEventKey, data: unknown): void;
     private determineModules;
     private attachListener;
@@ -47,4 +68,3 @@ declare class WebPubNavigator extends VisualNavigator {
     private createCurrentLocator;
 }
 export declare const ExperimentalWebPubNavigator: typeof WebPubNavigator;
-export {};

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

@@ -0,0 +1,36 @@
+import { TextAlignment } from "../../preferences/Types";
+import { BodyHyphens, Ligatures, Properties } from "../../css/Properties";
+export interface IWebUserProperties {
+    a11yNormalize?: boolean | null;
+    bodyHyphens?: BodyHyphens | null;
+    fontFamily?: string | null;
+    fontWeight?: number | null;
+    letterSpacing?: number | null;
+    ligatures?: Ligatures | null;
+    lineHeight?: number | null;
+    noRuby?: boolean | null;
+    paraIndent?: number | null;
+    paraSpacing?: number | null;
+    textAlign?: TextAlignment | null;
+    wordSpacing?: number | null;
+    zoom: number | null;
+}
+export declare class WebUserProperties extends Properties {
+    a11yNormalize: boolean | null;
+    bodyHyphens: BodyHyphens | null;
+    fontFamily: string | null;
+    fontWeight: number | null;
+    letterSpacing: number | null;
+    ligatures: Ligatures | null;
+    lineHeight: number | null;
+    noRuby: boolean | null;
+    paraIndent: number | null;
+    paraSpacing: number | null;
+    textAlign: TextAlignment | null;
+    wordSpacing: number | null;
+    zoom: number | null;
+    constructor(props: IWebUserProperties);
+    toCSSProperties(): {
+        [key: string]: string;
+    };
+}

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

@@ -0,0 +1,10 @@
+import { WebPubSettings } from "../preferences/WebPubSettings";
+import { WebUserProperties } from "./Properties";
+export interface IWebPubCSS {
+    userProperties: WebUserProperties;
+}
+export declare class WebPubCSS {
+    userProperties: WebUserProperties;
+    constructor(props: IWebPubCSS);
+    update(settings: WebPubSettings): void;
+}

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

@@ -0,0 +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";

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

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

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

@@ -2,3 +2,5 @@ export * from "./WebPubNavigator";
 export * from "./WebPubBlobBuilder";
 export * from "./WebPubFrameManager";
 export * from "./WebPubFramePoolManager";
+export * from "./preferences";
+export * from "./css";

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

@@ -0,0 +1,32 @@
+import { TextAlignment } from "../../preferences/Types";
+export interface IWebPubDefaults {
+    fontFamily?: string | null;
+    fontWeight?: number | null;
+    hyphens?: boolean | null;
+    letterSpacing?: number | null;
+    ligatures?: boolean | null;
+    lineHeight?: number | null;
+    noRuby?: boolean | null;
+    paragraphIndent?: number | null;
+    paragraphSpacing?: number | null;
+    textAlign?: TextAlignment | null;
+    textNormalization?: boolean | null;
+    wordSpacing?: number | null;
+    zoom?: number | null;
+}
+export declare class WebPubDefaults {
+    fontFamily: string | null;
+    fontWeight: number | null;
+    hyphens: boolean | null;
+    letterSpacing: number | null;
+    ligatures: boolean | null;
+    lineHeight: number | null;
+    noRuby: boolean | null;
+    paragraphIndent: number | null;
+    paragraphSpacing: number | null;
+    textAlign: TextAlignment | null;
+    textNormalization: boolean | null;
+    wordSpacing: number | null;
+    zoom: number;
+    constructor(defaults: IWebPubDefaults);
+}

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

@@ -0,0 +1,36 @@
+import { ConfigurablePreferences } from "../../preferences/Configurable";
+import { TextAlignment } from "../../preferences/Types";
+export interface IWebPubPreferences {
+    fontFamily?: string | null;
+    fontWeight?: number | null;
+    hyphens?: boolean | null;
+    letterSpacing?: number | null;
+    ligatures?: boolean | null;
+    lineHeight?: number | null;
+    noRuby?: boolean | null;
+    paragraphIndent?: number | null;
+    paragraphSpacing?: number | null;
+    textAlign?: TextAlignment | null;
+    textNormalization?: boolean | null;
+    wordSpacing?: number | null;
+    zoom?: number | null;
+}
+export declare class WebPubPreferences implements ConfigurablePreferences {
+    fontFamily?: string | null;
+    fontWeight?: number | null;
+    hyphens?: boolean | null;
+    letterSpacing?: number | null;
+    ligatures?: boolean | null;
+    lineHeight?: number | null;
+    noRuby?: boolean | null;
+    paragraphIndent?: number | null;
+    paragraphSpacing?: number | null;
+    textAlign?: TextAlignment | null;
+    textNormalization?: boolean | null;
+    wordSpacing?: number | null;
+    zoom?: number | null;
+    constructor(preferences?: IWebPubPreferences);
+    static serialize(preferences: WebPubPreferences): string;
+    static deserialize(preferences: string): WebPubPreferences | null;
+    merging(other: ConfigurablePreferences): ConfigurablePreferences;
+}