fix(layout): adjust font size instead of zooming HTML, closes #2088 (#2101)

Prevents issues with zoom handling in WebKit-based browsers such as Safari and WebKitGTK.

apps/readest-app/public/locales/ar/translation.json

@@ -581,5 +581,14 @@
   "Minimize": "تصغير",
   "Maximize or Restore": "تكبير أو استعادة",
   "Exit Parallel Read": "الخروج من القراءة المتزامنة",
-  "Enter Parallel Read": "الدخول في القراءة المتزامنة"
+  "Enter Parallel Read": "الدخول في القراءة المتزامنة",
+  "Zoom Level": "مستوى التكبير",
+  "Zoom Out": "تصغير",
+  "Reset Zoom": "إعادة تعيين التكبير",
+  "Zoom In": "تكبير",
+  "Zoom Mode": "وضع التكبير",
+  "Single Page": "صفحة واحدة",
+  "Auto Spread": "انتشار تلقائي",
+  "Fit Page": "تناسب الصفحة",
+  "Fit Width": "تناسب العرض"
 }

apps/readest-app/public/locales/bn/translation.json

@@ -565,5 +565,14 @@
   "Minimize": "সঙ্কুচিত করুন",
   "Maximize or Restore": "বৃহৎ করুন বা পুনরুদ্ধার করুন",
   "Exit Parallel Read": "সমান্তরাল পড়া থেকে বেরিয়ে আসুন",
-  "Enter Parallel Read": "সমান্তরাল পড়ায় প্রবেশ করুন"
+  "Enter Parallel Read": "সমান্তরাল পড়ায় প্রবেশ করুন",
+  "Zoom Level": "জুম লেভেল",
+  "Zoom Out": "জুম আউট",
+  "Reset Zoom": "জুম রিসেট",
+  "Zoom In": "জুম ইন",
+  "Zoom Mode": "জুম মোড",
+  "Single Page": "একক পৃষ্ঠা",
+  "Auto Spread": "অটো স্প্রেড",
+  "Fit Page": "ফিট পৃষ্ঠা",
+  "Fit Width": "ফিট প্রস্থ"
 }

apps/readest-app/public/locales/bo/translation.json

@@ -561,5 +561,14 @@
   "Minimize": "ཆུང་དུ་བསྡུ།",
   "Maximize or Restore": "ཆེན་པོ་བཟོ/གསོག།",
   "Exit Parallel Read": "མཉམ་དུ་ཀློག་ཕྱིར་འཐེན།",
-  "Enter Parallel Read": "མཉམ་དུ་ཀློག་འཛུལ།"
+  "Enter Parallel Read": "མཉམ་དུ་ཀློག་འཛུལ།",
+  "Zoom Level": "རྒྱབ་སྐོར་གྱི་གདམ་ཁ",
+  "Zoom Out": "རྒྱབ་སྐོར་བཏང་བ།",
+  "Reset Zoom": "རྒྱབ་སྐོར་རྩོལ་བ།",
+  "Zoom In": "རྒྱབ་སྐོར་འཕེལ་བ།",
+  "Zoom Mode": "རྒྱབ་སྐོར་སྤོ་བ།",
+  "Single Page": "དེབ་གཅིག",
+  "Auto Spread": "རང་འགུལ་སྤྲོད།",
+  "Fit Page": "དེབ་འདེམས་པ།",
+  "Fit Width": "ཁྱབ་སྒྲིག་འདེམས་པ།"
 }

apps/readest-app/public/locales/de/translation.json

@@ -565,5 +565,14 @@
   "Minimize": "Minimieren",
   "Maximize or Restore": "Maximieren oder Wiederherstellen",
   "Exit Parallel Read": "Parallel Read beenden",
-  "Enter Parallel Read": "Parallel Read starten"
+  "Enter Parallel Read": "Parallel Read starten",
+  "Zoom Level": "Zoomstufe",
+  "Zoom Out": "Hineinzoomen",
+  "Reset Zoom": "Zoom zurücksetzen",
+  "Zoom In": "Herauszoomen",
+  "Zoom Mode": "Zoom-Modus",
+  "Single Page": "Einzelne Seite",
+  "Auto Spread": "Automatische Verbreitung",
+  "Fit Page": "Seite anpassen",
+  "Fit Width": "Breite anpassen"
 }

