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 25af3109..47077b62 100644
--- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
@@ -175,6 +175,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   };
 
   const onDrawAnnotation = (event: Event) => {
+    const viewSettings = getViewSettings(bookKey)!;
     const detail = (event as CustomEvent).detail;
     const { draw, annotation, doc, range } = detail;
     const { style, color } = annotation as BookNote;
@@ -185,8 +186,14 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       const { defaultView } = doc;
       const node = range.startContainer;
       const el = node.nodeType === 1 ? node : node.parentElement;
-      const { writingMode } = defaultView.getComputedStyle(el);
-      draw(Overlayer[style as keyof typeof Overlayer], { writingMode, color: hexColor });
+      const { writingMode, lineHeight, fontSize } = defaultView.getComputedStyle(el);
+      const lineHeightValue =
+        parseFloat(lineHeight) || viewSettings.lineHeight * viewSettings.defaultFontSize;
+      const fontSizeValue = parseFloat(fontSize) || viewSettings.defaultFontSize;
+      console.log('style', writingMode, lineHeight, fontSize);
+      const strokeWidth = style === 'underline' ? 2 : 4;
+      const padding = (lineHeightValue - fontSizeValue - strokeWidth) / 2;
+      draw(Overlayer[style as keyof typeof Overlayer], { writingMode, color: hexColor, padding });
     }
   };
 
diff --git a/packages/foliate-js b/packages/foliate-js
index b82b8727..28b88e50 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit b82b872712a671e286b671828128aa9a6043a4be
+Subproject commit 28b88e50c80de74a0e22fae57250f81131059098