feat(epub.js): add font size selector with precised + and - controls

cps/static/js/reading/epub.js

@@ -123,11 +123,7 @@ var reader;
     reader.book.ready.then(() => {
         const savedFontSize = localStorage.getItem("calibre.reader.fontSize");
         if (savedFontSize) {
-            const fontSizeFader = document.getElementById("fontSizeFader");
+            reader.rendition.themes.fontSize(`${savedFontSize}%`);
-            if (fontSizeFader) {
-                fontSizeFader.value = savedFontSize;
-                reader.rendition.themes.fontSize(`${savedFontSize}%`);
-            }
         }
     });
 })();

cps/templates/read.html

@@ -158,16 +158,40 @@
           </p>
         </div>
         <div class="form-group fontSizeWrapper">
-          <div class="slider">
+          <label>{{ _('Font Size') }}</label>
-            <label for="fader">{{ _('Font Sizes') }}</label>
+          <div
-            <input
+            class="font-size-controls"
-              type="range"
+            style="
-              min="75"
+              display: flex;
-              max="200"
+              align-items: center;
-              value="100"
+              gap: 10px;
-              id="fontSizeFader"
+              margin-top: 2px;
-              step="25"
+            "
-            />
+          >
+            <button
+              type="button"
+              id="fontSizeDecrease"
+              style="padding: 8px 15px; font-size: 18px; cursor: pointer"
+            >
+              −
+            </button>
+            <span
+              id="fontSizeDisplay"
+              style="
+                min-width: 60px;
+                text-align: center;
+                font-size: 14px;
+                font-weight: bold;
+              "
+              >100%</span
+            >
+            <button
+              type="button"
+              id="fontSizeIncrease"
+              style="padding: 8px 15px; font-size: 18px; cursor: pointer"
+            >
+              +
+            </button>
           </div>
         </div>
         <div class="font" id="font">
@@ -273,13 +297,40 @@
       }
 
       // font size settings logic
-      let fontSizeFader = document.getElementById("fontSizeFader");
+      let currentFontSize = 100; // default 100%
+      const minFontSize = 50;
+      const maxFontSize = 300;
+      const stepSize = 5;
 
-      // Save font size when changed
+      const fontSizeDisplay = document.getElementById("fontSizeDisplay");
-      fontSizeFader.addEventListener("change", function () {
+      const fontSizeDecrease = document.getElementById("fontSizeDecrease");
-        const fontSize = this.value;
+      const fontSizeIncrease = document.getElementById("fontSizeIncrease");
-        localStorage.setItem("calibre.reader.fontSize", fontSize);
+
-        reader.rendition.themes.fontSize(`${fontSize}%`);
+      function updateFontSize(newSize) {
+        if (newSize < minFontSize) newSize = minFontSize;
+        if (newSize > maxFontSize) newSize = maxFontSize;
+
+        currentFontSize = newSize;
+        fontSizeDisplay.textContent = newSize + "%";
+        localStorage.setItem("calibre.reader.fontSize", newSize);
+        if (reader && reader.rendition) {
+          reader.rendition.themes.fontSize(`${newSize}%`);
+        }
+      }
+
+      // Restore saved font size on load
+      const savedFontSize = localStorage.getItem("calibre.reader.fontSize");
+      if (savedFontSize) {
+        currentFontSize = parseInt(savedFontSize);
+        fontSizeDisplay.textContent = savedFontSize + "%";
+      }
+
+      fontSizeDecrease.addEventListener("click", function () {
+        updateFontSize(currentFontSize - stepSize);
+      });
+
+      fontSizeIncrease.addEventListener("click", function () {
+        updateFontSize(currentFontSize + stepSize);
       });
 
       let defaultFont;