From 9444be7fccdb8dfdba4c42697cb234ec40618df6 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Tue, 10 Feb 2026 23:13:53 +0800
Subject: [PATCH] feat(annotator): rounded highlight style for horizontal and
 vertical layout, closes #3208 (#3252)

---
 .../src/app/reader/components/annotator/Annotator.tsx        | 5 ++++-
 .../src/app/reader/components/sidebar/BooknoteItem.tsx       | 3 ++-
 packages/foliate-js                                          | 2 +-
 3 files changed, 7 insertions(+), 3 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 71de84c0..7ada5adf 100644
--- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
@@ -318,7 +318,10 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       const { writingMode } = defaultView.getComputedStyle(el);
       draw(Overlayer.bubble, { writingMode });
     } else if (style === 'highlight') {
-      draw(Overlayer.highlight, { color: isBwEink ? einkBgColor : hexColor });
+      draw(Overlayer.highlight, {
+        color: isBwEink ? einkBgColor : hexColor,
+        vertical: viewSettings.vertical,
+      });
     } else if (['underline', 'squiggly'].includes(style as string)) {
       const { defaultView } = doc;
       const node = range.startContainer;
diff --git a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
index 5801c707..dd17e775 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
@@ -181,7 +181,8 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item, onClick }) =
                 item.note && 'content font-size-xs text-gray-500',
                 (item.style === 'underline' || item.style === 'squiggly') &&
                   'underline decoration-2',
-                item.style === 'highlight' && `bg-${item.color}-500 bg-opacity-40`,
+                item.style === 'highlight' &&
+                  `bg-${item.color}-500 rounded-[4px] bg-opacity-40 px-[2px] py-[1px]`,
                 item.style === 'underline' && `decoration-${item.color}-400`,
                 item.style === 'squiggly' && `decoration-wavy decoration-${item.color}-400`,
               )}
diff --git a/packages/foliate-js b/packages/foliate-js
index f1cfbb0a..4fbd77f4 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit f1cfbb0a4d71c8e6d1b306ae4745785ed52a0729
+Subproject commit 4fbd77f4a36c8af9bc390b99e53a6eff1cb13986