From 80e11bb0ce4d7f2710abcb6cc231d0734c304143 Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Tue, 9 Dec 2025 23:19:14 +0800 Subject: [PATCH] refactor(layout): refactor page margins for pixel precision, closes #2652 (#2663) --- .../app/reader/components/FootnotePopup.tsx | 2 -- .../src/app/reader/components/HintInfo.tsx | 4 ++-- .../app/reader/components/ProgressInfo.tsx | 6 +++--- .../src/app/reader/components/SectionInfo.tsx | 4 ++-- apps/readest-app/src/utils/style.ts | 21 ++++++++++++------- packages/foliate-js | 2 +- 6 files changed, 21 insertions(+), 18 deletions(-) diff --git a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx b/apps/readest-app/src/app/reader/components/FootnotePopup.tsx index ab6ebc98..0f211b07 100644 --- a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx +++ b/apps/readest-app/src/app/reader/components/FootnotePopup.tsx @@ -108,10 +108,8 @@ const FootnotePopup: React.FC = ({ bookKey, bookDoc }) => { const viewSettings = getViewSettings(bookKey)!; if (viewSettings.vertical) { setResponsiveWidth(getResponsivePopupSize(renderer.viewSize, true)); - setResponsiveHeight(clipPopupHeight(popupHeight)); } else { setResponsiveWidth(clipPopupWith(popupWidth)); - setResponsiveHeight(getResponsivePopupSize(renderer.viewSize, false)); } setShowPopup(true); }); diff --git a/apps/readest-app/src/app/reader/components/HintInfo.tsx b/apps/readest-app/src/app/reader/components/HintInfo.tsx index 15d60fa9..9787f7a3 100644 --- a/apps/readest-app/src/app/reader/components/HintInfo.tsx +++ b/apps/readest-app/src/app/reader/components/HintInfo.tsx @@ -90,11 +90,11 @@ const HintInfo: React.FC = ({ right: showDoubleBorder ? `calc(${contentInsets.right}px)` : `calc(${Math.max(0, contentInsets.right - 32)}px)`, - width: showDoubleBorder ? '30px' : `${horizontalGap}%`, + width: showDoubleBorder ? '30px' : `${contentInsets.right}px`, } : { top: `${topInset}px`, - insetInlineEnd: `calc(${horizontalGap / 2}% + ${contentInsets.right}px)`, + insetInlineEnd: `calc(${horizontalGap / 2}% + ${contentInsets.right / 2}px)`, } } > diff --git a/apps/readest-app/src/app/reader/components/ProgressInfo.tsx b/apps/readest-app/src/app/reader/components/ProgressInfo.tsx index 99598aca..b9b59cb0 100644 --- a/apps/readest-app/src/app/reader/components/ProgressInfo.tsx +++ b/apps/readest-app/src/app/reader/components/ProgressInfo.tsx @@ -98,12 +98,12 @@ const ProgressInfoView: React.FC = ({ left: showDoubleBorder ? `calc(${contentInsets.left}px)` : `calc(${Math.max(0, contentInsets.left - 32)}px)`, - width: showDoubleBorder ? '32px' : `${horizontalGap}%`, + width: showDoubleBorder ? '32px' : `${contentInsets.left}px`, height: `calc(100% - ${((contentInsets.top + contentInsets.bottom) / 2) * 3}px)`, } : { - paddingInlineStart: `calc(${horizontalGap / 2}% + ${contentInsets.left}px)`, - paddingInlineEnd: `calc(${horizontalGap / 2}% + ${contentInsets.right}px)`, + paddingInlineStart: `calc(${horizontalGap / 2}% + ${contentInsets.left / 2}px)`, + paddingInlineEnd: `calc(${horizontalGap / 2}% + ${contentInsets.right / 2}px)`, paddingBottom: appService?.hasSafeAreaInset ? `${gridInsets.bottom * 0.33}px` : 0, } } diff --git a/apps/readest-app/src/app/reader/components/SectionInfo.tsx b/apps/readest-app/src/app/reader/components/SectionInfo.tsx index e7b2028e..6479e03f 100644 --- a/apps/readest-app/src/app/reader/components/SectionInfo.tsx +++ b/apps/readest-app/src/app/reader/components/SectionInfo.tsx @@ -65,12 +65,12 @@ const SectionInfo: React.FC = ({ right: showDoubleBorder ? `calc(${contentInsets.right}px)` : `calc(${Math.max(0, contentInsets.right - 32)}px)`, - width: showDoubleBorder ? '32px' : `${horizontalGap}%`, + width: showDoubleBorder ? '32px' : `${contentInsets.right}px`, height: `calc(100% - ${contentInsets.top + contentInsets.bottom}px)`, } : { top: `${topInset}px`, - paddingInline: `calc(${horizontalGap / 2}% + ${contentInsets.left}px)`, + paddingInline: `calc(${horizontalGap / 2}% + ${contentInsets.left / 2}px)`, width: '100%', } } diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts index 030a7fe5..d7833b92 100644 --- a/apps/readest-app/src/utils/style.ts +++ b/apps/readest-app/src/utils/style.ts @@ -261,10 +261,7 @@ const getLayoutStyles = ( a::before { content: ''; position: absolute; - top: -10px; - left: -10px; - right: -10px; - bottom: -10px; + inset: -10px; } p, blockquote, dd, div:not(:has(*:not(b, a, em, i, strong, u, span))) { line-height: ${lineSpacing} ${overrideLayout ? '!important' : ''}; @@ -328,10 +325,6 @@ const getLayoutStyles = ( white-space: pre-wrap !important; } - body:not([dir="rtl"]) { - overflow-x: clip; - } - .epubtype-footnote, aside[epub|type~="endnote"], aside[epub|type~="footnote"], @@ -609,6 +602,18 @@ export const transformStylesheet = (vw: number, vh: number, css: string) => { return match; }); + // clip nowrapped elements + css = css.replace(ruleRegex, (match, selector, block) => { + const hasWhiteSpaceNowrap = /white-space\s*:\s*nowrap\s*[;$]/.test(block); + if (hasWhiteSpaceNowrap) { + if (!/overflow\s*:/.test(block)) { + block = block.replace(/}$/, ' overflow: clip !important; }'); + } + return selector + block; + } + return match; + }); + // Process duokan-bleed css = css.replace(ruleRegex, (_, selector, block) => { const directions = ['top', 'bottom', 'left', 'right']; diff --git a/packages/foliate-js b/packages/foliate-js index 771c2bcf..2d31aa16 160000 --- a/packages/foliate-js +++ b/packages/foliate-js @@ -1 +1 @@ -Subproject commit 771c2bcf16ff387f8b8f6c6438b9c0a26334098f +Subproject commit 2d31aa16357609e733263f51cce1f10efde80c1c