fix: transform vw/vh to pixels correctly, closes #1420 (#1421)

* i18n: update translations * fix: transform vw/vh to pixels correctly, closes #1420
2025-06-19 16:53:58 +08:00
parent 92aae340d9
commit f0d3c9dd4e
22 changed files with 28 additions and 34 deletions
@@ -264,7 +264,7 @@
  "Clear Search": "مسح البحث",
  "Header & Footer": "الترويسة والتذييل",
  "Apply also in Scrolled Mode": "تطبيق أيضًا في وضع التمرير",
-  "A new version of Readest is Available!": "يتوفر إصدار جديد من Readest!",
+  "A new version of Readest is available!": "يتوفر إصدار جديد من Readest!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "إصدار {{newVersion}} من ريديست متاح للتنزيل (الإصدار المثبت حاليًا {{currentVersion}}).",
  "Download and install now?": "هل ترغب في تنزيله وتثبيته الآن؟",
  "Downloading {{downloaded}} of {{contentLength}}": "جارٍ تنزيل {{downloaded}} من {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Suche löschen",
  "Header & Footer": "Kopf- & Fußzeile",
  "Apply also in Scrolled Mode": "Auch im Scroll-Modus anwenden",
-  "A new version of Readest is Available!": "Eine neue Version von Readest ist verfügbar!",
+  "A new version of Readest is available!": "Eine neue Version von Readest ist verfügbar!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} ist verfügbar (installierte Version {{currentVersion}}).",
  "Download and install now?": "Jetzt herunterladen und installieren?",
  "Downloading {{downloaded}} of {{contentLength}}": "Herunterladen {{downloaded}} von {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Καθαρισμός αναζήτησης",
  "Header & Footer": "Κεφαλίδα & Υποσέλιδο",
  "Apply also in Scrolled Mode": "Εφαρμογή και σε λειτουργία κύλισης",
-  "A new version of Readest is Available!": "Μια νέα έκδοση του Readest είναι διαθέσιμη!",
+  "A new version of Readest is available!": "Μια νέα έκδοση του Readest είναι διαθέσιμη!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Η έκδοση Readest {{newVersion}} είναι διαθέσιμη (έκδοση που είναι εγκατεστημένη {{currentVersion}}).",
  "Download and install now?": "Θέλετε να την κατεβάσετε και να την εγκαταστήσετε τώρα;",
  "Downloading {{downloaded}} of {{contentLength}}": "Κατεβάζω {{downloaded}} από {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Limpiar búsqueda",
  "Header & Footer": "Encabezado y pie de página",
  "Apply also in Scrolled Mode": "Aplicar también en modo desplazamiento",
-  "A new version of Readest is Available!": "¡Una nueva versión de Readest está disponible!",
+  "A new version of Readest is available!": "¡Una nueva versión de Readest está disponible!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} está disponible (versión instalada {{currentVersion}}).",
  "Download and install now?": "Descargar e instalar ahora?",
  "Downloading {{downloaded}} of {{contentLength}}": "Descargando {{downloaded}} de {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Effacer la recherche",
  "Header & Footer": "En-tête et pied de page",
  "Apply also in Scrolled Mode": "Appliquer également en mode défilement",
-  "A new version of Readest is Available!": "Avis de mise à jour",
+  "A new version of Readest is available!": "Avis de mise à jour",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} est disponible (version installée {{currentVersion}}).",
  "Download and install now?": "Télécharger et installer maintenant ?",
  "Downloading {{downloaded}} of {{contentLength}}": "Téléchargement {{downloaded}} sur {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "खोज साफ करें",
  "Header & Footer": "हेडर और फ़ुटर",
  "Apply also in Scrolled Mode": "स्क्रॉल मोड में भी लागू करें",
-  "A new version of Readest is Available!": "Readest का एक नया संस्करण उपलब्ध है!",
+  "A new version of Readest is available!": "Readest का एक नया संस्करण उपलब्ध है!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} उपलब्ध है (स्थापित संस्करण {{currentVersion}})।",
  "Download and install now?": "अब डाउनलोड और इंस्टॉल करें?",
  "Downloading {{downloaded}} of {{contentLength}}": "डाउनलोड कर रहा है {{downloaded}} का {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Hapus Pencarian",
  "Header & Footer": "Header & Footer",
  "Apply also in Scrolled Mode": "Terapkan juga di Mode Gulir",
-  "A new version of Readest is Available!": "Versi baru Readest Tersedia!",
+  "A new version of Readest is available!": "Versi baru Readest Tersedia!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} tersedia (versi terinstal {{currentVersion}}).",
  "Download and install now?": "Unduh dan instal sekarang?",
  "Downloading {{downloaded}} of {{contentLength}}": "Mengunduh {{downloaded}} dari {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Cancella ricerca",
  "Header & Footer": "Intestazione e piè di pagina",
  "Apply also in Scrolled Mode": "Applica anche in modalità scorrimento",
