fix(layout): overriding book layout no longer overrides explicit text alignment, closes #2249 (#2254)

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

@@ -24,6 +24,7 @@ import {
   applyImageStyle,
   applyTranslationStyle,
   getStyles,
+  keepTextAlignment,
   transformStylesheet,
 } from '@/utils/style';
 import { mountAdditionalFonts, mountCustomFont } from '@/styles/fonts';
@@ -176,6 +177,8 @@ const FoliateViewer: React.FC<{
 
       applyImageStyle(detail.doc);
 
+      keepTextAlignment(detail.doc);
+
       removeTabIndex(detail.doc);
 
       // Inline scripts in tauri platforms are not executed by default

apps/readest-app/src/components/settings/LayoutPanel.tsx

@@ -462,7 +462,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
               onChange={setParagraphMargin}
               min={0}
               max={4}
-              step={0.2}
+              step={0.1}
             />
             <NumberInput
               label={_('Line Spacing')}

apps/readest-app/src/services/constants.ts

@@ -141,8 +141,8 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
 
 export const DEFAULT_BOOK_STYLE: BookStyle = {
   zoomLevel: 100,
-  paragraphMargin: 1,
-  lineHeight: 1.6,
+  paragraphMargin: 0.6,
+  lineHeight: 1.4,
   wordSpacing: 0,
   letterSpacing: 0,
   textIndent: 0,
@@ -231,6 +231,7 @@ export const SERIF_FONTS = [
   'Bitter',
   'Literata',
   'Merriweather',
+  'Roboto Slab',
   'Vollkorn',
   'Georgia',
   'Times New Roman',

apps/readest-app/src/styles/fonts.ts

@@ -12,6 +12,7 @@ const basicGoogleFonts = [
   { family: 'Noto Sans', weights: 'ital,wght@0,100..900;1,100..900' },
   { family: 'Open Sans', weights: 'ital,wght@0,300..800;1,300..800' },
   { family: 'Roboto', weights: 'ital,wght@0,100..900;1,100..900' },
+  { family: 'Roboto Slab', weights: 'ital,wght@0,100..900;1,100..900' },
   { family: 'Vollkorn', weights: 'ital,wght@0,400..900;1,400..900' },
 ];
 

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

@@ -249,9 +249,7 @@ const getLayoutStyles = (
     line-height: ${lineSpacing} ${overrideLayout ? '!important' : ''};
     word-spacing: ${wordSpacing}px ${overrideLayout ? '!important' : ''};
     letter-spacing: ${letterSpacing}px ${overrideLayout ? '!important' : ''};
-    text-indent: ${vertical ? textIndent * 1.2 : textIndent}em ${overrideLayout ? '!important' : ''};
-    ${justify ? `text-align: justify ${overrideLayout ? '!important' : ''};` : ''}
-    ${!justify && overrideLayout ? 'text-align: initial !important;' : ''};
+    text-indent: ${textIndent}em ${overrideLayout ? '!important' : ''};
     -webkit-hyphens: ${hyphenate ? 'auto' : 'manual'};
     hyphens: ${hyphenate ? 'auto' : 'manual'};
     -webkit-hyphenate-limit-before: 3;
@@ -260,6 +258,18 @@ const getLayoutStyles = (
     hanging-punctuation: allow-end last;
     widows: 2;
   }
+  p.aligned-center, blockquote.aligned-center,
+  dd.aligned-center, div.aligned-center {
+    text-align: center ${overrideLayout ? '!important' : ''};
+  }
+  p.aligned-right, blockquote.aligned-right,
+  dd.aligned-right, div.aligned-right {
+    text-align: right ${overrideLayout ? '!important' : ''};
+  }
+  p.aligned-justify, blockquote.aligned-justify,
+  dd.aligned-justify, div.aligned-justify {
+    ${!justify && overrideLayout ? 'text-align: initial !important;' : ''};
+  }
   p:has(> img:only-child), p:has(> span:only-child > img:only-child),
   p:has(> img:not(.has-text-siblings)),
   p:has(> a:first-child + img:last-child) {
@@ -267,6 +277,8 @@ const getLayoutStyles = (
   }
   blockquote[align="center"], div[align="center"],
   p[align="center"], dd[align="center"],
+  p.aligned-center, blockquote.aligned-center,
+  dd.aligned-center, div.aligned-center,
   li p, ol p, ul p {
     text-indent: initial !important;
   }
@@ -581,6 +593,19 @@ export const applyImageStyle = (document: Document) => {
   });
 };
 
+export const keepTextAlignment = (document: Document) => {
+  document.querySelectorAll('div, p, blockquote, dd').forEach((el) => {
+    const computedStyle = window.getComputedStyle(el);
+    if (computedStyle.textAlign === 'center') {
+      el.classList.add('aligned-center');
+    } else if (computedStyle.textAlign === 'right') {
+      el.classList.add('aligned-right');
+    } else if (computedStyle.textAlign === 'justify') {
+      el.classList.add('aligned-justify');
+    }
+  });
+};
+
 export const applyFixedlayoutStyles = (
   document: Document,
   viewSettings: ViewSettings,