diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index bb36854e..0a268bc2 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/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 diff --git a/apps/readest-app/src/components/settings/LayoutPanel.tsx b/apps/readest-app/src/components/settings/LayoutPanel.tsx index 25694fee..92613011 100644 --- a/apps/readest-app/src/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/components/settings/LayoutPanel.tsx @@ -462,7 +462,7 @@ const LayoutPanel: React.FC = ({ bookKey, onRegisterRese onChange={setParagraphMargin} min={0} max={4} - step={0.2} + step={0.1} /> 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,