apps/readest-app/public/locales/el/translation.json

@@ -565,5 +565,14 @@
   "Minimize": "Ελαχιστοποίηση",
   "Maximize or Restore": "Μεγιστοποίηση ή Επαναφορά",
   "Exit Parallel Read": "Έξοδος από την παράλληλη ανάγνωση",
-  "Enter Parallel Read": "Είσοδος στην παράλληλη ανάγνωση"
+  "Enter Parallel Read": "Είσοδος στην παράλληλη ανάγνωση",
+  "Zoom Level": "Επίπεδο ζουμ",
+  "Zoom Out": "Μείωση ζουμ",
+  "Reset Zoom": "Επαναφορά ζουμ",
+  "Zoom In": "Αύξηση ζουμ",
+  "Zoom Mode": "Λειτουργία ζουμ",
+  "Single Page": "Μοναδική σελίδα",
+  "Auto Spread": "Αυτόματη εξάπλωση",
+  "Fit Page": "Προσαρμογή σελίδας",
+  "Fit Width": "Προσαρμογή πλάτους"
 }

apps/readest-app/public/locales/es/translation.json

@@ -569,5 +569,14 @@
   "Minimize": "Minimizar",
   "Maximize or Restore": "Maximizar o Restaurar",
   "Exit Parallel Read": "Salir de Lectura Paralela",
-  "Enter Parallel Read": "Entrar en Lectura Paralela"
+  "Enter Parallel Read": "Entrar en Lectura Paralela",
+  "Zoom Level": "Nivel de Zoom",
+  "Zoom Out": "Alejar",
+  "Reset Zoom": "Restablecer Zoom",
+  "Zoom In": "Acercar",
+  "Zoom Mode": "Modo de Zoom",
+  "Single Page": "Página Única",
+  "Auto Spread": "Distribución Automática",
+  "Fit Page": "Ajustar Página",
+  "Fit Width": "Ajustar Ancho"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -569,5 +569,14 @@
   "Minimize": "Minimiser",
   "Maximize or Restore": "Maximiser ou Restaurer",
   "Exit Parallel Read": "Quitter la Lecture Parallèle",
-  "Enter Parallel Read": "Entrer dans la Lecture Parallèle"
+  "Enter Parallel Read": "Entrer dans la Lecture Parallèle",
+  "Zoom Level": "Zoom",
+  "Zoom Out": "Réduire le Zoom",
+  "Reset Zoom": "Réinitialiser le Zoom",
+  "Zoom In": "Agrandir le Zoom",
+  "Zoom Mode": "Mode Zoom",
+  "Single Page": "Page Unique",
+  "Auto Spread": "Répartition Automatique",
+  "Fit Page": "Ajuster la Page",
+  "Fit Width": "Ajuster la Largeur"
 }

apps/readest-app/public/locales/hi/translation.json

@@ -565,5 +565,14 @@
   "Minimize": "न्यूनतम करें",
   "Maximize or Restore": "अधिकतम या पुनर्स्थापित करें",
   "Exit Parallel Read": "पैरालल रीड से बाहर निकलें",
-  "Enter Parallel Read": "पैरालल रीड में प्रवेश करें"
+  "Enter Parallel Read": "पैरालल रीड में प्रवेश करें",
+  "Zoom Level": "ज़ूम स्तर",
+  "Zoom Out": "ज़ूम आउट",
+  "Reset Zoom": "ज़ूम रीसेट करें",
+  "Zoom In": "ज़ूम इन",
+  "Zoom Mode": "ज़ूम मोड",
+  "Single Page": "एकल पृष्ठ",
+  "Auto Spread": "स्वचालित फैलाव",
+  "Fit Page": "पृष्ठ में फिट करें",
+  "Fit Width": "चौड़ाई में फिट करें"
 }

apps/readest-app/public/locales/id/translation.json

@@ -561,5 +561,14 @@
   "Minimize": "Minimalkan",
   "Maximize or Restore": "Maksimalkan atau Pulihkan",
   "Exit Parallel Read": "Keluar dari Baca Paralel",
