Enable scroll padding left and right

navigator/docs/epub/ConfiguringEpubNavigator.md

@@ -112,6 +112,7 @@ EPUB comes in two very different flavors: reflowable which allows a lot of custo
 | hyphens                  | ✅         |              |
 | invertFilter             | ✅         | WIP          |
 | invertGaijiFilter        | ✅         |              |
+| iOSPatch                 | ✅         |              |
 | iPadOSPatch              | ✅         |              |
 | letterSpacing            | ✅         |              |
 | ligatures                | ✅         |              |
@@ -125,6 +126,10 @@ EPUB comes in two very different flavors: reflowable which allows a lot of custo
 | paragraphIndent          | ✅         |              |
 | paragraphSpacing         | ✅         |              |
 | scroll                   | ✅         |              |
+| scrollPaddingTop         | ✅         |              |
+| scrollPaddingBottom      | ✅         |              |
+| scrollPaddingLeft        | ✅         |              |
+| scrollPaddingRight       | ✅         |              |
 | selectionBackgroundColor | ✅         |              |
 | selectionTextColor       | ✅         |              |
 | textAlign                | ✅         |              |
@@ -142,8 +147,20 @@ There is no `lineLength` preference because the effective line length is calcula
 
 The `columnCount` preference is available only when in paginated mode (`scroll = false`).
 
+Padding is applied differently depending on the mode:
+
+- In paginated mode, `pageGutter` is used.
+- In scroll mode, `scrollPaddingLeft` and `scrollPaddingRight` are used.
+
 ### Language specific preferences
 
 - `hyphens` is available only for Left-to-Right languages.
-- `ligature` is available only when the publication language is Arabic or Persian.
-- `noRuby` is available only when the publication language is Japanese.
+- `ligatures` is disabled for Chinese, Japanese, Korean, and Traditional Mongolian languages.
+- `noRuby` is available only when the publication language is Japanese.
+
+### Patches
+
+- `iOSPatch` is designed to get around an issue with `zoom` on iOS.
+- `iPadOSPatch` is designed to get around an issue with `zoom` on iPadOS.
+
+Both are handled automatically by the Preferences API, but their values can be overridden if needed.

navigator/package.json