-  "A new version of Readest is Available!": "È disponibile una nuova versione di Readest!",
+  "A new version of Readest is available!": "È disponibile una nuova versione di Readest!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} è disponibile (versione installata {{currentVersion}}).",
  "Download and install now?": "Scarica e installa ora?",
  "Downloading {{downloaded}} of {{contentLength}}": "Scaricando {{downloaded}} di {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "検索をクリア",
  "Header & Footer": "ヘッダーとフッター",
  "Apply also in Scrolled Mode": "スクロールモードでも適用",
-  "A new version of Readest is Available!": "新しいバージョンのReadestが利用可能です！",
+  "A new version of Readest is available!": "新しいバージョンのReadestが利用可能です！",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}}が利用可能です（インストールされたバージョン{{currentVersion}}）。",
  "Download and install now?": "今すぐダウンロードしてインストールしますか？",
  "Downloading {{downloaded}} of {{contentLength}}": "ダウンロード中 {{downloaded}} / {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "검색 지우기",
  "Header & Footer": "헤더 및 푸터",
  "Apply also in Scrolled Mode": "스크롤 모드에서도 적용",
-  "A new version of Readest is Available!": "Readest의 새 버전이 있습니다!",
+  "A new version of Readest is available!": "Readest의 새 버전이 있습니다!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}}가 사용 가능 (설치된 버전 {{currentVersion}}).",
  "Download and install now?": "지금 다운로드하고 설치하시겠습니까?",
  "Downloading {{downloaded}} of {{contentLength}}": "다운로드 중 {{downloaded}} / {{contentLength}}",
@@ -275,7 +275,7 @@
  "Description:": "Beschrijving:",
  "No description available": "Geen beschrijving beschikbaar",
  "Drop to Import Books": "Sleep om boeken te importeren",
-  "A new version of Readest is Available!": "Een nieuwe versie van Readest is beschikbaar!",
+  "A new version of Readest is available!": "Een nieuwe versie van Readest is beschikbaar!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} is beschikbaar (geïnstalleerde versie {{currentVersion}}).",
  "Download and install now?": "Nu downloaden en installeren?",
  "Downloading {{downloaded}} of {{contentLength}}": "Downloaden {{downloaded}} van {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Wyczyść wyszukiwanie",
  "Header & Footer": "Nagłówek i stopka",
  "Apply also in Scrolled Mode": "Zastosuj również w trybie przewijania",
-  "A new version of Readest is Available!": "Nowa wersja Readest jest dostępna!",
+  "A new version of Readest is available!": "Nowa wersja Readest jest dostępna!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} jest dostępny (zainstalowana wersja {{currentVersion}}).",
  "Download and install now?": "Pobierz i zainstaluj teraz?",
  "Downloading {{downloaded}} of {{contentLength}}": "Pobieranie {{downloaded}} z {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Limpar Pesquisa",
  "Header & Footer": "Cabeçalho e Rodapé",
  "Apply also in Scrolled Mode": "Aplicar também no Modo Rolado",
-  "A new version of Readest is Available!": "Uma nova versão do Readest está disponível!",
+  "A new version of Readest is available!": "Uma nova versão do Readest está disponível!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} está disponível (versão instalada {{currentVersion}}).",
  "Download and install now?": "Baixar e instalar agora?",
  "Downloading {{downloaded}} of {{contentLength}}": "Baixando {{downloaded}} de {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Очистить поиск",
  "Header & Footer": "Заголовок и нижний колонтитул",
  "Apply also in Scrolled Mode": "Применить также в прокручиваемом режиме",
-  "A new version of Readest is Available!": "Доступна новая версия Readest!",
+  "A new version of Readest is available!": "Доступна новая версия Readest!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} доступен (установленная версия {{currentVersion}}).",
  "Download and install now?": "Скачать и установить сейчас?",
  "Downloading {{downloaded}} of {{contentLength}}": "Скачано {{downloaded}} из {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Aramayı Temizle",
  "Header & Footer": "Başlık ve Altbilgi",
  "Apply also in Scrolled Mode": "Kaydırılmış Modda da Uygula",
-  "A new version of Readest is Available!": "Yeni bir Readest sürümü mevcut!",
+  "A new version of Readest is available!": "Yeni bir Readest sürümü mevcut!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} mevcut (yüklü sürüm {{currentVersion}}).",
  "Download and install now?": "Şimdi indirip yükleyelim mi?",
  "Downloading {{downloaded}} of {{contentLength}}": "İndiriliyor {{downloaded}}/{{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Очистити пошук",
  "Header & Footer": "Заголовок і нижній колонтитул",
  "Apply also in Scrolled Mode": "Застосувати також у прокрученому режимі",
-  "A new version of Readest is Available!": "Доступна нова версія Readest!",
+  "A new version of Readest is available!": "Доступна нова версія Readest!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} доступна (встановлена версія {{currentVersion}}).",
  "Download and install now?": "Завантажити та встановити зараз?",
  "Downloading {{downloaded}} of {{contentLength}}": "Завантаження {{downloaded}} з {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "Xóa tìm kiếm",
  "Header & Footer": "Đầu trang & Chân trang",
  "Apply also in Scrolled Mode": "Áp dụng cũng trong chế độ cuộn",
