Readium css experiments

navigator/package.json

@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@laynezh/vite-plugin-lib-assets": "^2.1.0",
-    "@readium/css": "2.0.0-beta.22",
+    "@readium/css": "2.0.0-beta.24",
     "@readium/navigator-html-injectables": "workspace:*",
     "@readium/shared": "workspace:*",
     "@types/path-browserify": "^1.0.3",

navigator/src/epub/css/Properties.ts

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

navigator/src/epub/css/ReadiumCSS.ts

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

navigator/src/epub/preferences/EpubDefaults.ts

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

navigator/src/epub/preferences/EpubSettings.ts

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

navigator/src/preferences/Types.ts

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

navigator/src/preferences/guards.ts

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

navigator/src/webpub/WebPubNavigator.ts

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

navigator/src/webpub/css/Properties.ts

@@ -1,4 +1,4 @@
-import { TextAlignment } from "../../preferences/Types";
+import { ExperimentKey, experiments, TextAlignment } from "../../preferences/Types";
 import { BodyHyphens, Ligatures, Properties } from "../../css/Properties";
 
 export interface IWebUserProperties {
@@ -77,3 +77,28 @@ export class WebUserProperties extends Properties {
     return cssProperties;
   }
 }
+
+export interface IWebRSProperties {
+  experiments: Array<ExperimentKey> | null;
+}
+
+export class WebRSProperties extends Properties {
+  experiments: Array<ExperimentKey> | null;
+
+  constructor(props: IWebRSProperties) {
+    super();
+    this.experiments = props.experiments ?? null;
+  }
+
+  toCSSProperties() {
+    const cssProperties: { [key: string]: string } = {};
+
+    if (this.experiments) {
+      this.experiments.forEach((exp) => {
+        cssProperties["--RS__" + exp] = experiments[exp].value;
+      });
+    };
+
+    return cssProperties;
+  }
+}

navigator/src/webpub/css/WebPubCSS.ts

@@ -1,18 +1,25 @@
 import { WebPubSettings } from "../preferences/WebPubSettings";
-import { IWebUserProperties, WebUserProperties } from "./Properties";
+import { IWebUserProperties, WebRSProperties, WebUserProperties } from "./Properties";
 
 export interface IWebPubCSS {
+  rsProperties: WebRSProperties;
   userProperties: WebUserProperties;
 }
 
 export class WebPubCSS {
+  rsProperties: WebRSProperties;
   userProperties: WebUserProperties;
 
   constructor(props: IWebPubCSS) {
+    this.rsProperties = props.rsProperties;
     this.userProperties = props.userProperties;
   }
 
   update(settings: WebPubSettings) {
+    if (settings.experiments) {
+      this.rsProperties.experiments = settings.experiments;
+    }
+
     const updated: IWebUserProperties = {
       a11yNormalize: settings.textNormalization,
       bodyHyphens: typeof settings.hyphens !== "boolean" 

navigator/src/webpub/preferences/WebPubDefaults.ts

@@ -1,4 +1,5 @@
 import { 
+  ExperimentKey,
   fontWeightRangeConfig, 
   TextAlignment, 
   zoomRangeConfig 
@@ -9,7 +10,8 @@ import {
   ensureEnumValue,
   ensureNonNegative,
   ensureValueInRange,
-  ensureString
+  ensureString,
+  ensureExperiment
 } from "../../preferences/guards";
 
 import { sMLWithRequest } from "../../helpers";
@@ -29,7 +31,8 @@ export interface IWebPubDefaults {
   textAlign?: TextAlignment | null,
   textNormalization?: boolean | null,
   wordSpacing?: number | null,
-  zoom?: number | null
+  zoom?: number | null,
+  experiments?: Array<ExperimentKey> | null,
 }
 
 export class WebPubDefaults {
@@ -48,6 +51,7 @@ export class WebPubDefaults {
   textNormalization: boolean | null;
   wordSpacing: number | null;
   zoom: number;
+  experiments: Array<ExperimentKey> | null;
 
   constructor(defaults: IWebPubDefaults) {
     this.fontFamily = ensureString(defaults.fontFamily) || null;
@@ -69,5 +73,6 @@ export class WebPubDefaults {
     this.textNormalization = ensureBoolean(defaults.textNormalization) ?? false;
     this.wordSpacing = ensureNonNegative(defaults.wordSpacing) || null;
     this.zoom = ensureValueInRange(defaults.zoom, zoomRangeConfig.range) || 1;
+    this.experiments = ensureExperiment(defaults.experiments) ?? null;
   }
 }

navigator/src/webpub/preferences/WebPubSettings.ts

@@ -1,5 +1,5 @@
 import { ConfigurableSettings } from "../../preferences/Configurable";
-import { TextAlignment } from "../../preferences/Types";
+import { ExperimentKey, TextAlignment } from "../../preferences/Types";
 import { WebPubDefaults } from "./WebPubDefaults";
 import { WebPubPreferences } from "./WebPubPreferences";
 
@@ -20,7 +20,8 @@ export interface IWebPubSettings {
   textAlign?: TextAlignment | null,
   textNormalization?: boolean | null,
   wordSpacing?: number | null,
-  zoom?: number | null;
+  zoom?: number | null,
+  experiments?: Array<ExperimentKey> | null,
 }
 
 export class WebPubSettings implements ConfigurableSettings {
@@ -39,6 +40,7 @@ export class WebPubSettings implements ConfigurableSettings {
   textNormalization: boolean | null = null;
   wordSpacing: number | null = null;
   zoom: number | null;
+  experiments: Array<ExperimentKey> | null;
 
   constructor(preferences: WebPubPreferences, defaults: WebPubDefaults, hasDisplayTransformability: boolean) {
     if (hasDisplayTransformability) {
@@ -103,5 +105,7 @@ export class WebPubSettings implements ConfigurableSettings {
       : defaults.zoom !== undefined
         ? defaults.zoom
         : null;
+
+    this.experiments = defaults.experiments || null;
   }
 }