@@ -50,8 +50,7 @@
     "generate:css-selector": "node scripts/generate-css-selector.js"
   },
   "devDependencies": {
-    "@laynezh/vite-plugin-lib-assets": "^2.1.3",
-    "@readium/css": "2.0.0-beta.24",
+    "@readium/css": "^2.0.0",
     "@readium/navigator-html-injectables": "workspace:*",
     "@readium/shared": "workspace:*",
     "@types/path-browserify": "^1.0.3",

navigator/src/epub/EpubNavigator.ts

@@ -98,7 +98,9 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 optimalChars: this._settings.optimalLineLength,
                 minChars: this._settings.minimalLineLength,
                 maxChars: this._settings.maximalLineLength,
-                pageGutter: this._settings.pageGutter,
+                padding: this._settings.scroll 
+                    ? (this._settings.scrollPaddingLeft || 0) + (this._settings.scrollPaddingRight || 0)
+                    : (this._settings.pageGutter || 0) * 2,
                 fontFace: this._settings.fontFamily,
                 letterSpacing: this._settings.letterSpacing,
                 wordSpacing: this._settings.wordSpacing,

navigator/src/epub/css/Properties.ts

@@ -203,8 +203,8 @@ export interface IRSProperties {
   sansSerifJaV?: string | null;
   sansTf?: string | null;
   scrollPaddingBottom?: number | null;
-  // scrollPaddingLeft?: number | null;
-  // scrollPaddingRight?: number | null;
+  scrollPaddingLeft?: number | null;
+  scrollPaddingRight?: number | null;
   scrollPaddingTop?: number | null;
   secondaryColor?: string | null;
   selectionBackgroundColor?: string | null;
@@ -248,8 +248,8 @@ export class RSProperties extends Properties {
   sansSerifJaV: string | null;
   sansTf: string | null;
   scrollPaddingBottom: number | null;
-  // scrollPaddingLeft: number | null;
-  // scrollPaddingRight: number | null;
+  scrollPaddingLeft: number | null;
+  scrollPaddingRight: number | null;
   scrollPaddingTop: number | null;
   secondaryColor: string | null;
   selectionBackgroundColor: string | null;
@@ -290,8 +290,8 @@ export class RSProperties extends Properties {
     this.paraSpacing = props.paraSpacing ?? null;
     this.primaryColor = props.primaryColor ?? null;
     this.scrollPaddingBottom = props.scrollPaddingBottom ?? null;
-    // this.scrollPaddingLeft = props.scrollPaddingLeft ?? null;
-    // this.scrollPaddingRight = props.scrollPaddingRight ?? null;
+    this.scrollPaddingLeft = props.scrollPaddingLeft ?? null;
+    this.scrollPaddingRight = props.scrollPaddingRight ?? null;
     this.scrollPaddingTop = props.scrollPaddingTop ?? null;
     this.sansSerifJa = props.sansSerifJa ?? null;
     this.sansSerifJaV = props.sansSerifJaV ?? null;
@@ -340,8 +340,8 @@ export class RSProperties extends Properties {
     if (this.sansSerifJaV) cssProperties["--RS__sans-serif-ja-v"] = this.sansSerifJaV;
     if (this.sansTf) cssProperties["--RS__sansTf"] = this.sansTf;
     if (this.scrollPaddingBottom != null) cssProperties["--RS__scrollPaddingBottom"] = this.toPx(this.scrollPaddingBottom);
-    // if (this.scrollPaddingLeft != null) cssProperties["--RS__scrollPaddingLeft"] = this.toPx(this.scrollPaddingLeft);
-    // if (this.scrollPaddingRight != null) cssProperties["--RS__scrollPaddingRight"] = this.toPx(this.scrollPaddingRight);
+    if (this.scrollPaddingLeft != null) cssProperties["--RS__scrollPaddingLeft"] = this.toPx(this.scrollPaddingLeft);
+    if (this.scrollPaddingRight != null) cssProperties["--RS__scrollPaddingRight"] = this.toPx(this.scrollPaddingRight);
     if (this.scrollPaddingTop != null) cssProperties["--RS__scrollPaddingTop"] = this.toPx(this.scrollPaddingTop);
     if (this.secondaryColor) cssProperties["--RS__secondaryColor"] = this.secondaryColor;
     if (this.selectionBackgroundColor) cssProperties["--RS__selectionBackgroundColor"] = this.selectionBackgroundColor;

navigator/src/epub/css/ReadiumCSS.ts

@@ -45,11 +45,11 @@ export class ReadiumCSS {
     if (settings.scrollPaddingBottom !== this.rsProperties.scrollPaddingBottom)
       this.rsProperties.scrollPaddingBottom = settings.scrollPaddingBottom;
 
-    // if (settings.scrollPaddingLeft !== this.rsProperties.scrollPaddingLeft)
-    //   this.rsProperties.scrollPaddingLeft = settings.scrollPaddingLeft;
+    if (settings.scrollPaddingLeft !== this.rsProperties.scrollPaddingLeft)
+      this.rsProperties.scrollPaddingLeft = settings.scrollPaddingLeft;
 
-    // if (settings.scrollPaddingRight !== this.rsProperties.scrollPaddingRight)
-    //   this.rsProperties.scrollPaddingRight = settings.scrollPaddingRight;
+    if (settings.scrollPaddingRight !== this.rsProperties.scrollPaddingRight)
+      this.rsProperties.scrollPaddingRight = settings.scrollPaddingRight;
 
     if (settings.scrollPaddingTop !== this.rsProperties.scrollPaddingTop)
       this.rsProperties.scrollPaddingTop = settings.scrollPaddingTop;
@@ -62,7 +62,9 @@ export class ReadiumCSS {
     this.lineLengths.update({
       fontFace: settings.fontFamily,
       letterSpacing: settings.letterSpacing,
-      pageGutter: settings.pageGutter,
+      padding: settings.scroll 
+        ? (settings.scrollPaddingLeft || 0) + (settings.scrollPaddingRight || 0)
+        : (settings.pageGutter || 0) * 2,
       wordSpacing: settings.wordSpacing,
       optimalChars: settings.optimalLineLength,
       minChars: settings.minimalLineLength,

navigator/src/epub/preferences/EpubDefaults.ts

@@ -53,8 +53,8 @@ export interface IEpubDefaults {
   scroll?: boolean | null,
   scrollPaddingTop?: number | null,
   scrollPaddingBottom?: number | null,
-  // scrollPaddingLeft?: number | null,
-  // scrollPaddingRight?: number | null,
+  scrollPaddingLeft?: number | null,
+  scrollPaddingRight?: number | null,
   selectionBackgroundColor?: string | null,
   selectionTextColor?: string | null,
   textAlign?: TextAlignment | null,
@@ -97,8 +97,8 @@ export class EpubDefaults {
   scroll: boolean | null;
   scrollPaddingTop: number | null;
   scrollPaddingBottom: number | null;
-  // scrollPaddingLeft: number | null;
-  // scrollPaddingRight: number | null;
+  scrollPaddingLeft: number | null;
+  scrollPaddingRight: number | null;
   selectionBackgroundColor: string | null;
   selectionTextColor: string | null;
   textAlign: TextAlignment | null;
@@ -144,8 +144,8 @@ export class EpubDefaults {
     this.scroll = ensureBoolean(defaults.scroll) ?? false;
     this.scrollPaddingTop = ensureNonNegative(defaults.scrollPaddingTop) ?? null;
     this.scrollPaddingBottom = ensureNonNegative(defaults.scrollPaddingBottom) ?? null;
-    // this.scrollPaddingLeft = ensureNonNegative(defaults.scrollPaddingLeft) ?? null;
-    // this.scrollPaddingRight = ensureNonNegative(defaults.scrollPaddingRight) ?? null;
+    this.scrollPaddingLeft = ensureNonNegative(defaults.scrollPaddingLeft) ?? null;
+    this.scrollPaddingRight = ensureNonNegative(defaults.scrollPaddingRight) ?? null;
     this.selectionBackgroundColor = ensureString(defaults.selectionBackgroundColor) || null;
     this.selectionTextColor = ensureString(defaults.selectionTextColor) || null;
     this.textAlign = ensureEnumValue<TextAlignment>(defaults.textAlign, TextAlignment) || null;

navigator/src/epub/preferences/EpubPreferences.ts

@@ -48,8 +48,8 @@ export interface IEpubPreferences {
   scroll?: boolean | null,
   scrollPaddingTop?: number | null,
   scrollPaddingBottom?: number | null,
-  // scrollPaddingLeft?: number | null,
-  // scrollPaddingRight?: number | null,
+  scrollPaddingLeft?: number | null,
+  scrollPaddingRight?: number | null,
   selectionBackgroundColor?: string | null,
   selectionTextColor?: string | null,
   textAlign?: TextAlignment | null,
@@ -91,8 +91,8 @@ export class EpubPreferences implements ConfigurablePreferences {
   scroll?: boolean | null;
   scrollPaddingTop?: number | null;
   scrollPaddingBottom?: number | null;
-  // scrollPaddingLeft?: number | null;
-  // scrollPaddingRight?: number | null;
+  scrollPaddingLeft?: number | null;
+  scrollPaddingRight?: number | null;
   selectionBackgroundColor?: string | null;
   selectionTextColor?: string | null;
   textAlign?: TextAlignment | null;
@@ -130,8 +130,8 @@ export class EpubPreferences implements ConfigurablePreferences {
     this.scroll = ensureBoolean(preferences.scroll);
     this.scrollPaddingTop = ensureNonNegative(preferences.scrollPaddingTop);
     this.scrollPaddingBottom = ensureNonNegative(preferences.scrollPaddingBottom);
-    // this.scrollPaddingLeft = ensureNonNegative(preferences.scrollPaddingLeft);
-    // this.scrollPaddingRight = ensureNonNegative(preferences.scrollPaddingRight);
+    this.scrollPaddingLeft = ensureNonNegative(preferences.scrollPaddingLeft);
+    this.scrollPaddingRight = ensureNonNegative(preferences.scrollPaddingRight);
     this.selectionBackgroundColor = ensureString(preferences.selectionBackgroundColor);
     this.selectionTextColor = ensureString(preferences.selectionTextColor);
     this.textAlign = ensureEnumValue<TextAlignment>(preferences.textAlign, TextAlignment);

navigator/src/epub/preferences/EpubPreferencesEditor.ts

@@ -364,7 +364,7 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
     return new Preference<number>({
       initialValue: this.preferences.pageGutter,
       effectiveValue: this.settings.pageGutter,
-      isEffective: this.layout !== Layout.fixed,
+      isEffective: this.layout !== Layout.fixed && !this.settings.scroll,
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("pageGutter", newValue || null);
       }
@@ -430,7 +430,6 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
     });
   }
 
-  /* 
   get scrollPaddingLeft(): Preference<number> {
     return new Preference<number>({
       initialValue: this.preferences.scrollPaddingLeft,
@@ -452,7 +451,6 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       }
     });
   } 
-  */
 
   get selectionBackgroundColor(): Preference<string> {
     return new Preference<string>({

navigator/src/epub/preferences/EpubSettings.ts

@@ -37,8 +37,8 @@ export interface IEpubSettings {
   scroll?: boolean | null,
   scrollPaddingTop?: number | null,
   scrollPaddingBottom?: number | null,
-  // scrollPaddingLeft?: number | null,
-  // scrollPaddingRight?: number | null,
+  scrollPaddingLeft?: number | null,
+  scrollPaddingRight?: number | null,
   selectionBackgroundColor?: string | null,
   selectionTextColor?: string | null,
   textAlign?: TextAlignment | null,
@@ -81,8 +81,8 @@ export class EpubSettings implements ConfigurableSettings {
   scroll: boolean | null;
   scrollPaddingTop: number | null;
   scrollPaddingBottom: number | null;
-  // scrollPaddingLeft: number | null;
-  // scrollPaddingRight: number | null;
+  scrollPaddingLeft: number | null;
+  scrollPaddingRight: number | null;
   selectionBackgroundColor: string | null;
   selectionTextColor: string | null;
   textAlign: TextAlignment | null;
@@ -205,8 +205,7 @@ export class EpubSettings implements ConfigurableSettings {
       ? preferences.scrollPaddingBottom 
       : defaults.scrollPaddingBottom !== undefined 
         ? defaults.scrollPaddingBottom 
-        : null;
-    /* 
+        : null; 
     this.scrollPaddingLeft = preferences.scrollPaddingLeft !== undefined 
       ? preferences.scrollPaddingLeft 
       : defaults.scrollPaddingLeft !== undefined 
@@ -217,7 +216,6 @@ export class EpubSettings implements ConfigurableSettings {
       : defaults.scrollPaddingRight !== undefined 
         ? defaults.scrollPaddingRight 
         : null;
-    */
     this.selectionBackgroundColor = preferences.selectionBackgroundColor || defaults.selectionBackgroundColor || null;
     this.selectionTextColor = preferences.selectionTextColor || defaults.selectionTextColor || null;
     this.textAlign = preferences.textAlign || defaults.textAlign || null;

navigator/src/helpers/lineLength.ts

@@ -11,7 +11,7 @@ export interface ILineLengthsConfig {
   maxChars?: number | null;
   baseFontSize?: number | null;
   sample?: string | null;
-  pageGutter?: number | null;
+  padding?: number | null;
   fontFace?: string | ICustomFontFace | null;
   letterSpacing?: number | null;
   wordSpacing?: number | null;
@@ -51,13 +51,12 @@ export class LineLengths {
   private _baseFontSize: number;
   private _fontFace: string | ICustomFontFace;
   private _sample: string | null;
-  private _pageGutter: number;
+  private _padding: number;
   private _letterSpacing: number;
   private _wordSpacing: number;
   private _isCJK: boolean;
   private _getRelative: boolean;
 
-  private _padding: number;
   private _minDivider: number | null;
   private _maxMultiplier: number | null;
   private _approximatedWordSpaces: number;
@@ -72,7 +71,7 @@ export class LineLengths {
     this._baseFontSize = config.baseFontSize || DEFAULT_FONT_SIZE;
     this._fontFace = config.fontFace || DEFAULT_FONT_FACE;
     this._sample = config.sample || null;
-    this._pageGutter = config.pageGutter || 0;
+    this._padding = config.padding ?? 0;
     this._letterSpacing = config.letterSpacing 
       ? Math.round(config.letterSpacing * this._baseFontSize) 
       : 0;
@@ -81,7 +80,6 @@ export class LineLengths {
       : 0;
     this._isCJK = config.isCJK || false;
     this._getRelative = config.getRelative || false;
-    this._padding = this._pageGutter * 2;
     this._minDivider = this._minChars && this._minChars < this._optimalChars 
       ? this._optimalChars / this._minChars 
       : this._minChars === null 
@@ -121,7 +119,7 @@ export class LineLengths {
     if (props.letterSpacing) this._letterSpacing = props.letterSpacing;
     if (props.wordSpacing) this._wordSpacing = props.wordSpacing;
     if (props.isCJK != null) this._isCJK = props.isCJK;
-    if (props.pageGutter) this._pageGutter = props.pageGutter;
+    if (props.padding !== undefined) this._padding = props.padding ?? 0;
     if (props.getRelative) this._getRelative = props.getRelative;
 
     if (props.sample) {

navigator/vite.config.js

@@ -1,15 +1,8 @@
 import { resolve } from "path";
 import { defineConfig } from "vite";
-import libAssetsPlugin from "@laynezh/vite-plugin-lib-assets";
 import packageJson from "./package.json";
 
 export default defineConfig({
-  plugins: [
-    libAssetsPlugin({
-      extensions: [".jpg", ".png", ".svg", ".otf", ".ttf", ".woff", ".woff2"],
-      name: "[name].[ext]"
-    })
-  ],
   build: {
     lib: {
       entry: resolve(__dirname, "src/index.ts"),