-  "Enter Parallel Read": "Masuk ke Baca Paralel"
+  "Enter Parallel Read": "Masuk ke Baca Paralel",
+  "Zoom Level": "Level Zoom",
+  "Zoom Out": "Perbesar Zoom",
+  "Reset Zoom": "Reset Zoom",
+  "Zoom In": "Perkecil Zoom",
+  "Zoom Mode": "Mode Zoom",
+  "Single Page": "Halaman Tunggal",
+  "Auto Spread": "Penyebaran Otomatis",
+  "Fit Page": "Sesuaikan Halaman",
+  "Fit Width": "Sesuaikan Lebar"
 }

apps/readest-app/public/locales/it/translation.json

@@ -569,5 +569,14 @@
   "Minimize": "Minimalkan",
   "Maximize or Restore": "Maksimalkan atau Pulihkan",
   "Exit Parallel Read": "Esci dalla lettura parallela",
-  "Enter Parallel Read": "Entra nella lettura parallela"
+  "Enter Parallel Read": "Entra nella lettura parallela",
+  "Zoom Level": "Livello di zoom",
+  "Zoom Out": "Riduci zoom",
+  "Reset Zoom": "Ripristina zoom",
+  "Zoom In": "Inganna zoom",
+  "Zoom Mode": "Modalità zoom",
+  "Single Page": "Pagina singola",
+  "Auto Spread": "Distribuzione automatica",
+  "Fit Page": "Adatta pagina",
+  "Fit Width": "Adatta larghezza"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -561,5 +561,14 @@
   "Minimize": "最小化",
   "Maximize or Restore": "最大化または復元",
   "Exit Parallel Read": "並行読書を終了",
-  "Enter Parallel Read": "並行読書に入る"
+  "Enter Parallel Read": "並行読書に入る",
+  "Zoom Level": "ズームレベル",
+  "Zoom Out": "ズームアウト",
+  "Reset Zoom": "ズームリセット",
+  "Zoom In": "ズームイン",
+  "Zoom Mode": "ズームモード",
+  "Single Page": "シングルページ",
+  "Auto Spread": "自動スプレッド",
+  "Fit Page": "ページに合わせる",
+  "Fit Width": "幅に合わせる"
 }

apps/readest-app/public/locales/ko/translation.json

@@ -561,5 +561,14 @@
   "Minimize": "최소화",
   "Maximize or Restore": "최대화 또는 복원",
   "Exit Parallel Read": "병렬 읽기 종료",
-  "Enter Parallel Read": "병렬 읽기 시작"
+  "Enter Parallel Read": "병렬 읽기 시작",
+  "Zoom Level": "확대/축소 수준",
+  "Zoom Out": "축소",
+  "Reset Zoom": "줌 재설정",
+  "Zoom In": "확대",
+  "Zoom Mode": "줌 모드",
+  "Single Page": "단일 페이지",
+  "Auto Spread": "자동 스프레드",
+  "Fit Page": "페이지에 맞춤",
+  "Fit Width": "너비에 맞춤"
 }

apps/readest-app/public/locales/nl/translation.json

@@ -565,5 +565,14 @@
   "Minimize": "Minimaliseren",
   "Maximize or Restore": "Maximaliseren of Herstellen",
   "Exit Parallel Read": "Parallel Lezen Afsluiten",
-  "Enter Parallel Read": "Parallel Lezen Starten"
+  "Enter Parallel Read": "Parallel Lezen Starten",
+  "Zoom Level": "Zoomniveau",
+  "Zoom Out": "Zoom Verkleinen",
+  "Reset Zoom": "Zoom Reset",
+  "Zoom In": "Zoom Vergroten",
+  "Zoom Mode": "Zoom Modus",
+  "Single Page": "Enkele Pagina",
+  "Auto Spread": "Automatische Verspreiding",
+  "Fit Page": "Pagina Aanpassen",
+  "Fit Width": "Breedte Aanpassen"
 }

apps/readest-app/public/locales/pl/translation.json

@@ -573,5 +573,14 @@
   "Minimize": "Minimalizuj",
   "Maximize or Restore": "Maksymalizuj lub Przywróć",
   "Exit Parallel Read": "Wyjdź z czytania równoległego",
