@readium/navigator 1.3.4 → 2.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "1.3.4",
+  "version": "2.0.0-beta.1",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -44,20 +44,20 @@
   "engines": {
     "node": ">=18"
   },
+  "scripts": {
+    "build": "tsc && vite build"
+  },
   "devDependencies": {
     "@laynezh/vite-plugin-lib-assets": "^0.5.25",
+    "@readium/css": ">=2.0.0-beta.13",
+    "@readium/navigator-html-injectables": "workspace:*",
+    "@readium/shared": "workspace:*",
     "@types/path-browserify": "^1.0.3",
     "css-selector-generator": "^3.6.9",
     "path-browserify": "^1.0.1",
-    "@readium/css": "^1.1.0",
     "tslib": "^2.8.1",
     "typescript": "^5.6.3",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^4.5.5",
-    "@readium/navigator-html-injectables": "1.3.2",
-    "@readium/shared": "1.2.1"
-  },
-  "scripts": {
-    "build": "tsc && vite build"
+    "vite": "^4.5.5"
   }
-}
+}

package/src/epub/EpubNavigator.ts

@@ -1,5 +1,5 @@
 import { EPUBLayout, Link, Locator, Publication, ReadingProgression } from "@readium/shared";
-import { VisualNavigator } from "../";
+import { Configurable, ConfigurablePreferences, ConfigurableSettings, LineLengths, VisualNavigator } from "../";
 import { FramePoolManager } from "./frame/FramePoolManager";
 import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager";
 import { CommsEventKey, FXLModules, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables";
@@ -7,9 +7,21 @@ import { BasicTextSelection, FrameClickEvent } from "@readium/navigator-html-inj
 import * as path from "path-browserify";
 import { FXLFrameManager } from "./fxl/FXLFrameManager";
 import { FrameManager } from "./frame/FrameManager";
+import { IEpubPreferences, EpubPreferences } from "./preferences/EpubPreferences";
+import { IEpubDefaults, EpubDefaults } from "./preferences/EpubDefaults";
+import { EpubSettings } from "./preferences";
+import { EpubPreferencesEditor } from "./preferences/EpubPreferencesEditor";
+import { ReadiumCSS } from "./css/ReadiumCSS";
+import { RSProperties, UserProperties } from "./css/Properties";
+import { getContentWidth } from "../helpers/dimensions";
 
 export type ManagerEventKey = "zoom";
 
+export interface EpubNavigatorConfiguration {
+    preferences: IEpubPreferences;
+    defaults: IEpubDefaults;
+}
+
 export interface EpubNavigatorListeners {
     frameLoaded: (wnd: Window) => void;
     positionChanged: (locator: Locator) => void;
@@ -35,7 +47,7 @@ const defaultListeners = (listeners: EpubNavigatorListeners): EpubNavigatorListe
     textSelected: listeners.textSelected || (() => {})
 })
 
