From 8c3a481ee0d8c18e16cd037e73927af4d378f0b5 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Mon, 8 Jul 2024 10:14:30 +0300
Subject: [PATCH 1/2] Added explicit `box-sizing: content-box` for the `span`
 annotations

---
 .../src/highlight/span/spansRenderer.css      |  9 +++++++--
 .../src/highlight/span/spansRenderer.ts       | 20 +++++++++----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/text-annotator/src/highlight/span/spansRenderer.css b/packages/text-annotator/src/highlight/span/spansRenderer.css
index cd1b51c6..611a46ba 100644
--- a/packages/text-annotator/src/highlight/span/spansRenderer.css
+++ b/packages/text-annotator/src/highlight/span/spansRenderer.css
@@ -12,8 +12,13 @@
 }
 
 .r6o-annotatable .r6o-span-highlight-layer .r6o-annotation {
-  border-style: solid;
-  border-width: 0;
   position: absolute;
   display: block;
+  border-width: 0;
+  border-style: solid;
+}
+
+.r6o-annotation {
+  /* `padding` should grow beyond the `height` and be used as the underline offset */
+  box-sizing: content-box;
 }
diff --git a/packages/text-annotator/src/highlight/span/spansRenderer.ts b/packages/text-annotator/src/highlight/span/spansRenderer.ts
index 705e06ee..19a04263 100644
--- a/packages/text-annotator/src/highlight/span/spansRenderer.ts
+++ b/packages/text-annotator/src/highlight/span/spansRenderer.ts
@@ -21,7 +21,7 @@ const computeZIndex = (rect: Rect, all: Rect[]): number => {
     intersects(rect, other) &&
     other.width > rect.width
   )).length;
-}
+};
 
 const createRenderer = (container: HTMLElement): RendererImplementation => {
 
@@ -36,12 +36,12 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
   let currentRendered: Highlight[] = [];
 
   const redraw = (
-    highlights: Highlight[], 
+    highlights: Highlight[],
     viewportBounds: ViewportBounds,
     currentStyle?: HighlightStyleExpression,
     painter?: HighlightPainter,
     lazy?: boolean
-  ) => {    
+  ) => {
     const noChanges = dequal(currentRendered, highlights);
 
     // If there are no changes and rendering is set to lazy
@@ -85,7 +85,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
             span.style.borderBottomWidth = `${style.underlineThickness}px`;
 
           if (style.underlineOffset)
-            span.style.height = `${rect.height + style.underlineOffset}px`
+            span.style.paddingBottom = `${style.underlineOffset}px`;
 
           highlightLayer.appendChild(span);
         }
@@ -93,29 +93,29 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
     });
 
     currentRendered = highlights;
-  }
+  };
 
   const setVisible = (visible: boolean) => {
     if (visible)
       highlightLayer.classList.remove('hidden');
     else
       highlightLayer.classList.add('hidden');
-  }
+  };
 
   const destroy = () => {
     highlightLayer.remove();
-  }
+  };
 
   return {
     destroy,
     redraw,
     setVisible
-  }
+  };
 
-}
+};
 
 export const createSpansRenderer = (
-  container: HTMLElement, 
+  container: HTMLElement,
   state: TextAnnotatorState,
   viewport: ViewportState
 ) => createBaseRenderer(container, state, viewport, createRenderer(container));

From 617072b8df2f013da08f354d0d44cc6707321142 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Mon, 8 Jul 2024 10:55:54 +0300
Subject: [PATCH 2/2] Removed extra `;`

---
 .../src/highlight/span/spansRenderer.ts            | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/text-annotator/src/highlight/span/spansRenderer.ts b/packages/text-annotator/src/highlight/span/spansRenderer.ts
index 19a04263..997acd10 100644
--- a/packages/text-annotator/src/highlight/span/spansRenderer.ts
+++ b/packages/text-annotator/src/highlight/span/spansRenderer.ts
@@ -14,14 +14,14 @@ const computeZIndex = (rect: Rect, all: Rect[]): number => {
   const intersects = (a: Rect, b: Rect): boolean => (
     a.x <= b.x + b.width && a.x + a.width >= b.x &&
     a.y <= b.y + b.height && a.y + a.height >= b.y
-  );
+  )
 
   return all.filter(other => (
     rect !== other &&
     intersects(rect, other) &&
     other.width > rect.width
   )).length;
-};
+}
 
 const createRenderer = (container: HTMLElement): RendererImplementation => {
 
@@ -93,18 +93,18 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
     });
 
     currentRendered = highlights;
-  };
+  }
 
   const setVisible = (visible: boolean) => {
     if (visible)
       highlightLayer.classList.remove('hidden');
     else
       highlightLayer.classList.add('hidden');
-  };
+  }
 
   const destroy = () => {
     highlightLayer.remove();
-  };
+  }
 
   return {
     destroy,
@@ -112,10 +112,10 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
     setVisible
   };
 
-};
+}
 
 export const createSpansRenderer = (
   container: HTMLElement,
   state: TextAnnotatorState,
   viewport: ViewportState
-) => createBaseRenderer(container, state, viewport, createRenderer(container));
+) => createBaseRenderer(container, state, viewport, createRenderer(container))