-  "Enter Parallel Read": "Wejdź w czytanie równoległe"
+  "Enter Parallel Read": "Wejdź w czytanie równoległe",
+  "Zoom Level": "Poziom powiększenia",
+  "Zoom Out": "Zoom Wydłuż",
+  "Reset Zoom": "Resetuj Zoom",
+  "Zoom In": "Zoom Skróć",
+  "Zoom Mode": "Tryb Zoom",
+  "Single Page": "Pojedyncza Strona",
+  "Auto Spread": "Automatyczne Rozprzestrzenianie",
+  "Fit Page": "Dopasuj Stronę",
+  "Fit Width": "Dopasuj Szerokość"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -569,5 +569,14 @@
   "Minimize": "Minimizar",
   "Maximize or Restore": "Maximizar ou Restaurar",
   "Exit Parallel Read": "Sair da Leitura Paralela",
-  "Enter Parallel Read": "Entrar na Leitura Paralela"
+  "Enter Parallel Read": "Entrar na Leitura Paralela",
+  "Zoom Level": "Nivel de Zoom",
+  "Zoom Out": "Reduzir Zoom",
+  "Reset Zoom": "Redefinir Zoom",
+  "Zoom In": "Aumentar Zoom",
+  "Zoom Mode": "Modo de Zoom",
+  "Single Page": "Página Única",
+  "Auto Spread": "Espalhamento Automático",
+  "Fit Page": "Ajustar Página",
+  "Fit Width": "Ajustar Largura"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -573,5 +573,14 @@
   "Minimize": "Свернуть",
   "Maximize or Restore": "Максимизировать или восстановить",
   "Exit Parallel Read": "Выйти из параллельного чтения",
-  "Enter Parallel Read": "Войти в параллельное чтение"
+  "Enter Parallel Read": "Войти в параллельное чтение",
+  "Zoom Level": "Уровень масштабирования",
+  "Zoom Out": "Уменьшить масштаб",
+  "Reset Zoom": "Сбросить масштаб",
+  "Zoom In": "Увеличить масштаб",
+  "Zoom Mode": "Режим масштабирования",
+  "Single Page": "Одна страница",
+  "Auto Spread": "Автоматическое растяжение",
+  "Fit Page": "Подогнать страницу",
+  "Fit Width": "Подогнать ширину"
 }

apps/readest-app/public/locales/si/translation.json

@@ -565,5 +565,14 @@
   "Minimize": "අඩු කරන්න",
   "Maximize or Restore": "ඉහළ නැංවීම හෝ ප්‍රතිසංස්කරණය",
   "Exit Parallel Read": "සමාන්තර කියවීමෙන් පිටවන්න",
-  "Enter Parallel Read": "සමාන්තර කියවීමේදී පිවිසෙන්න"
+  "Enter Parallel Read": "සමාන්තර කියවීමේදී පිවිසෙන්න",
+  "Zoom Level": "සංයුතිය මට්ටම",
+  "Zoom Out": "සංයුතිය අඩු කරන්න",
+  "Reset Zoom": "සංයුතිය නැවත සකසන්න",
+  "Zoom In": "සංයුතිය වැඩි කරන්න",
+  "Zoom Mode": "සංයුතිය ආකාරය",
+  "Single Page": "එක් පිටුව",
+  "Auto Spread": "ස්වයංක්‍රීය ව්‍යාප්තිය",
+  "Fit Page": "පිටුවට ගැලපෙන ලෙස",
+  "Fit Width": "පැතිකඩට ගැලපෙන ලෙස"
 }

apps/readest-app/public/locales/ta/translation.json

@@ -565,5 +565,14 @@
   "Minimize": "சிறிது செய்யவும்",
   "Maximize or Restore": "அதிகரிக்கவும் அல்லது மீட்டமைக்கவும்",
   "Exit Parallel Read": "இணை வாசிப்பை வெளியேறு",
-  "Enter Parallel Read": "இணை வாசிப்பில் நுழையவும்"
+  "Enter Parallel Read": "இணை வாசிப்பில் நுழையவும்",
+  "Zoom Level": "ஜூம் நிலை",
+  "Zoom Out": "ஜூம் குறைக்கவும்",
+  "Reset Zoom": "ஜூம் மீட்டமைக்கவும்",
+  "Zoom In": "ஜூம் அதிகரிக்கவும்",
+  "Zoom Mode": "ஜூம் முறை",
+  "Single Page": "ஒரு பக்கம்",
+  "Auto Spread": "தானாக பரவல்",
+  "Fit Page": "பக்கத்திற்கு பொருந்தும்",
+  "Fit Width": "அகலத்திற்கு பொருந்தும்"
 }