-export class EpubNavigator extends VisualNavigator {
+export class EpubNavigator extends VisualNavigator implements Configurable<ConfigurableSettings, ConfigurablePreferences> {
     private readonly pub: Publication;
     private readonly container: HTMLElement;
     private readonly listeners: EpubNavigatorListeners;
@@ -46,16 +58,55 @@ export class EpubNavigator extends VisualNavigator {
     private currentProgression: ReadingProgression;
     public readonly layout: EPUBLayout;
 
-    constructor(container: HTMLElement, pub: Publication, listeners: EpubNavigatorListeners, positions: Locator[] = [], initialPosition: Locator | undefined = undefined) {
+    private _preferences: EpubPreferences;
+    private _defaults: EpubDefaults;
+    private _settings: EpubSettings;
+    private _css: ReadiumCSS;
+    private _preferencesEditor: EpubPreferencesEditor | null = null;
+
+    private resizeObserver: ResizeObserver;
+
+    constructor(container: HTMLElement, pub: Publication, listeners: EpubNavigatorListeners, positions: Locator[] = [], initialPosition: Locator | undefined = undefined, configuration: EpubNavigatorConfiguration = { preferences: {}, defaults: {} }) {
         super();
         this.pub = pub;
         this.layout = EpubNavigator.determineLayout(pub);
-        this.currentProgression = pub.metadata.effectiveReadingProgression;
         this.container = container;
         this.listeners = defaultListeners(listeners);
         this.currentLocation = initialPosition!;
         if (positions.length)
             this.positions = positions;
+
+        this._preferences = new EpubPreferences(configuration.preferences);
+        this._defaults = new EpubDefaults(configuration.defaults);
+        this._settings = new EpubSettings(this._preferences, this._defaults);
+        this._css = new ReadiumCSS({ 
+            rsProperties: new RSProperties({}),
+            userProperties: new UserProperties({}),
+            lineLengths: new LineLengths({
+                optimalChars: this._settings.optimalLineLength,
+                minChars: this._settings.minimalLineLength,
+                maxChars: this._settings.maximalLineLength,
+                pageGutter: this._settings.pageGutter,
+                fontFace: this._settings.fontFamily,
+                letterSpacing: this._settings.letterSpacing,
+                wordSpacing: this._settings.wordSpacing,
+            //    sample: this.pub.metadata.description
+            }),
+            container: container,
+            constraint: this._settings.constraint
+        });
+
+        this.currentProgression = this.layout === EPUBLayout.reflowable 
+            ? (this._settings.scroll 
+                ? ReadingProgression.ttb 
+                : pub.metadata.effectiveReadingProgression) 
+            : pub.metadata.effectiveReadingProgression;
+
+        // We use a resizeObserver cos’ the container parent may not be the width of 
+        // the document/window e.g. app using a docking system with left and right panels.
+        // If we observe this.container, that won’t obviously work since we set its width.
+        this.resizeObserver = new ResizeObserver(() => this.ownerWindow.requestAnimationFrame(async () => await this.resizeHandler()));
+        this.resizeObserver.observe(this.container.parentElement || document.documentElement);
     }
 
     public static determineLayout(pub: Publication): EPUBLayout {
@@ -79,13 +130,139 @@ export class EpubNavigator extends VisualNavigator {
             this.framePool.listener = (key: CommsEventKey | ManagerEventKey, data: unknown) => {
                 this.eventListener(key, data);
             }
-        } else
-            this.framePool = new FramePoolManager(this.container, this.positions);
+        } else {
+            await this.updateCSS(false);
+            const cssProperties = this.compileCSSProperties(this._css);
+            this.framePool = new FramePoolManager(this.container, this.positions, cssProperties);
+        }
+
         if(this.currentLocation === undefined)
             this.currentLocation = this.positions[0];
+
+        await this.resizeHandler();
         await this.apply();
     }
 
+    public get settings(): Readonly<EpubSettings> {
+        if (this.layout === EPUBLayout.fixed) {
+            return Object.freeze({ ...this._settings });
+        } else {
+            // Given all the nasty issues moving auto-pagination to EpubSettings creates
+            // Especially as it’s tied to ReadiumCSS in the first place and could be 
+            // problematic if you intend to use something else,
+            // we return the properties with columnCount overridden
+            const columnCount = this._css.userProperties.colCount || this._css.rsProperties.colCount || this._settings.columnCount;
+            return Object.freeze({ ...this._settings, columnCount: columnCount });
+        }
+    }
+
+    public get preferencesEditor() {
+        if (this._preferencesEditor === null) {
+            // Note: we pass this.settings instead of this._settings to ensure the columnCount is correct
+            this._preferencesEditor = new EpubPreferencesEditor(this._preferences, this.settings, this.pub.metadata);
+        }
+        return this._preferencesEditor;
+    }
+
+    public async submitPreferences(preferences: EpubPreferences) {
+        this._preferences = this._preferences.merging(preferences) as EpubPreferences;
+        await this.applyPreferences();
+    }
+
+    private async applyPreferences() {
+        const oldSettings = this._settings;
+        this._settings = new EpubSettings(this._preferences, this._defaults);
+        
+        if (this._preferencesEditor !== null) {
+            // Note: we pass this.settings instead of this._settings to ensure the columnCount is correct
+            this._preferencesEditor = new EpubPreferencesEditor(this._preferences, this.settings, this.pub.metadata);
+        }
+
+        if (this.layout === EPUBLayout.fixed) {
+            this.handleFXLPrefs(oldSettings, this._settings);
+        } else {
+            await this.updateCSS(true);
+        }
+    }
+
+    // TODO: fit, etc.
+    private handleFXLPrefs(from: EpubSettings, to: EpubSettings) {
+        if (from.columnCount !== to.columnCount) {
+            (this.framePool as FXLFramePoolManager).setPerPage(to.columnCount);
+        }
+    }
+
+    private async updateCSS(commit: boolean) {
+        this._css.update(this._settings);
+
+        if (commit) await this.commitCSS(this._css);
+    };
+
+    private compileCSSProperties(css: ReadiumCSS) {
+        const properties: { [key: string]: string } = {};
+
+        for (const [key, value] of Object.entries(css.rsProperties.toCSSProperties())) {
+            properties[key] = value;
+        }
+
+        for (const [key, value] of Object.entries(css.userProperties.toCSSProperties())) {
+            properties[key] = value;
+        }
+
+        return properties;
+    }
+
+    private async commitCSS(css: ReadiumCSS) {
+        // Since we’re updating the CSS properties in injectables by removing
+        // the existing properties that are not inside this object first, 
+        // then adding all from it, we don’t compare the previous properties here
+        const properties = this.compileCSSProperties(css);
+
+        (this.framePool as FramePoolManager).setCSSProperties(properties);
+
+        if (
+            this._css.userProperties.view === "paged" && 
+            this.readingProgression === ReadingProgression.ttb
+        ) {
+            await this.setReadingProgression(this.pub.metadata.effectiveReadingProgression); 
+        } else if (
+            this._css.userProperties.view === "scroll" && 
+            (this.readingProgression === ReadingProgression.ltr || this.readingProgression === ReadingProgression.rtl)
+        ) {
+            await this.setReadingProgression(ReadingProgression.ttb);
+        }
+
+        this._css.setContainerWidth();
+    }
+
+    async resizeHandler() {
+        // We check the parentElement cos we want to remove constraint from the container
+        // and the container may not be the entire width of the document/window
+        const parentEl = this.container.parentElement || document.documentElement;
+
+        if (this.layout === EPUBLayout.fixed) {
+            this.container.style.width = `${ getContentWidth(parentEl) - this._settings.constraint }px`;
+            (this.framePool as FXLFramePoolManager).resizeHandler();
+        } else {
+            // for reflow ReadiumCSS gets the width from columns + line-lengths 
+            // but we need to check whether colCount has changed to commit new CSS
+            const oldColCount = this._css.userProperties.colCount;
+            const oldLineLength = this._css.userProperties.lineLength;
+            this._css.resizeHandler();
+            if (
+                this._css.userProperties.view !== "scroll" &&
+                oldColCount !== this._css.userProperties.colCount ||
+                oldLineLength !== this._css.userProperties.lineLength
+            ) {
+                await this.commitCSS(this._css);
+            }
+        }
+    }
+
+    get ownerWindow() {
+        return this.container.ownerDocument.defaultView || window;
+    }
+
     /**
      * Exposed to the public to compensate for lack of implemented readium conveniences
      * TODO remove when settings management is incorporated
@@ -442,7 +619,7 @@ export class EpubNavigator extends VisualNavigator {
 
     // TODO: This is temporary until user settings are implemented.
     public async setReadingProgression(newProgression: ReadingProgression) {
-        if(this.currentProgression === newProgression) return;
+        if(this.currentProgression === newProgression || !this.framePool) return;
         this.currentProgression = newProgression;
         await this.framePool.update(this.pub, this.currentLocator, this.determineModules(), true);
         this.attachListener();

package/src/epub/css/Properties.ts

@@ -0,0 +1,376 @@
+import { TextAlignment, Theme } 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";
+
+abstract class Properties {
+  constructor() {}
+
+  protected toFlag(name: string) {
+    return `readium-${ name }-on`;
+  }
+
+  protected toUnitless(value: number) {
+    return value.toString();
+  }
+
+  protected toPercentage(value: number, ratio: boolean = false) {
+    if (ratio || value > 0 && value <= 1) {
+      return `${ Math.round(value * 100) }%`;
+    } else {
+      return `${ value }%`;
+    }
+  }
+
+  protected toVw(value: number) {
+    const percentage = Math.round(value * 100);
+    return `${ Math.min(percentage, 100) }vw`;
+  }
+
+  protected toVh(value: number) {
+    const percentage = Math.round(value * 100);
+    return `${ Math.min(percentage, 100) }vh`;
+  }
+
+  protected toPx(value: number) {
+    return `${ value }px`;
+  }
+
+  protected toRem(value: number) {
+    return `${ value }rem`;
+  }
+
+  abstract toCSSProperties(): { [key: string]: string };
+}
+
+export interface IUserProperties {
+  advancedSettings?: boolean | null;
+  a11yNormalize?: boolean | null;
+  appearance?: Theme | null;
+  backgroundColor?: string | null;
+  blendFilter?: boolean | null;
+  bodyHyphens?: BodyHyphens | null;
+  colCount?: number | null;
+  darkenFilter?: boolean | number | null;
+  deprecatedFontSize?: boolean | null;
+  fontFamily?: string | null;
+  fontOpticalSizing?: FontOpticalSizing | null;
+  fontOverride?: boolean | null;
+  fontSize?: number | null;
+  fontSizeNormalize?: boolean | null;
+  fontWeight?: number | null;
+  fontWidth?: FontWidth | null;
+  invertFilter?: boolean | number | null;
+  invertGaijiFilter?: boolean | number | null;
+  iPadOSPatch?: boolean | null;
+  letterSpacing?: number | null;
+  ligatures?: Ligatures | null;
+  lineHeight?: number | null;
+  lineLength?: number | null;
+  linkColor?: string | null;
+  noRuby?: boolean | null;
+  paraIndent?: number | null;
+  paraSpacing?: number | null;
+  selectionBackgroundColor?: string | null;
+  selectionTextColor?: string | null;
+  textAlign?: TextAlignment | null;
+  textColor?: string | null;
+  view?: View | null;
+  visitedColor?: string | null;
+  wordSpacing?: number | null;
+}
+
+export class UserProperties extends Properties {
+  a11yNormalize: boolean | null;
+  appearance: Theme | null;
+  backgroundColor: string | null;
+  blendFilter: boolean | null;
+  bodyHyphens: BodyHyphens | null;
+  colCount: number | null | undefined;
+  darkenFilter: boolean | number | null;
+  deprecatedFontSize: boolean | null;
+  fontFamily: string | null;
+  fontOpticalSizing: FontOpticalSizing | null;
+  fontOverride: boolean | null;
+  fontSize: number | null;
+  fontSizeNormalize: boolean | null;
+  fontWeight: number | null;
+  fontWidth: FontWidth | null;
+  invertFilter: boolean | number | null;
+  invertGaijiFilter: boolean | number | null;
+  iPadOSPatch: boolean | null;
+  letterSpacing: number | null;
+  ligatures: Ligatures | null;
+  lineHeight: number | null;
+  lineLength: number | null;
+  linkColor: string | null;
+  noRuby: boolean | null;
+  paraIndent: number | null;
+  paraSpacing: number | null;
+  selectionBackgroundColor?: string | null;
+  selectionTextColor?: string | null;
+  textAlign: TextAlignment | null;
+  textColor: string | null;
+  view: View | null;
+  visitedColor: string | null;
+  wordSpacing: number | null;
+
+  constructor(props: IUserProperties) {
+    super();
+    this.a11yNormalize = props.a11yNormalize ?? null;
+    this.appearance = props.appearance ?? null;
+    this.backgroundColor = props.backgroundColor ?? null;
+    this.blendFilter = props.blendFilter ?? null;
+    this.bodyHyphens = props.bodyHyphens ?? null;
+    this.colCount = props.colCount ?? null;
+    this.darkenFilter = props.darkenFilter ?? null;
+    this.deprecatedFontSize = props.deprecatedFontSize ?? null;
+    this.fontFamily = props.fontFamily ?? null;
+    this.fontOpticalSizing = props.fontOpticalSizing ?? null;
+    this.fontOverride = props.fontOverride ?? null;
+    this.fontSize = props.fontSize ?? null;
+    this.fontSizeNormalize = props.fontSizeNormalize ?? null;
+    this.fontWeight = props.fontWeight ?? null;
+    this.fontWidth = props.fontWidth ?? null;
+    this.invertFilter = props.invertFilter ?? null;
+    this.invertGaijiFilter = props.invertGaijiFilter ?? null;
+    this.iPadOSPatch = props.iPadOSPatch ?? null;
+    this.letterSpacing = props.letterSpacing ?? null;
+    this.ligatures = props.ligatures ?? null;
+    this.lineHeight = props.lineHeight ?? null;
+    this.lineLength = props.lineLength ?? null;
+    this.linkColor = props.linkColor ?? null;
+    this.noRuby = props.noRuby ?? null;
+    this.paraIndent = props.paraIndent ?? null;
+    this.paraSpacing = props.paraSpacing ?? null;
+    this.selectionBackgroundColor = props.selectionBackgroundColor ?? null;
+    this.selectionTextColor = props.selectionTextColor ?? null;
+    this.textAlign = props.textAlign ?? null;
+    this.textColor = props.textColor ?? null;
+    this.view = props.view ?? null;
+    this.visitedColor = props.visitedColor ?? null;
+    this.wordSpacing = props.wordSpacing ?? null;
+  }
+
+  toCSSProperties() {
+    const cssProperties: { [key: string]: string } = {};
+
+    if (this.a11yNormalize) cssProperties["--USER__a11yNormalize"] = this.toFlag("a11y");
+    if (this.appearance) cssProperties["--USER__appearance"] = this.toFlag(this.appearance);
+    if (this.backgroundColor) cssProperties["--USER__backgroundColor"] = this.backgroundColor;
+    if (this.blendFilter) cssProperties["--USER__blendFilter"] = this.toFlag("blend");
+    if (this.bodyHyphens) cssProperties["--USER__bodyHyphens"] = this.bodyHyphens;
+    if (this.colCount) cssProperties["--USER__colCount"] = this.toUnitless(this.colCount);
+    if (this.darkenFilter === true) {
+      cssProperties["--USER__darkenFilter"] = this.toFlag("darken");
+    } else if (typeof this.darkenFilter === "number") {
+      cssProperties["--USER__darkenFilter"] = this.toPercentage(this.darkenFilter);
+    }
+    if (this.deprecatedFontSize) cssProperties["--USER__fontSizeImplementation"] = this.toFlag("deprecatedFontSize");
+    if (this.fontFamily) cssProperties["--USER__fontFamily"] = this.fontFamily;
+    if (this.fontOpticalSizing != null) cssProperties["--USER__fontOpticalSizing"] = this.fontOpticalSizing;
+    if (this.fontOverride) cssProperties["--USER__fontOverride"] = this.toFlag("font");
+    if (this.fontSize != null) cssProperties["--USER__fontSize"] = this.toPercentage(this.fontSize, true);
+    if (this.fontSizeNormalize) cssProperties["--USER__fontSizeNormalize"] = this.toFlag("normalize");
+    if (this.fontWeight != null) cssProperties["--USER__fontWeight"] = this.toUnitless(this.fontWeight);
+    if (this.fontWidth != null) {
+      cssProperties["--USER__fontWidth"] = typeof this.fontWidth === "string" 
+      ? this.fontWidth 
+      : this.toUnitless(this.fontWidth);
+    } 
+    if (this.invertFilter === true) {
+      cssProperties["--USER__invertFilter"] = this.toFlag("invert");
+    } else if (typeof this.invertFilter === "number") {
+      cssProperties["--USER__invertFilter"] = this.toPercentage(this.invertFilter);
+    }
+    if (this.invertGaijiFilter === true) {
+      cssProperties["--USER__invertGaiji"] = this.toFlag("invertGaiji");
+    } else if (typeof this.invertGaijiFilter === "number") {
+      cssProperties["--USER__invertGaiji"] = this.toPercentage(this.invertGaijiFilter);
+    }
+    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);
+    if (this.lineLength != null) cssProperties["--USER__lineLength"] = this.toPx(this.lineLength);
+    if (this.linkColor) cssProperties["--USER__linkColor"] = this.linkColor;
+    if (this.noRuby) cssProperties["--USER__noRuby"] = this.toFlag("noRuby");
+    if (this.paraIndent != null) cssProperties["--USER__paraIndent"] = this.toRem(this.paraIndent);
+    if (this.paraSpacing != null) cssProperties["--USER__paraSpacing"] = this.toRem(this.paraSpacing);
+    if (this.selectionBackgroundColor) cssProperties["--USER__selectionBackgroundColor"] = this.selectionBackgroundColor;
+    if (this.selectionTextColor) cssProperties["--USER__selectionTextColor"] = this.selectionTextColor;
+    if (this.textAlign) cssProperties["--USER__textAlign"] = this.textAlign;
+    if (this.textColor) cssProperties["--USER__textColor"] = this.textColor;
+    if (this.view) cssProperties["--USER__view"] = this.toFlag(this.view);
+    if (this.visitedColor) cssProperties["--USER__visitedColor"] = this.visitedColor;
+    if (this.wordSpacing != null) cssProperties["--USER__wordSpacing"] = this.toRem(this.wordSpacing);
+
+    return cssProperties;
+  }
+}
+
+export interface IRSProperties {
+  backgroundColor?: string | null;
+  baseFontFamily?: string | null;
+  baseFontSize?: number | null;
+  baseLineHeight?: number | null;
+  boxSizingMedia?: BoxSizing | null;
+  boxSizingTable?: BoxSizing | null;
+  colWidth?: string | null;
+  colCount?: number | null;
+  colGap?: number | null;
+  codeFontFamily?: string | null;
+  compFontFamily?: string | null;
+  defaultLineLength?: number | null;
+  flowSpacing?: number | null;
+  humanistTf?: string | null;
+  linkColor?: string | null;
+  maxMediaWidth?: number | null;
+  maxMediaHeight?: number | null;
+  modernTf?: string | null;
+  monospaceTf?: string | null;
+  noVerticalPagination?: boolean | null;
+  oldStyleTf?: string | null;
+  pageGutter?: number | null;
+  paraIndent?: number | null;
+  paraSpacing?: number | null;
+  primaryColor?: string | null;
+  sansSerifJa?: string | null;
+  sansSerifJaV?: string | null;
+  sansTf?: string | null;
+  secondaryColor?: string | null;
+  selectionBackgroundColor?: string | null;
+  selectionTextColor?: string | null;
+  serifJa?: string | null;
+  serifJaV?: string | null;
+  textColor?: string | null;
+  typeScale?: TypeScale | null;
+  visitedColor?: string | null;
+}
+
+export class RSProperties extends Properties {
+  backgroundColor: string | null;
+  baseFontFamily: string | null;
+  baseFontSize: number | null;
+  baseLineHeight: number | null;
+  boxSizingMedia: BoxSizing | null;
+  boxSizingTable: BoxSizing | null;
+  colWidth: string | null;
+  colCount: number | null;
+  colGap: number | null;
+  codeFontFamily: string | null;
+  compFontFamily: string | null;
+  defaultLineLength: number | null;
+  flowSpacing: number | null;
+  humanistTf: string | null;
+  linkColor: string | null;
+  maxMediaWidth: number | null;
+  maxMediaHeight: number | null;
+  modernTf: string | null;
+  monospaceTf: string | null;
+  noVerticalPagination: boolean | null;
+  oldStyleTf: string | null;
+  pageGutter: number | null;
+  paraIndent: number | null;
+  paraSpacing: number | null;
+  primaryColor: string | null;
+  sansSerifJa: string | null;
+  sansSerifJaV: string | null;
+  sansTf: string | null;
+  secondaryColor: string | null;
+  selectionBackgroundColor: string | null;
+  selectionTextColor: string | null;
+  serifJa: string | null;
+  serifJaV: string | null;
+  textColor: string | null;
+  typeScale: TypeScale | null;
+  visitedColor: string | null;
+
+  constructor(props: IRSProperties) {
+    super();
+    this.backgroundColor = props.backgroundColor ?? null;
+    this.baseFontFamily = props.baseFontFamily ?? null;
+    this.baseFontSize = props.baseFontSize ?? null;
+    this.baseLineHeight = props.baseLineHeight ?? null;
+    this.boxSizingMedia = props.boxSizingMedia ?? null;
+    this.boxSizingTable = props.boxSizingTable ?? null;
+    this.colWidth = props.colWidth ?? null;
+    this.colCount = props.colCount ?? null;
+    this.colGap = props.colGap ?? null;
+    this.codeFontFamily = props.codeFontFamily ?? null;
+    this.compFontFamily = props.compFontFamily ?? null;
+    this.defaultLineLength = props.defaultLineLength ?? null;
+    this.flowSpacing = props.flowSpacing ?? null;
+    this.humanistTf = props.humanistTf ?? null;
+    this.linkColor = props.linkColor ?? null;
+    this.maxMediaWidth = props.maxMediaWidth ?? null;
+    this.maxMediaHeight = props.maxMediaHeight ?? null;
+    this.modernTf = props.modernTf ?? null;
+    this.monospaceTf = props.monospaceTf ?? null;
+    this.noVerticalPagination = props.noVerticalPagination ?? null;
+    this.oldStyleTf = props.oldStyleTf ?? null;
+    this.pageGutter = props.pageGutter ?? null;
+    this.paraIndent = props.paraIndent ?? null;
+    this.paraSpacing = props.paraSpacing ?? null;
+    this.primaryColor = props.primaryColor ?? null;
+    this.sansSerifJa = props.sansSerifJa ?? null;
+    this.sansSerifJaV = props.sansSerifJaV ?? null;
+    this.sansTf = props.sansTf ?? null;
+    this.secondaryColor = props.secondaryColor ?? null;
+    this.selectionBackgroundColor = props.selectionBackgroundColor ?? null;
+    this.selectionTextColor = props.selectionTextColor ?? null;
+    this.serifJa = props.serifJa ?? null;
+    this.serifJaV = props.serifJaV ?? null;
+    this.textColor = props.textColor ?? null;
+    this.typeScale = props.typeScale ?? null;
+    this.visitedColor = props.visitedColor ?? null;
+  }
+
+  toCSSProperties(): { [key: string]: string; } {
+    const cssProperties: { [key: string]: string } = {};
+
+    if (this.backgroundColor) cssProperties["--RS__backgroundColor"] = this.backgroundColor;
+    if (this.baseFontFamily) cssProperties["--RS__baseFontFamily"] = this.baseFontFamily;
+    if (this.baseFontSize != null) cssProperties["--RS__baseFontSize"] = this.toRem(this.baseFontSize);
+    if (this.baseLineHeight != null) cssProperties["--RS__baseLineHeight"] = this.toUnitless(this.baseLineHeight);
+    if (this.boxSizingMedia) cssProperties["--RS__boxSizingMedia"] = this.boxSizingMedia;
+    if (this.boxSizingTable) cssProperties["--RS__boxSizingTable"] = this.boxSizingTable;
+    if (this.colWidth != null) cssProperties["--RS__colWidth"] = this.colWidth;
+    if (this.colCount != null) cssProperties["--RS__colCount"] = this.toUnitless(this.colCount);
+    if (this.colGap != null) cssProperties["--RS__colGap"] = this.toPx(this.colGap);
+    if (this.codeFontFamily) cssProperties["--RS__codeFontFamily"] = this.codeFontFamily;
+    if (this.compFontFamily) cssProperties["--RS__compFontFamily"] = this.compFontFamily;
+    if (this.defaultLineLength != null) cssProperties["--RS__defaultLineLength"] = this.toPx(this.defaultLineLength);
+    if (this.flowSpacing != null) cssProperties["--RS__flowSpacing"] = this.toRem(this.flowSpacing);
+    if (this.humanistTf) cssProperties["--RS__humanistTf"] = this.humanistTf;
+    if (this.linkColor) cssProperties["--RS__linkColor"] = this.linkColor;
+    if (this.maxMediaWidth) cssProperties["--RS__maxMediaWidth"] = this.toVw(this.maxMediaWidth);
+    if (this.maxMediaHeight) cssProperties["--RS__maxMediaHeight"] = this.toVh(this.maxMediaHeight);
+    if (this.modernTf) cssProperties["--RS__modernTf"] = this.modernTf;
+    if (this.monospaceTf) cssProperties["--RS__monospaceTf"] = this.monospaceTf;
+    if (this.noVerticalPagination) cssProperties["--RS__disablePagination"] = this.toFlag("noVerticalPagination");
+    if (this.oldStyleTf) cssProperties["--RS__oldStyleTf"] = this.oldStyleTf;
+    if (this.pageGutter != null) cssProperties["--RS__pageGutter"] = this.toPx(this.pageGutter);
+    if (this.paraIndent != null) cssProperties["--RS__paraIndent"] = this.toRem(this.paraIndent);
+    if (this.paraSpacing != null) cssProperties["--RS__paraSpacing"] = this.toRem(this.paraSpacing);
+    if (this.primaryColor) cssProperties["--RS__primaryColor"] = this.primaryColor;
+    if (this.sansSerifJa) cssProperties["--RS__sans-serif-ja"] = this.sansSerifJa;
+    if (this.sansSerifJaV) cssProperties["--RS__sans-serif-ja-v"] = this.sansSerifJaV;
+    if (this.sansTf) cssProperties["--RS__sansTf"] = this.sansTf;
+    if (this.secondaryColor) cssProperties["--RS__secondaryColor"] = this.secondaryColor;
+    if (this.selectionBackgroundColor) cssProperties["--RS__selectionBackgroundColor"] = this.selectionBackgroundColor;
+    if (this.selectionTextColor) cssProperties["--RS__selectionTextColor"] = this.selectionTextColor;
+    if (this.serifJa) cssProperties["--RS__serif-ja"] = this.serifJa;
+    if (this.serifJaV) cssProperties["--RS__serif-ja-v"] = this.serifJaV;
+    if (this.textColor) cssProperties["--RS__textColor"] = this.textColor;
+    if (this.typeScale) cssProperties["--RS__typeScale"] = this.toUnitless(this.typeScale);
+    if (this.visitedColor) cssProperties["--RS__visitedColor"] = this.visitedColor;
+
+    return cssProperties;
+  }
+}