feat: add override option for paragraph spacing settings, closes #329 (#334)

2025-02-09 16:05:37 +01:00
parent 26b64adca6
commit 6b057ebc14
21 changed files with 63 additions and 21 deletions
@@ -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"
 }
@@ -155,5 +155,6 @@
  "Word Spacing": "Διάκενο λέξεων",
  "Letter Spacing": "Διάκενο γραμμάτων",
  "Text Indent": "Εσοχή κειμένου",
-  "Paragraph Margin": "Περιθώριο παραγράφου"
+  "Paragraph Margin": "Περιθώριο παραγράφου",
+  "Override Book Layout": "Παράκαμψη διάταξης βιβλίου"
 }
@@ -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"
 }
@@ -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"
 }
@@ -155,5 +155,6 @@
  "Word Spacing": "शब्द स्पेसिंग",
  "Letter Spacing": "अक्षर स्पेसिंग",
  "Text Indent": "टेक्स्ट इंडेंट",
-  "Paragraph Margin": "पैराग्राफ मार्जिन"
+  "Paragraph Margin": "पैराग्राफ मार्जिन",
+  "Override Book Layout": "पुस्तक लेआउट ओवरराइड करें"
 }
@@ -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"
 }
@@ -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"
 }
@@ -155,5 +155,6 @@
  "Word Spacing": "単語間隔",
  "Letter Spacing": "文字間隔",
  "Text Indent": "テキストインデント",
-  "Paragraph Margin": "段落マージン"
+  "Paragraph Margin": "段落マージン",
+  "Override Book Layout": "書籍のレイアウトを上書き"
 }
@@ -155,5 +155,6 @@
  "Word Spacing": "단어 간격",
  "Letter Spacing": "글자 간격",
  "Text Indent": "들여쓰기",
-  "Paragraph Margin": "단락 여백"
+  "Paragraph Margin": "단락 여백",
+  "Override Book Layout": "책 레이아웃 덮어쓰기"
 }
@@ -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"
 }
@@ -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"
 }
@@ -155,5 +155,6 @@
  "Word Spacing": "Межсловный интервал",
  "Letter Spacing": "Межбуквенный интервал",
  "Text Indent": "Отступ текста",
-  "Paragraph Margin": "Отступ абзаца"
+  "Paragraph Margin": "Отступ абзаца",
+  "Override Book Layout": "Переопределить макет книги"
 }
@@ -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"
 }
@@ -155,5 +155,6 @@
  "Word Spacing": "Міжслівний інтервал",
  "Letter Spacing": "Міжбуквений інтервал",
  "Text Indent": "Відступ тексту",
-  "Paragraph Margin": "Відступ абзацу"
+  "Paragraph Margin": "Відступ абзацу",
+  "Override Book Layout": "Перевизначити макет книги"
 }
@@ -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"
 }
@@ -155,5 +155,6 @@
  "Word Spacing": "词间距",
  "Letter Spacing": "字间距",
  "Text Indent": "首行缩进",
-  "Paragraph Margin": "段间距"
+  "Paragraph Margin": "段间距",
+  "Override Book Layout": "覆盖版面布局"
 }
@@ -155,5 +155,6 @@
  "Word Spacing": "字間距",
  "Letter Spacing": "字間距",
  "Text Indent": "首行縮進",
-  "Paragraph Margin": "段間距"
+  "Paragraph Margin": "段間距",
+  "Override Book Layout": "覆蓋版面佈局"
 }
@@ -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)}
              />
            </div>
+            <div className='config-item config-item-bottom'>
+              <span className=''>{_('Override Book Layout')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={overrideLayout}
+                onChange={() => setOverrideLayout(!overrideLayout)}
+              />
+            </div>
          </div>
        </div>
      </div>
@@ -77,6 +77,7 @@ export const DEFAULT_BOOK_STYLE: BookStyle = {
  invert: false,
  theme: 'light',
  overrideFont: false,
+  overrideLayout: false,
  userStylesheet: '',
 };

@@ -73,6 +73,7 @@ export interface BookStyle {
  invert: boolean;
  theme: string;
  overrideFont: boolean;
+  overrideLayout: boolean;
  userStylesheet: string;
 }

@@ -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!,