apps/readest-app/public/locales/th/translation.json

@@ -561,5 +561,14 @@
   "Minimize": "ย่อ",
   "Maximize or Restore": "ขยายหรือคืนค่า",
   "Exit Parallel Read": "ออกจากการอ่านคู่ขนาน",
-  "Enter Parallel Read": "เริ่มการอ่านคู่ขนาน"
+  "Enter Parallel Read": "เริ่มการอ่านคู่ขนาน",
+  "Zoom Level": "ระดับการซูม",
+  "Zoom Out": "ลดระดับการซูม",
+  "Reset Zoom": "รีเซ็ตระดับการซูม",
+  "Zoom In": "เพิ่มระดับการซูม",
+  "Zoom Mode": "โหมดการซูม",
+  "Single Page": "หน้าเดียว",
+  "Auto Spread": "การกระจายอัตโนมัติ",
+  "Fit Page": "พอดีกับหน้า",
+  "Fit Width": "พอดีกับความกว้าง"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -565,5 +565,14 @@
   "Minimize": "Küçült",
   "Maximize or Restore": "Büyüt veya Geri Yükle",
   "Exit Parallel Read": "Paralel Okumadan Çık",
-  "Enter Parallel Read": "Paralel Okumaya Gir"
+  "Enter Parallel Read": "Paralel Okumaya Gir",
+  "Zoom Level": "Yakınlaştırma Düzeyi",
+  "Zoom Out": "Yakınlaştırmayı Kaldır",
+  "Reset Zoom": "Yakınlaştırmayı Sıfırla",
+  "Zoom In": "Yakınlaştırmayı Artır",
+  "Zoom Mode": "Yakınlaştırma Modu",
+  "Single Page": "Tek Sayfa",
+  "Auto Spread": "Otomatik Yayılma",
+  "Fit Page": "Sayfaya Sığdır",
+  "Fit Width": "Genişliğe Sığdır"
 }

apps/readest-app/public/locales/uk/translation.json

@@ -573,5 +573,14 @@
   "Minimize": "Згорнути",
   "Maximize or Restore": "Збільшити або відновити",
   "Exit Parallel Read": "Вийти з паралельного читання",
-  "Enter Parallel Read": "Войти в параллельное чтение"
+  "Enter Parallel Read": "Войти в параллельное чтение",
+  "Zoom Level": "Рівень масштабування",
+  "Zoom Out": "Зменшити масштаб",
+  "Reset Zoom": "Скинути масштаб",
+  "Zoom In": "Збільшити масштаб",
+  "Zoom Mode": "Режим масштабування",
+  "Single Page": "Одна сторінка",
+  "Auto Spread": "Автоматичне розповсюдження",
+  "Fit Page": "Підганяти під сторінку",
+  "Fit Width": "Підганяти під ширину"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -561,5 +561,14 @@
   "Minimize": "Thu nhỏ",
   "Maximize or Restore": "Tối đa hóa hoặc Khôi phục",
   "Exit Parallel Read": "Thoát Đọc Song Song",
-  "Enter Parallel Read": "Vào Đọc Song Song"
+  "Enter Parallel Read": "Vào Đọc Song Song",
+  "Zoom Level": "Độ phóng to",
+  "Zoom Out": "Thu nhỏ",
+  "Reset Zoom": "Đặt lại độ phóng to",
+  "Zoom In": "Phóng to",
+  "Zoom Mode": "Chế độ phóng to",
+  "Single Page": "Một trang",
+  "Auto Spread": "Tự động trải rộng",
+  "Fit Page": "Vừa trang",
+  "Fit Width": "Vừa chiều rộng"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -561,5 +561,14 @@
   "Minimize": "最小化",
   "Maximize or Restore": "最大化或还原",
   "Exit Parallel Read": "退出并排阅读",
-  "Enter Parallel Read": "进入并排阅读"
+  "Enter Parallel Read": "进入并排阅读",
+  "Zoom Level": "缩放级别",
+  "Zoom Out": "缩小",
+  "Reset Zoom": "重置缩放",
+  "Zoom In": "放大",
+  "Zoom Mode": "缩放模式",
+  "Single Page": "单页",
+  "Auto Spread": "自动展开",
+  "Fit Page": "适应页面",
+  "Fit Width": "适应宽度"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -561,5 +561,14 @@
   "Minimize": "最小化",
   "Maximize or Restore": "最大化或還原",
   "Exit Parallel Read": "退出並排閱讀",