-  "A new version of Readest is Available!": "Đã có phiên bản mới của Readest!",
+  "A new version of Readest is available!": "Đã có phiên bản mới của Readest!",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} đã có sẵn (phiên bản đã cài đặt {{currentVersion}}).",
  "Download and install now?": "Tải xuống và cài đặt ngay bây giờ?",
  "Downloading {{downloaded}} of {{contentLength}}": "Đang tải {{downloaded}} trong {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "清除搜索",
  "Header & Footer": "页眉页脚",
  "Apply also in Scrolled Mode": "应用到滚动模式",
-  "A new version of Readest is Available!": "有新版本的 Readest 可更新！",
+  "A new version of Readest is available!": "有新版本的 Readest 可更新！",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} 可更新（已安装版本 {{currentVersion}}）。",
  "Download and install now?": "立即下载并安装？",
  "Downloading {{downloaded}} of {{contentLength}}": "正在下载 {{downloaded}} / {{contentLength}}",
@@ -264,7 +264,7 @@
  "Clear Search": "清除搜索",
  "Header & Footer": "頁眉頁腳",
  "Apply also in Scrolled Mode": "滾動模式同樣適用",
-  "A new version of Readest is Available!": "有新版本的 Readest 可更新！",
+  "A new version of Readest is available!": "有新版本的 Readest 可更新！",
  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} 可更新（已安裝版本 {{currentVersion}}）。",
  "Download and install now?": "立即下載並安裝？",
  "Downloading {{downloaded}} of {{contentLength}}": "正在下載 {{downloaded}} / {{contentLength}}",
@@ -83,7 +83,7 @@ const FoliateViewer: React.FC<{
        .then((data) => {
          const viewSettings = getViewSettings(bookKey);
          if (viewSettings && detail.type === 'text/css')
-            return transformStylesheet(viewSettings, width, height, data);
+            return transformStylesheet(width, height, data);
          if (viewSettings && detail.type === 'application/xhtml+xml') {
            const ctx = {
              bookKey,
@@ -206,9 +206,10 @@ const FoliateViewer: React.FC<{
          detail.allowScript = viewSettings.allowScript ?? false;
        }
      });
-      const containerRect = containerRef.current?.getBoundingClientRect();
-      const width = containerRect?.width || window.innerWidth;
-      const height = containerRect?.height || window.innerHeight;
+      const viewWidth = appService?.isMobile ? screen.width : window.innerWidth;
+      const viewHeight = appService?.isMobile ? screen.height : window.innerHeight;
+      const width = viewWidth - insets.left - insets.right;
+      const height = viewHeight - insets.top - insets.bottom;
      book.transformTarget?.addEventListener('data', getDocTransformHandler({ width, height }));
      view.renderer.setStyles?.(getStyles(viewSettings));

@@ -274,7 +274,7 @@ export const UpdaterContent = ({ version }: { version?: string }) => {

          <div className='text-base-content flex-grow text-sm'>
            <h2 className='mb-4 text-center font-bold sm:text-start'>
-              {_('A new version of Readest is Available!')}
+              {_('A new version of Readest is available!')}
            </h2>
            <p className='mb-2'>
              {_('Readest {{newVersion}} is available (installed version {{currentVersion}}).', {
@@ -420,16 +420,9 @@ export const getStyles = (viewSettings: ViewSettings, themeCode?: ThemeCode) =>
  return `${layoutStyles}\n${fontStyles}\n${colorStyles}\n${translationStyles}\n${userStylesheet}`;
 };

-export const transformStylesheet = (
-  viewSettings: ViewSettings,
-  width: number,
-  height: number,
-  css: string,
-) => {
+export const transformStylesheet = (vw: number, vh: number, css: string) => {
  const isMobile = ['ios', 'android'].includes(getOSPlatform());
  const fontScale = isMobile ? 1.25 : 1;
-  const w = width - viewSettings.marginLeftPx - viewSettings.marginRightPx;
-  const h = height - viewSettings.marginTopPx - viewSettings.marginBottomPx;
  const ruleRegex = /([^{]+)({[^}]+})/g;
  css = css.replace(ruleRegex, (match, selector, block) => {
    const hasTextAlignCenter = /text-align\s*:\s*center\s*[;$]/.test(block);
@@ -467,8 +460,8 @@ export const transformStylesheet = (
      const rem = parseFloat(pt) / fontScale / 12;
      return `font-size: ${rem}rem`;
    })
-    .replace(/(\d*\.?\d+)vw/gi, (_, d) => (parseFloat(d) * w) / 100 + 'px')
-    .replace(/(\d*\.?\d+)vh/gi, (_, d) => (parseFloat(d) * h) / 100 + 'px')
+    .replace(/(\d*\.?\d+)vw/gi, (_, d) => (parseFloat(d) * vw) / 100 + 'px')
+    .replace(/(\d*\.?\d+)vh/gi, (_, d) => (parseFloat(d) * vh) / 100 + 'px')
    .replace(/[\s;]color\s*:\s*black/gi, 'color: var(--theme-fg-color)')
    .replace(/[\s;]color\s*:\s*#000000/gi, 'color: var(--theme-fg-color)')
    .replace(/[\s;]color\s*:\s*#000/gi, 'color: var(--theme-fg-color)')