From 6b057ebc14da40264fc46c98302ad7ca9c0686e2 Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Sun, 9 Feb 2025 16:05:37 +0100 Subject: [PATCH] feat: add override option for paragraph spacing settings, closes #329 (#334) --- .../public/locales/de/translation.json | 3 ++- .../public/locales/el/translation.json | 3 ++- .../public/locales/es/translation.json | 3 ++- .../public/locales/fr/translation.json | 3 ++- .../public/locales/hi/translation.json | 3 ++- .../public/locales/id/translation.json | 3 ++- .../public/locales/it/translation.json | 3 ++- .../public/locales/ja/translation.json | 3 ++- .../public/locales/ko/translation.json | 3 ++- .../public/locales/pl/translation.json | 3 ++- .../public/locales/pt/translation.json | 3 ++- .../public/locales/ru/translation.json | 3 ++- .../public/locales/tr/translation.json | 3 ++- .../public/locales/uk/translation.json | 3 ++- .../public/locales/vi/translation.json | 3 ++- .../public/locales/zh-CN/translation.json | 3 ++- .../public/locales/zh-TW/translation.json | 3 ++- .../components/settings/LayoutPanel.tsx | 21 +++++++++++++++++++ apps/readest-app/src/services/constants.ts | 1 + apps/readest-app/src/types/book.ts | 1 + apps/readest-app/src/utils/style.ts | 10 +++++---- 21 files changed, 63 insertions(+), 21 deletions(-) diff --git a/apps/readest-app/public/locales/de/translation.json b/apps/readest-app/public/locales/de/translation.json index 81f76ba8..5ae4bd8d 100644 --- a/apps/readest-app/public/locales/de/translation.json +++ b/apps/readest-app/public/locales/de/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Wortabstand", "Letter Spacing": "Buchstabenabstand", "Text Indent": "Texteinzug", - "Paragraph Margin": "Absatzrand" + "Paragraph Margin": "Absatzrand", + "Override Book Layout": "Buch-Layout überschreiben" } diff --git a/apps/readest-app/public/locales/el/translation.json b/apps/readest-app/public/locales/el/translation.json index dca8fb37..be864201 100644 --- a/apps/readest-app/public/locales/el/translation.json +++ b/apps/readest-app/public/locales/el/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Διάκενο λέξεων", "Letter Spacing": "Διάκενο γραμμάτων", "Text Indent": "Εσοχή κειμένου", - "Paragraph Margin": "Περιθώριο παραγράφου" + "Paragraph Margin": "Περιθώριο παραγράφου", + "Override Book Layout": "Παράκαμψη διάταξης βιβλίου" } diff --git a/apps/readest-app/public/locales/es/translation.json b/apps/readest-app/public/locales/es/translation.json index 9d035d93..b95da8ec 100644 --- a/apps/readest-app/public/locales/es/translation.json +++ b/apps/readest-app/public/locales/es/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Espaciado de palabras", "Letter Spacing": "Espaciado de letras", "Text Indent": "Sangría de texto", - "Paragraph Margin": "Margen de párrafo" + "Paragraph Margin": "Margen de párrafo", + "Override Book Layout": "Sobrescribir diseño del libro" } diff --git a/apps/readest-app/public/locales/fr/translation.json b/apps/readest-app/public/locales/fr/translation.json index a6cb70dc..6c884c31 100644 --- a/apps/readest-app/public/locales/fr/translation.json +++ b/apps/readest-app/public/locales/fr/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Espacement des mots", "Letter Spacing": "Espacement des lettres", "Text Indent": "Retrait du texte", - "Paragraph Margin": "Marge de paragraphe" + "Paragraph Margin": "Marge de paragraphe", + "Override Book Layout": "Remplacer la mise en page du livre" } diff --git a/apps/readest-app/public/locales/hi/translation.json b/apps/readest-app/public/locales/hi/translation.json index 57e67af6..ab1741ba 100644 --- a/apps/readest-app/public/locales/hi/translation.json +++ b/apps/readest-app/public/locales/hi/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "शब्द स्पेसिंग", "Letter Spacing": "अक्षर स्पेसिंग", "Text Indent": "टेक्स्ट इंडेंट", - "Paragraph Margin": "पैराग्राफ मार्जिन" + "Paragraph Margin": "पैराग्राफ मार्जिन", + "Override Book Layout": "पुस्तक लेआउट ओवरराइड करें" } diff --git a/apps/readest-app/public/locales/id/translation.json b/apps/readest-app/public/locales/id/translation.json index afcece05..a55ba5a8 100644 --- a/apps/readest-app/public/locales/id/translation.json +++ b/apps/readest-app/public/locales/id/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Spasi Kata", "Letter Spacing": "Spasi Huruf", "Text Indent": "Indentasi Teks", - "Paragraph Margin": "Margin Paragraf" + "Paragraph Margin": "Margin Paragraf", + "Override Book Layout": "Ganti Tata Letak Buku" } diff --git a/apps/readest-app/public/locales/it/translation.json b/apps/readest-app/public/locales/it/translation.json index 30156674..375fde39 100644 --- a/apps/readest-app/public/locales/it/translation.json +++ b/apps/readest-app/public/locales/it/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Spaziatura parole", "Letter Spacing": "Spaziatura lettere", "Text Indent": "Rientro testo", - "Paragraph Margin": "Margine paragrafo" + "Paragraph Margin": "Margine paragrafo", + "Override Book Layout": "Sovrascrivi layout libro" } diff --git a/apps/readest-app/public/locales/ja/translation.json b/apps/readest-app/public/locales/ja/translation.json index 6678207e..d0be1e96 100644 --- a/apps/readest-app/public/locales/ja/translation.json +++ b/apps/readest-app/public/locales/ja/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "単語間隔", "Letter Spacing": "文字間隔", "Text Indent": "テキストインデント", - "Paragraph Margin": "段落マージン" + "Paragraph Margin": "段落マージン", + "Override Book Layout": "書籍のレイアウトを上書き" } diff --git a/apps/readest-app/public/locales/ko/translation.json b/apps/readest-app/public/locales/ko/translation.json index 528530ef..12a624ca 100644 --- a/apps/readest-app/public/locales/ko/translation.json +++ b/apps/readest-app/public/locales/ko/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "단어 간격", "Letter Spacing": "글자 간격", "Text Indent": "들여쓰기", - "Paragraph Margin": "단락 여백" + "Paragraph Margin": "단락 여백", + "Override Book Layout": "책 레이아웃 덮어쓰기" } diff --git a/apps/readest-app/public/locales/pl/translation.json b/apps/readest-app/public/locales/pl/translation.json index 21560d71..b5b08dc7 100644 --- a/apps/readest-app/public/locales/pl/translation.json +++ b/apps/readest-app/public/locales/pl/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Odstęp między wyrazami", "Letter Spacing": "Odstęp między literami", "Text Indent": "Wcięcie tekstu", - "Paragraph Margin": "Margines akapitu" + "Paragraph Margin": "Margines akapitu", + "Override Book Layout": "Nadpisz układ książki" } diff --git a/apps/readest-app/public/locales/pt/translation.json b/apps/readest-app/public/locales/pt/translation.json index ea743b7e..98ff3abb 100644 --- a/apps/readest-app/public/locales/pt/translation.json +++ b/apps/readest-app/public/locales/pt/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Espaçamento de Palavra", "Letter Spacing": "Espaçamento de Letra", "Text Indent": "Recuo de Texto", - "Paragraph Margin": "Margem de Parágrafo" + "Paragraph Margin": "Margem de Parágrafo", + "Override Book Layout": "Sobrescrever Layout do Livro" } diff --git a/apps/readest-app/public/locales/ru/translation.json b/apps/readest-app/public/locales/ru/translation.json index c0d9c538..1990681e 100644 --- a/apps/readest-app/public/locales/ru/translation.json +++ b/apps/readest-app/public/locales/ru/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Межсловный интервал", "Letter Spacing": "Межбуквенный интервал", "Text Indent": "Отступ текста", - "Paragraph Margin": "Отступ абзаца" + "Paragraph Margin": "Отступ абзаца", + "Override Book Layout": "Переопределить макет книги" } diff --git a/apps/readest-app/public/locales/tr/translation.json b/apps/readest-app/public/locales/tr/translation.json index 78b8e794..60e3ed03 100644 --- a/apps/readest-app/public/locales/tr/translation.json +++ b/apps/readest-app/public/locales/tr/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Kelime Aralığı", "Letter Spacing": "Harf Aralığı", "Text Indent": "Metin Girintisi", - "Paragraph Margin": "Paragraf Kenarı" + "Paragraph Margin": "Paragraf Kenarı", + "Override Book Layout": "Kitap Düzenini Geçersiz Kıl" } diff --git a/apps/readest-app/public/locales/uk/translation.json b/apps/readest-app/public/locales/uk/translation.json index 19a99dc0..5dc88b67 100644 --- a/apps/readest-app/public/locales/uk/translation.json +++ b/apps/readest-app/public/locales/uk/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Міжслівний інтервал", "Letter Spacing": "Міжбуквений інтервал", "Text Indent": "Відступ тексту", - "Paragraph Margin": "Відступ абзацу" + "Paragraph Margin": "Відступ абзацу", + "Override Book Layout": "Перевизначити макет книги" } diff --git a/apps/readest-app/public/locales/vi/translation.json b/apps/readest-app/public/locales/vi/translation.json index 88e1968c..7831f5be 100644 --- a/apps/readest-app/public/locales/vi/translation.json +++ b/apps/readest-app/public/locales/vi/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "Khoảng cách từ", "Letter Spacing": "Khoảng cách chữ", "Text Indent": "Thụt lề", - "Paragraph Margin": "Lề đoạn" + "Paragraph Margin": "Lề đoạn", + "Override Book Layout": "Ghi đè bố cục sách" } diff --git a/apps/readest-app/public/locales/zh-CN/translation.json b/apps/readest-app/public/locales/zh-CN/translation.json index f10747ed..97e02f40 100644 --- a/apps/readest-app/public/locales/zh-CN/translation.json +++ b/apps/readest-app/public/locales/zh-CN/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "词间距", "Letter Spacing": "字间距", "Text Indent": "首行缩进", - "Paragraph Margin": "段间距" + "Paragraph Margin": "段间距", + "Override Book Layout": "覆盖版面布局" } diff --git a/apps/readest-app/public/locales/zh-TW/translation.json b/apps/readest-app/public/locales/zh-TW/translation.json index 57fe3c7b..321a8b63 100644 --- a/apps/readest-app/public/locales/zh-TW/translation.json +++ b/apps/readest-app/public/locales/zh-TW/translation.json @@ -155,5 +155,6 @@ "Word Spacing": "字間距", "Letter Spacing": "字間距", "Text Indent": "首行縮進", - "Paragraph Margin": "段間距" + "Paragraph Margin": "段間距", + "Override Book Layout": "覆蓋版面佈局" } 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 020637aa..44e46bd8 100644 --- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx @@ -35,6 +35,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const [maxInlineSize, setMaxInlineSize] = useState(viewSettings.maxInlineSize!); const [maxBlockSize, setMaxBlockSize] = useState(viewSettings.maxBlockSize!); const [writingMode, setWritingMode] = useState(viewSettings.writingMode!); + const [overrideLayout, setOverrideLayout] = useState(viewSettings.overrideLayout!); useEffect(() => { viewSettings.paragraphMargin = paragraphMargin; @@ -189,6 +190,17 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [writingMode]); + useEffect(() => { + viewSettings.overrideLayout = overrideLayout; + setViewSettings(bookKey, viewSettings); + if (isFontLayoutSettingsGlobal) { + settings.globalViewSettings.overrideLayout = overrideLayout; + setSettings(settings); + } + view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [overrideLayout]); + const langCode = getBookLangCode(bookData.bookDoc?.metadata?.language); const isCJKBook = langCode === 'zh' || langCode === 'ja' || langCode === 'ko'; @@ -297,6 +309,15 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { onChange={() => setHyphenation(!hyphenation)} /> +
+ {_('Override Book Layout')} + setOverrideLayout(!overrideLayout)} + /> +
diff --git a/apps/readest-app/src/services/constants.ts b/apps/readest-app/src/services/constants.ts index 8c4c464e..e684647d 100644 --- a/apps/readest-app/src/services/constants.ts +++ b/apps/readest-app/src/services/constants.ts @@ -77,6 +77,7 @@ export const DEFAULT_BOOK_STYLE: BookStyle = { invert: false, theme: 'light', overrideFont: false, + overrideLayout: false, userStylesheet: '', }; diff --git a/apps/readest-app/src/types/book.ts b/apps/readest-app/src/types/book.ts index 182f31f3..88ff4e9a 100644 --- a/apps/readest-app/src/types/book.ts +++ b/apps/readest-app/src/types/book.ts @@ -73,6 +73,7 @@ export interface BookStyle { invert: boolean; theme: string; overrideFont: boolean; + overrideLayout: boolean; userStylesheet: string; } diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts index 279d122d..c32a0688 100644 --- a/apps/readest-app/src/utils/style.ts +++ b/apps/readest-app/src/utils/style.ts @@ -94,6 +94,7 @@ const getAdditionalFontFaces = () => ` `; const getLayoutStyles = ( + overrideLayout: boolean, paragraphMargin: number, lineSpacing: number, wordSpacing: number, @@ -150,7 +151,6 @@ const getLayoutStyles = ( html, body { color: ${fg}; ${writingMode === 'auto' ? '' : `writing-mode: ${writingMode};`} - text-indent: ${textIndent}em; text-align: var(--default-text-align); background-color: var(--theme-bg-color, transparent); background: var(--background-set, none); @@ -168,9 +168,10 @@ const getLayoutStyles = ( } p, li, blockquote, dd { margin: ${paragraphMargin}em 0; - line-height: ${lineSpacing} !important; - word-spacing: ${wordSpacing}px !important; - letter-spacing: ${letterSpacing}px !important; + line-height: ${lineSpacing} ${overrideLayout ? '!important' : ''}; + word-spacing: ${wordSpacing}px ${overrideLayout ? '!important' : ''}; + letter-spacing: ${letterSpacing}px ${overrideLayout ? '!important' : ''}; + text-indent: ${textIndent}em ${overrideLayout ? '!important' : ''}; text-align: inherit; -webkit-hyphens: ${hyphenate ? 'auto' : 'manual'}; hyphens: ${hyphenate ? 'auto' : 'manual'}; @@ -211,6 +212,7 @@ export interface ThemeCode { export const getStyles = (viewSettings: ViewSettings, themeCode: ThemeCode) => { const layoutStyles = getLayoutStyles( + viewSettings.overrideLayout!, viewSettings.paragraphMargin!, viewSettings.lineHeight!, viewSettings.wordSpacing!,