-  "Enter Parallel Read": "進入並排閱讀"
+  "Enter Parallel Read": "進入並排閱讀",
+  "Zoom Level": "縮放級別",
+  "Zoom Out": "縮小",
+  "Reset Zoom": "重置縮放",
+  "Zoom In": "放大",
+  "Zoom Mode": "縮放模式",
+  "Single Page": "單頁",
+  "Auto Spread": "自動展開",
+  "Fit Page": "適應頁面",
+  "Fit Width": "適應寬度"
 }

apps/readest-app/src/app/reader/components/ViewMenu.tsx

@@ -157,86 +157,101 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
         marginRight: window.innerWidth < 640 ? '-36px' : '0px',
       }}
     >
-      <div className={clsx('flex items-center justify-between rounded-md')}>
-        <button
-          onClick={zoomOut}
-          className={clsx(
-            'hover:bg-base-300 text-base-content rounded-full p-2',
-            zoomLevel <= MIN_ZOOM_LEVEL && 'btn-disabled text-gray-400',
-          )}
-        >
-          <MdZoomOut />
-        </button>
-        <button
-          className={clsx(
-            'hover:bg-base-300 text-base-content h-8 min-h-8 w-[50%] rounded-md p-1 text-center',
-          )}
-          onClick={resetZoom}
-        >
-          {zoomLevel}%
-        </button>
-        <button
-          onClick={zoomIn}
-          className={clsx(
-            'hover:bg-base-300 text-base-content rounded-full p-2',
-            zoomLevel >= MAX_ZOOM_LEVEL && 'btn-disabled text-gray-400',
-          )}
-        >
-          <MdZoomIn />
-        </button>
-      </div>
-
       {bookData.bookDoc?.rendition?.layout === 'pre-paginated' && (
         <>
-          <div className={clsx('my-2 flex items-center justify-between rounded-md')}>
+          <div
+            title={_('Zoom Level')}
+            className={clsx('flex items-center justify-between rounded-md')}
+          >
             <button
-              onClick={setSpreadMode.bind(null, 'none')}
+              title={_('Zoom Out')}
+              onClick={zoomOut}
               className={clsx(
                 'hover:bg-base-300 text-base-content rounded-full p-2',
-                spreadMode === 'none' && 'bg-base-300/75',
+                zoomLevel <= MIN_ZOOM_LEVEL && 'btn-disabled text-gray-400',
               )}
             >
-              <TbColumns1 />
+              <MdZoomOut />
             </button>
             <button
-              onClick={setSpreadMode.bind(null, 'auto')}
+              title={_('Reset Zoom')}
               className={clsx(
-                'hover:bg-base-300 text-base-content rounded-full p-2',
-                spreadMode === 'auto' && 'bg-base-300/75',
+                'hover:bg-base-300 text-base-content h-8 min-h-8 w-[50%] rounded-md p-1 text-center',
               )}
+              onClick={resetZoom}
             >
-              <TbColumns2 />
-            </button>
-            <div className='bg-base-300 mx-2 h-6 w-[1px]' />
-            <button
-              onClick={setZoomMode.bind(null, 'fit-page')}
-              className={clsx(
-                'hover:bg-base-300 text-base-content rounded-full p-2',
-                zoomMode === 'fit-page' && 'bg-base-300/75',
-              )}
-            >
-              <IoMdExpand />
+              {zoomLevel}%
             </button>
             <button
-              onClick={setZoomMode.bind(null, 'fit-width')}
+              title={_('Zoom In')}
+              onClick={zoomIn}
               className={clsx(
                 'hover:bg-base-300 text-base-content rounded-full p-2',
-                zoomMode === 'fit-width' && 'bg-base-300/75',
+                zoomLevel >= MAX_ZOOM_LEVEL && 'btn-disabled text-gray-400',
               )}
             >
-              <TbArrowAutofitWidth />
+              <MdZoomIn />
             </button>
           </div>
 
-          <MenuItem
-            label={_('Separate Cover Page')}
-            Icon={keepCoverSpread ? MdCheck : undefined}
-            onClick={() => setKeepCoverSpread(!keepCoverSpread)}
-            disabled={spreadMode === 'none'}
-          />
+          <>
+            <div
+              title={_('Zoom Mode')}
+              className={clsx('my-2 flex items-center justify-between rounded-md')}
+            >
+              <button
+                title={_('Single Page')}
+                onClick={setSpreadMode.bind(null, 'none')}
+                className={clsx(
+                  'hover:bg-base-300 text-base-content rounded-full p-2',
+                  spreadMode === 'none' && 'bg-base-300/75',
+                )}
+              >
+                <TbColumns1 />
+              </button>
+              <button
+                title={_('Auto Spread')}
+                onClick={setSpreadMode.bind(null, 'auto')}
+                className={clsx(
+                  'hover:bg-base-300 text-base-content rounded-full p-2',
+                  spreadMode === 'auto' && 'bg-base-300/75',
+                )}
+              >
+                <TbColumns2 />
+              </button>
+              <div className='bg-base-300 mx-2 h-6 w-[1px]' />
+              <button
+                title={_('Fit Page')}
+                onClick={setZoomMode.bind(null, 'fit-page')}
+                className={clsx(
+                  'hover:bg-base-300 text-base-content rounded-full p-2',
+                  zoomMode === 'fit-page' && 'bg-base-300/75',
+                )}
+              >
+                <IoMdExpand />
+              </button>
+              <button
+                title={_('Fit Width')}
+                onClick={setZoomMode.bind(null, 'fit-width')}
+                className={clsx(
+                  'hover:bg-base-300 text-base-content rounded-full p-2',
+                  zoomMode === 'fit-width' && 'bg-base-300/75',
+                )}
+              >
+                <TbArrowAutofitWidth />
+              </button>
+            </div>
+
+            <MenuItem
+              label={_('Separate Cover Page')}
+              Icon={keepCoverSpread ? MdCheck : undefined}
+              onClick={() => setKeepCoverSpread(!keepCoverSpread)}
+              disabled={spreadMode === 'none'}
+            />
+          </>
+          <hr aria-hidden='true' className='border-base-300 my-1' />
         </>
       )}
