diff --git a/apps/readest-app/public/locales/de/translation.json b/apps/readest-app/public/locales/de/translation.json index 7f4e91b9..34b18ae3 100644 --- a/apps/readest-app/public/locales/de/translation.json +++ b/apps/readest-app/public/locales/de/translation.json @@ -43,6 +43,7 @@ "Grass": "Grasgrün", "Gray": "Grau", "Gruvbox": "Gruvbox", + "Horizontal Direction": "Horizontale Richtung", "Hyphenation": "Silbentrennung", "Identifier:": "Kennung:", "Import Books": "Bücher importieren", @@ -108,6 +109,8 @@ "Updated:": "Aktualisiert:", "User avatar": "Benutzer-Avatar", "Version {{version}}": "Version {{version}}", + "Vertical Direction": "Vertikale Richtung", "Welcome to your library. You can import your books here and read them anytime.": "Willkommen in Ihrer Bibliothek. Sie können hier Ihre Bücher importieren und jederzeit lesen.", + "Writing Mode": "Schreibmodus", "Your Library": "Ihre Bibliothek" } diff --git a/apps/readest-app/public/locales/es/translation.json b/apps/readest-app/public/locales/es/translation.json index f1c4fa5f..0c031856 100644 --- a/apps/readest-app/public/locales/es/translation.json +++ b/apps/readest-app/public/locales/es/translation.json @@ -43,6 +43,7 @@ "Grass": "Hierba", "Gray": "Gris", "Gruvbox": "Gruvbox", + "Horizontal Direction": "Dirección horizontal", "Hyphenation": "Guionización", "Identifier:": "Identificador:", "Import Books": "Importar libros", @@ -108,6 +109,8 @@ "Updated:": "Actualizado:", "User avatar": "Avatar del usuario", "Version {{version}}": "Versión {{version}}", + "Vertical Direction": "Dirección vertical", "Welcome to your library. You can import your books here and read them anytime.": "Bienvenido a tu biblioteca. Puedes importar tus libros aquí y leerlos en cualquier momento.", + "Writing Mode": "Modo de escritura", "Your Library": "Tu biblioteca" } diff --git a/apps/readest-app/public/locales/fr/translation.json b/apps/readest-app/public/locales/fr/translation.json index 96115e6e..a9f0abde 100644 --- a/apps/readest-app/public/locales/fr/translation.json +++ b/apps/readest-app/public/locales/fr/translation.json @@ -43,6 +43,7 @@ "Grass": "Herbe", "Gray": "Gris", "Gruvbox": "Gruvbox", + "Horizontal Direction": "Direction horizontale", "Hyphenation": "Césure", "Identifier:": "Identifiant :", "Import Books": "Importer des livres", @@ -108,6 +109,8 @@ "Updated:": "Mis à jour :", "User avatar": "Avatar de l'utilisateur", "Version {{version}}": "Version {{version}}", + "Vertical Direction": "Direction verticale", "Welcome to your library. You can import your books here and read them anytime.": "Bienvenue dans votre bibliothèque. Vous pouvez importer vos livres ici et les lire à tout moment.", + "Writing Mode": "Mode écriture", "Your Library": "Votre bibliothèque" } diff --git a/apps/readest-app/public/locales/id/translation.json b/apps/readest-app/public/locales/id/translation.json index 89a09055..866f9e37 100644 --- a/apps/readest-app/public/locales/id/translation.json +++ b/apps/readest-app/public/locales/id/translation.json @@ -43,6 +43,7 @@ "Grass": "Rumput", "Gray": "Abu-abu", "Gruvbox": "Gruvbox", + "Horizontal Direction": "Arah Horizontal", "Hyphenation": "Pemenggalan Kata", "Identifier:": "Pengenal:", "Import Books": "Impor Buku", @@ -108,6 +109,8 @@ "Updated:": "Diperbarui:", "User avatar": "Avatar Pengguna", "Version {{version}}": "Versi {{version}}", + "Vertical Direction": "Arah Vertikal", "Welcome to your library. You can import your books here and read them anytime.": "Selamat datang di perpustakaan Anda. Anda dapat mengimpor buku-buku Anda di sini dan membacanya kapan saja.", + "Writing Mode": "Mode Menulis", "Your Library": "Perpustakaan Anda" } diff --git a/apps/readest-app/public/locales/it/translation.json b/apps/readest-app/public/locales/it/translation.json index 2aed8deb..7e2f396c 100644 --- a/apps/readest-app/public/locales/it/translation.json +++ b/apps/readest-app/public/locales/it/translation.json @@ -43,6 +43,7 @@ "Grass": "Erba", "Gray": "Grigio", "Gruvbox": "Gruvbox", + "Horizontal Direction": "Direzione orizzontale", "Hyphenation": "Sillabazione", "Identifier:": "Identificatore:", "Import Books": "Importa libri", @@ -108,6 +109,8 @@ "Updated:": "Aggiornato:", "User avatar": "Avatar utente", "Version {{version}}": "Versione {{version}}", + "Vertical Direction": "Direzione verticale", "Welcome to your library. You can import your books here and read them anytime.": "Benvenuto nella tua biblioteca. Puoi importare i tuoi libri qui e leggerli in qualsiasi momento.", + "Writing Mode": "Modalità scrittura", "Your Library": "La tua biblioteca" } diff --git a/apps/readest-app/public/locales/ja/translation.json b/apps/readest-app/public/locales/ja/translation.json index de999291..2e1b98ed 100644 --- a/apps/readest-app/public/locales/ja/translation.json +++ b/apps/readest-app/public/locales/ja/translation.json @@ -43,6 +43,7 @@ "Grass": "グリーン", "Gray": "グレー", "Gruvbox": "グルーブボックス", + "Horizontal Direction": "横書", "Hyphenation": "ハイフネーション", "Identifier:": "識別子：", "Import Books": "書籍をインポート", @@ -108,6 +109,8 @@ "Updated:": "更新日：", "User avatar": "ユーザーアバター", "Version {{version}}": "バージョン {{version}}", + "Vertical Direction": "縦書", "Welcome to your library. You can import your books here and read them anytime.": "ライブラリーへようこそ。ここに書籍をインポートして、いつでも読むことができます。", + "Writing Mode": "書き込みモード", "Your Library": "ライブラリー" } diff --git a/apps/readest-app/public/locales/ko/translation.json b/apps/readest-app/public/locales/ko/translation.json index b9286729..41a9328a 100644 --- a/apps/readest-app/public/locales/ko/translation.json +++ b/apps/readest-app/public/locales/ko/translation.json @@ -43,6 +43,7 @@ "Grass": "잔디색", "Gray": "회색", "Gruvbox": "그러브박스", + "Horizontal Direction": "수평 방향", "Hyphenation": "하이픈 넣기", "Identifier:": "식별자:", "Import Books": "책 가져오기", @@ -108,6 +109,8 @@ "Updated:": "업데이트일:", "User avatar": "사용자 아바타", "Version {{version}}": "버전 {{version}}", + "Vertical Direction": "수직 방향", "Welcome to your library. You can import your books here and read them anytime.": "내 서재에 오신 것을 환영합니다. 여기에서 책을 가져와 언제든지 읽을 수 있습니다.", + "Writing Mode": "글쓰기 모드", "Your Library": "내 서재" } diff --git a/apps/readest-app/public/locales/pt/translation.json b/apps/readest-app/public/locales/pt/translation.json index 937fff28..78f4ac2f 100644 --- a/apps/readest-app/public/locales/pt/translation.json +++ b/apps/readest-app/public/locales/pt/translation.json @@ -43,6 +43,7 @@ "Grass": "Grama", "Gray": "Cinza", "Gruvbox": "Gruvbox", + "Horizontal Direction": "Direção Horizontal", "Hyphenation": "Hifenização", "Identifier:": "Identificador:", "Import Books": "Importar Livros", @@ -108,6 +109,8 @@ "Updated:": "Atualizado:", "User avatar": "Avatar do usuário", "Version {{version}}": "Versão {{version}}", + "Vertical Direction": "Direção Vertical", "Welcome to your library. You can import your books here and read them anytime.": "Bem-vindo à sua biblioteca. Você pode importar seus livros aqui e lê-los a qualquer momento.", + "Writing Mode": "Modo de Escrita", "Your Library": "Sua Biblioteca" } diff --git a/apps/readest-app/public/locales/ru/translation.json b/apps/readest-app/public/locales/ru/translation.json index 0e32a3d0..2087ab66 100644 --- a/apps/readest-app/public/locales/ru/translation.json +++ b/apps/readest-app/public/locales/ru/translation.json @@ -43,6 +43,7 @@ "Grass": "Трава", "Gray": "Серый", "Gruvbox": "Gruvbox", + "Horizontal Direction": "Горизонтальное направление", "Hyphenation": "Перенос слов", "Identifier:": "Идентификатор:", "Import Books": "Импорт книг", @@ -108,6 +109,8 @@ "Updated:": "Обновлено:", "User avatar": "Аватар пользователя", "Version {{version}}": "Версия {{version}}", + "Vertical Direction": "Вертикальное направление", "Welcome to your library. You can import your books here and read them anytime.": "Добро пожаловать в вашу библиотеку. Вы можете импортировать сюда книги и читать их в любое время.", + "Writing Mode": "Режим записи", "Your Library": "Ваша библиотека" } diff --git a/apps/readest-app/public/locales/tr/translation.json b/apps/readest-app/public/locales/tr/translation.json index 36dd4886..5dda57db 100644 --- a/apps/readest-app/public/locales/tr/translation.json +++ b/apps/readest-app/public/locales/tr/translation.json @@ -43,6 +43,7 @@ "Grass": "Çimen", "Gray": "Gri", "Gruvbox": "Gruvbox", + "Horizontal Direction": "Yatay Yön", "Hyphenation": "Heceleme", "Identifier:": "Tanımlayıcı:", "Import Books": "Kitapları İçe Aktar", @@ -108,6 +109,8 @@ "Updated:": "Güncellendi:", "User avatar": "Kullanıcı avatarı", "Version {{version}}": "Sürüm {{version}}", + "Vertical Direction": "Dikey Yön", "Welcome to your library. You can import your books here and read them anytime.": "Kütüphanenize hoş geldiniz. Buradan kitaplarınızı içe aktarabilir ve istediğiniz zaman okuyabilirsiniz.", + "Writing Mode": "Yazma Modu", "Your Library": "Kütüphaneniz" } diff --git a/apps/readest-app/public/locales/vi/translation.json b/apps/readest-app/public/locales/vi/translation.json index fb2930c2..7393f964 100644 --- a/apps/readest-app/public/locales/vi/translation.json +++ b/apps/readest-app/public/locales/vi/translation.json @@ -43,6 +43,7 @@ "Grass": "Xanh cỏ", "Gray": "Xám", "Gruvbox": "Gruvbox", + "Horizontal Direction": "Hướng ngang", "Hyphenation": "Gạch nối từ", "Identifier:": "Định danh:", "Import Books": "Nhập sách", @@ -108,6 +109,8 @@ "Updated:": "Cập nhật:", "User avatar": "Ảnh đại diện", "Version {{version}}": "Phiên bản {{version}}", + "Vertical Direction": "Hướng dọc", "Welcome to your library. You can import your books here and read them anytime.": "Chào mừng đến với thư viện của bạn. Bạn có thể nhập sách vào đây và đọc bất cứ lúc nào.", + "Writing Mode": "Chế độ viết", "Your Library": "Thư viện của bạn" } diff --git a/apps/readest-app/public/locales/zh-CN/translation.json b/apps/readest-app/public/locales/zh-CN/translation.json index 954b6f3a..c222dd3f 100644 --- a/apps/readest-app/public/locales/zh-CN/translation.json +++ b/apps/readest-app/public/locales/zh-CN/translation.json @@ -43,6 +43,7 @@ "Grass": "青草", "Gray": "素雅", "Gruvbox": "暖橘", + "Horizontal Direction": "横排", "Hyphenation": "断字", "Identifier:": "识别码", "Import Books": "导入书籍", @@ -108,6 +109,8 @@ "Updated:": "更新日期", "User avatar": "用户头像", "Version {{version}}": "版本 {{version}}", + "Vertical Direction": "竖排", "Welcome to your library. You can import your books here and read them anytime.": "书库空空如也，您可以导入您的书籍并随时阅读。", + "Writing Mode": "排版模式", "Your Library": "书库" } diff --git a/apps/readest-app/public/locales/zh-TW/translation.json b/apps/readest-app/public/locales/zh-TW/translation.json index 552160aa..5e059a74 100644 --- a/apps/readest-app/public/locales/zh-TW/translation.json +++ b/apps/readest-app/public/locales/zh-TW/translation.json @@ -43,6 +43,7 @@ "Grass": "青草", "Gray": "素雅", "Gruvbox": "暖橘", + "Horizontal Direction": "橫排", "Hyphenation": "斷字", "Identifier:": "識別碼", "Import Books": "導入書籍", @@ -108,6 +109,8 @@ "Updated:": "更新日期", "User avatar": "用戶頭像", "Version {{version}}": "版本 {{version}}", + "Vertical Direction": "豎排", "Welcome to your library. You can import your books here and read them anytime.": "書庫空空如也，您可以導入您的書籍並隨時閱讀。", + "Writing Mode": "排版模式", "Your Library": "書庫" } diff --git a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx b/apps/readest-app/src/app/reader/components/FootnotePopup.tsx index 71ec9ac5..44947e5c 100644 --- a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx +++ b/apps/readest-app/src/app/reader/components/FootnotePopup.tsx @@ -28,6 +28,7 @@ const FootnotePopup: React.FC = ({ bookKey, bookDoc }) => { const { getView, getViewSettings } = useReaderStore(); const { themeCode } = useTheme(); const view = getView(bookKey); + const viewSettings = getViewSettings(bookKey)!; const footnoteHandler = new FootnoteHandler(); useEffect(() => { @@ -73,7 +74,13 @@ const FootnotePopup: React.FC = ({ bookKey, bookDoc }) => { const rect = gridFrame.getBoundingClientRect(); const viewSettings = getViewSettings(bookKey)!; const triangPos = getPosition(detail.a, rect, viewSettings.vertical); - const popupPos = getPopupPosition(triangPos, rect, popupWidth, popupHeight, popupPadding); + const popupPos = getPopupPosition( + triangPos, + rect, + viewSettings.vertical ? popupHeight : popupWidth, + viewSettings.vertical ? popupWidth : popupHeight, + popupPadding, + ); setTrianglePosition(triangPos); setPopupPosition(popupPos); @@ -107,6 +114,9 @@ const FootnotePopup: React.FC = ({ bookKey, bookDoc }) => { } }, [footnoteRef]); + const width = viewSettings.vertical ? popupHeight : popupWidth; + const height = viewSettings.vertical ? popupWidth : popupHeight; + return (
{showPopup && ( @@ -117,8 +127,8 @@ const FootnotePopup: React.FC = ({ bookKey, bookDoc }) => { /> )} = ({ bookKey, bookDoc }) => { className='' ref={footnoteRef} style={{ - width: `${popupWidth}px`, - height: `${popupHeight}px`, + width: `${width}px`, + height: `${height}px`, }} >
diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx index e9903092..c9e8b677 100644 --- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx @@ -1,17 +1,24 @@ import React, { useEffect, useState } from 'react'; +import { MdOutlineAutoMode } from 'react-icons/md'; +import { MdOutlineTextRotationDown, MdOutlineTextRotationNone } from 'react-icons/md'; + +import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants'; import { useSettingsStore } from '@/store/settingsStore'; import { useReaderStore } from '@/store/readerStore'; +import { useBookDataStore } from '@/store/bookDataStore'; import { useTranslation } from '@/hooks/useTranslation'; -import { getStyles } from '@/utils/style'; -import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants'; -import NumberInput from './NumberInput'; import { useTheme } from '@/hooks/useTheme'; +import { getStyles } from '@/utils/style'; +import { getBookLangCode } from '@/utils/book'; +import NumberInput from './NumberInput'; const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const _ = useTranslation(); const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore(); const { getView, getViewSettings, setViewSettings } = useReaderStore(); + const { getBookData } = useBookDataStore(); const view = getView(bookKey); + const bookData = getBookData(bookKey)!; const viewSettings = getViewSettings(bookKey)!; const { themeCode } = useTheme(); @@ -23,6 +30,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const [maxColumnCount, setMaxColumnCount] = useState(viewSettings.maxColumnCount!); const [maxInlineSize, setMaxInlineSize] = useState(viewSettings.maxInlineSize!); const [maxBlockSize, setMaxBlockSize] = useState(viewSettings.maxBlockSize!); + const [writingMode, setWritingMode] = useState(viewSettings.writingMode!); useEffect(() => { viewSettings.lineHeight = lineHeight; @@ -111,8 +119,55 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxInlineSize]); + useEffect(() => { + // global settings are not supported for writing mode + viewSettings.writingMode = writingMode; + setViewSettings(bookKey, viewSettings); + view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [writingMode]); + + const langCode = getBookLangCode(bookData.bookDoc?.metadata?.language); + const isCJKBook = langCode === 'zh' || langCode === 'ja' || langCode === 'ko'; + return (
+ {isCJKBook && ( +
+
+

{_('Writing Mode')}

+
+
+ +
+ +
+ +
+ +
+ +
+
+
+
+ )} +

{_('Paragraph')}

diff --git a/apps/readest-app/src/components/Popup.tsx b/apps/readest-app/src/components/Popup.tsx index d0aeb1f5..25995120 100644 --- a/apps/readest-app/src/components/Popup.tsx +++ b/apps/readest-app/src/components/Popup.tsx @@ -67,7 +67,7 @@ const Popup = ({ />