From 674fed5230a52376c1352403e226ec84fa68181e Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Fri, 26 Dec 2025 16:51:02 +0800
Subject: [PATCH] fix(annotator): adjust underline position to the center of
 two lines, closes #2772 (#2793)

---
 .../src/app/reader/components/annotator/Annotator.tsx    | 9 +++++----
 .../app/reader/components/annotator/TranslatorPopup.tsx  | 2 +-
 packages/foliate-js                                      | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
index 539ef721..c4b59929 100644
--- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
@@ -261,13 +261,14 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       const node = range.startContainer;
       const el = node.nodeType === 1 ? node : node.parentElement;
       const { writingMode, lineHeight, fontSize } = defaultView.getComputedStyle(el);
-      const lineHeightValue =
-        parseFloat(lineHeight) || viewSettings.lineHeight * viewSettings.defaultFontSize;
       const fontSizeValue = parseFloat(fontSize) || viewSettings.defaultFontSize;
+      const lineHeightValue = parseFloat(lineHeight) || viewSettings.lineHeight * fontSizeValue;
       const strokeWidth = 2;
+      const verticalCompensation = appService?.isMobile ? 0 : -1;
+      const horizontalCompensation = appService?.isMobile ? -1 : 0;
       const padding = viewSettings.vertical
-        ? (lineHeightValue - fontSizeValue - strokeWidth) / 2
-        : strokeWidth;
+        ? (lineHeightValue - fontSizeValue) / 2 - strokeWidth + verticalCompensation
+        : (lineHeightValue - fontSizeValue) / 2 - strokeWidth + horizontalCompensation;
       draw(Overlayer[style as keyof typeof Overlayer], { writingMode, color: hexColor, padding });
     }
   };
diff --git a/apps/readest-app/src/app/reader/components/annotator/TranslatorPopup.tsx b/apps/readest-app/src/app/reader/components/annotator/TranslatorPopup.tsx
index 1fb4efb3..0626e846 100644
--- a/apps/readest-app/src/app/reader/components/annotator/TranslatorPopup.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/TranslatorPopup.tsx
@@ -201,7 +201,7 @@ const TranslatorPopup: React.FC<TranslatorPopupProps> = ({
             </div>
           )}
         </div>
-        <div className='absolute bottom-0 flex h-8 w-full items-center justify-between bg-gray-600 px-4'>
+        <div className='absolute bottom-0 flex h-8 w-full items-center justify-between px-4'>
           <div className='line-clamp-1 text-xs opacity-60'>
             {provider &&
               !loading &&
diff --git a/packages/foliate-js b/packages/foliate-js
index 43f30812..c80ead5f 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit 43f30812d19f49c9539cf9ca4fb558f90422c624
+Subproject commit c80ead5f347385b09cb3c776b2cd26fc7cea8cda