From 2568778a87f7109d26544cb10e9fb3a9451d47bd Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 1 Nov 2025 21:26:48 +0800
Subject: [PATCH] feat(layout): support for duokan bleed layout, closes #2374
 (#2378)

---
 apps/readest-app/src/utils/style.ts | 29 +++++++++++++++++++++++++++++
 packages/foliate-js                 |  2 +-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index 34d71002..d4784a3a 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -201,6 +201,10 @@ const getColorStyles = (
 
 const getLayoutStyles = (
   overrideLayout: boolean,
+  marginTop: number,
+  marginRight: number,
+  marginBottom: number,
+  marginLeft: number,
   paragraphMargin: number,
   lineSpacing: number,
   wordSpacing: number,
@@ -216,6 +220,10 @@ const getLayoutStyles = (
   @namespace epub "http://www.idpf.org/2007/ops";
   html {
     --default-text-align: ${justify ? 'justify' : 'start'};
+    --margin-top: ${marginTop}px;
+    --margin-right: ${marginRight}px;
+    --margin-bottom: ${marginBottom}px;
+    --margin-left: ${marginLeft}px;
     hanging-punctuation: allow-end last;
     orphans: 2;
     widows: 2;
@@ -503,6 +511,10 @@ export const getStyles = (viewSettings: ViewSettings, themeCode?: ThemeCode) =>
   }
   const layoutStyles = getLayoutStyles(
     viewSettings.overrideLayout!,
+    viewSettings.marginTopPx,
+    viewSettings.marginRightPx,
+    viewSettings.marginBottomPx,
+    viewSettings.marginLeftPx,
     viewSettings.paragraphMargin!,
     viewSettings.lineHeight!,
     viewSettings.wordSpacing!,
@@ -575,6 +587,23 @@ export const transformStylesheet = (vw: number, vh: number, css: string) => {
     }
     return match;
   });
+
+  // Process duokan-bleed
+  css = css.replace(ruleRegex, (_, selector, block) => {
+    const directions = ['top', 'bottom', 'left', 'right'];
+    for (const dir of directions) {
+      const bleedRegex = new RegExp(`duokan-bleed\\s*:\\s*[^;]*${dir}[^;]*;`);
+      const marginRegex = new RegExp(`margin-${dir}\\s*:`);
+      if (bleedRegex.test(block) && !marginRegex.test(block)) {
+        block = block.replace(
+          /}$/,
+          ` margin-${dir}: calc(-1 * var(--margin-${dir})) !important; }`,
+        );
+      }
+    }
+    return selector + block;
+  });
+
   // replace absolute font sizes with rem units
   // replace vw and vh as they cause problems with layout
   // replace hardcoded colors
diff --git a/packages/foliate-js b/packages/foliate-js
index a42d2299..1e23349d 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit a42d22995f25acaf448ad7d427d5998062bba742
+Subproject commit 1e23349d8f5a560a9795e43b54946d117edbe28a