-      <hr aria-hidden='true' className='border-base-300 my-1' />
 
       <MenuItem label={_('Font & Layout')} shortcut='Shift+F' onClick={openFontLayoutMenu} />
 

apps/readest-app/src/components/Dropdown.tsx

@@ -123,7 +123,6 @@ const Dropdown: React.FC<DropdownProps> = ({
         ref={containerRef}
         role='menu'
         tabIndex={-1}
-        title={label}
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
         className={clsx('dropdown flex flex-col', className)}
@@ -132,6 +131,7 @@ const Dropdown: React.FC<DropdownProps> = ({
           aria-haspopup='menu'
           aria-expanded={isOpen}
           aria-label={label}
+          title={label}
           className={clsx(
             'dropdown-toggle',
             isFocused && isOpen && 'bg-base-300/50',

apps/readest-app/src/utils/style.ts

@@ -463,20 +463,22 @@ export const getStyles = (viewSettings: ViewSettings, themeCode?: ThemeCode) =>
     viewSettings.textIndent!,
     viewSettings.fullJustification!,
     viewSettings.hyphenation!,
-    viewSettings.zoomLevel! / 100.0,
+    1.0,
     viewSettings.writingMode!,
     viewSettings.vertical!,
   );
   // scale the font size on-the-fly so that we can sync the same font size on different devices
   const isMobile = ['ios', 'android'].includes(getOSPlatform());
   const fontScale = isMobile ? 1.25 : 1;
+  // Only for backward compatibility, new viewSettings.zoomLevel will always be 100 for EPUBs
+  const zoomScale = (viewSettings.zoomLevel || 100) / 100.0;
   const fontStyles = getFontStyles(
     viewSettings.serifFont!,
     viewSettings.sansSerifFont!,
     viewSettings.monospaceFont!,
     viewSettings.defaultFont!,
     viewSettings.defaultCJKFont!,
-    viewSettings.defaultFontSize! * fontScale,
+    viewSettings.defaultFontSize! * fontScale * zoomScale,
     viewSettings.minimumFontSize!,
     viewSettings.fontWeight!,
     viewSettings.overrideFont!,