@samuelbradshaw/highlight-helper-js 1.0.2 → 1.1.0

package/README.md

@@ -122,7 +122,7 @@ You can also install it using [npm](https://www.npmjs.com/package/@samuelbradsha
 - **loadHighlights(highlights)** – Load a set of highlights. If highlights are already loaded, this method will diff for changes and replace the loaded highlights. Parameters:
     - **highlights** – Array of [highlight objects](#highlight-objects). Each highlight should have a `highlightId`, and one or more other attributes. Omitted or invalid properties will fall back to previous or default values.
 - **createOrUpdateHighlight(properties, draw = true, activate = true)** – Create and load a new highlight, or update an existing highlight. Return value: updated highlight object. Parameters:
-    - **properties** – Object with one or more [highlight object](#highlight-objects) properties. When updating an existing highlight, only the `highlightId` and properties that changed need to be provided. If a highlight ID isn't provided, HighlightHelper.js will update the currently-active highlight or create a new highlight with a default ID.
+    - **properties** – Object with one or more [highlight object](#highlight-objects) properties. When updating an existing highlight, only the `highlightId` and properties that changed need to be provided. If a highlight ID isn't provided, HighlightHelper.js will update the currently-active highlight or create a new highlight with a default ID. New highlights and the active highlight use the text selection for their range, unless a range is provided. Other highlights keep their range.
     - **draw** – Boolean. Indicates if the highlight should be drawn after loading. Default: `true`.
     - **activate** – Boolean. Indicates if the highlight should be activated after loading. Default: `true`.
 - **drawHighlights(highlightIds = all)** – Draw or redraw highlights. In most cases, HighlightHelper.js will draw highlights automatically, but a manual redraw can be triggered if needed. Parameters:
@@ -165,6 +165,7 @@ HighlightHelper.js sends [custom events](https://developer.mozilla.org/en-US/doc
 - **hh:highlightactivate** – Sent when a highlight is activated.
 - **hh:highlightdeactivate** – Sent when a highlight is deactivated.
 - **hh:highlightremove** – Sent when a highlight is removed.
+- **hh:layoutchange** – Sent when highlights redraw because of container size changes.
 
 Each event has a `detail` property that provides additional information. For example, the `hh:tap` event could be used to activate a highlight:
 
@@ -221,9 +222,9 @@ The following options can be set using the `setOptions()` method. Options that a
     - **right** – HTML string for the right selection handle.
     - Template variables (optional): `var(--hh-color)` can be used to reference the highlight color.
 - **showDragHandles** – Array. Indicates when custom drag handles should be shown. Default: `['highlights']`. Possible values:
-    - **highlights** – Show custom handles for active highlights. Default: `true`.
-    - **selection** – Show custom handles for text selection. Default: `false`.
-    - **touch** – Show custom handles on touch devices (may be unstable due to interaction with built-in selection handles). Default: `false`.
+    - **highlights** – Show custom handles for active highlights.
+    - **selection** – Show custom handles for text selection.
+    - **touch** – Show custom handles on touch devices (may conflict with built-in selection handles).
 - **colorDefs** – Object. Defines highlight colors. Keys are color names, and values are [CSS color values](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default keys: `red`, `orange`, `yellow`, `green`, `blue`.
 - **styleDefs** – Object. Defines highlight style templates. Keys are style names. Default keys: `fill`, `underline`. Each style has four available properties:
     - **css** (required) – CSS string used in `highlight-api` and `mark-elements` drawing modes, for active text selection, and as a fallback in `svg` drawing mode.
@@ -279,19 +280,21 @@ Other:
 ### <a name="known-issues"></a>Known issues
 
 - **Chrome on Android** doesn't show text selection handles when text is selected programmatically (such as from a disambiguation panel, or with snap-to-word). Text selection UI must be initiated by a user gesture.
-    - Workaround: Tap the highlight again to show the handles.
-- **Safari on iOS and macOS** doesn't allow setting underline thickness on a ::highlight() pseudo-element, so underline highlights drawn by the CSS Custom Highlight API are thin and hard to see (see [StackOverflow](https://stackoverflow.com/q/79060854/1349044) and [WebKit Bugzilla](https://bugs.webkit.org/show_bug.cgi?id=282027)).
+    - Workaround: Tap the highlight again to show the handles, or enable custom drag handles.
+- **Safari on iOS and macOS** doesn't allow full control of the underline style on a `::highlight()` pseudo-element, so underline highlights drawn by the CSS Custom Highlight API may look incorrect (see [StackOverflow](https://stackoverflow.com/q/79060854/1349044) and [WebKit Bugzilla](https://bugs.webkit.org/show_bug.cgi?id=282027)).
     - Workaround: Use a different drawing mode.
+- **Safari on iOS and macOS** ignores text decoration styles on `::selection`, so active underline highlights can't be styled with CSS alone.
+    - Workaround: Set `svg` and `svgActive` for underline styles in styleDefs. On Safari, if a style has an `svg` template, HighlightHelper.js draws the active highlight with `svgActive` (or `svg` if `svgActive` isn't set), in any drawing mode.
+- **Safari on iOS** ignores all `::selection` styles, so active highlights show the native blue selection overlay instead of the highlight style.
+    - Workaround: Set `svg` and `svgActive` for all styles in styleDefs. Alternatively, in a native app with a webview, you may be able to set colors natively. See [tintColor](https://stackoverflow.com/a/60510743/1349044), [highlightView](https://developer.apple.com/documentation/uikit/uitextselectiondisplayinteraction/4195471-highlightview), and/or [handleViews](https://developer.apple.com/documentation/uikit/uitextselectiondisplayinteraction/4195470-handleviews).
 - **Safari on iOS and macOS** expand text selection to include the previous word when selecting a word in an inline element at the beginning of the line of text. Code to reproduce: `<p style="font-family: Times; font-size: 16px; width: 250px">This is an example of <i>text selection</i> <b>jumping</b> to include the previous word when text wraps at the beginning of an inline element. Double-click (macOS) or long-press (iOS) the word "jumping."</p>`
     - Workaround: Manually adjust highlight after it's created.
-- **Safari on iOS** doesn't respect text selection colors set via CSS, so when a highlight is active for editing it has a blue overlay.
-    - Workaround: In a native app with a webview, you may be able to set colors natively. See [tintColor](https://stackoverflow.com/a/60510743/1349044), [highlightView](https://developer.apple.com/documentation/uikit/uitextselectiondisplayinteraction/4195471-highlightview), and/or [handleViews](https://developer.apple.com/documentation/uikit/uitextselectiondisplayinteraction/4195470-handleviews).
 - **Safari on iOS 26** doesn't create a text selection when using an Apple Pencil (or other compatible stylus), until the stylus is lifted.
     - Workaround: Double-tap then drag the stylus.
 - **Safari on macOS** – SVG highlights are slightly shifted when zoomed to the maximum zoom size.
     - Workaround: Reduce text size.
-- **Amazon Fire webview** doesn’t show selection handles, making it difficult to resize an existing highlight (and custom drag handles don't work reliably on touch devices).
-    - Workaround: Long-press and drag to select everything you need before lifting your finger.
+- **Amazon Fire webview** doesn’t show selection handles, making it difficult to resize an existing highlight.
+    - Workaround: Long-press and drag to select everything you need before lifting your finger, or enable custom drag handles.
 
 
 ### <a name="choosing-a-drawing-mode"></a>Choosing a drawing mode
@@ -449,7 +452,7 @@ mark[data-hh-highlight-id][data-hh-style="fill"][data-hh-position~="end"] {
   border-bottom-right-radius: 0.25em;
   margin-right: -0.13em; padding-right: 0.13em;
 }
-mark[data-hh-highlight-id][data-hh-style="fill"] + mark[hh-highlight-id][data-hh-style="fill"] {
+mark[data-hh-highlight-id][data-hh-style="fill"] + mark[data-hh-highlight-id][data-hh-style="fill"] {
   margin-left: 0; padding-left: 0;
 }
 ```
@@ -610,7 +613,7 @@ document.getElementById('copy-html').addEventListener('click', (event) => {
 @media print {
   [data-hh-additions] { display: none; } /* Hide SVG highlights and custom drag handles */
   [data-hh-wrapper] { display: none; } /* Hide wrappers */
-  mark[data-hh-highlight-id] { all: unset; } /* Hide mark-element highlights */
+  mark[data-hh-highlight-id][data-hh-style] { all: unset; } /* Hide mark-element highlights */
 }
 ```
 

package/highlight-helper.js

@@ -124,6 +124,7 @@
         position: absolute;
         width: 0px;
         visibility: hidden;
+        touch-action: none;
       }
       [data-hh-pointer-down="true"] [data-hh-handle] {
         /* Hiding selection handle reduces jumpiness when dragging (and makes it easier to see the selection) */
@@ -136,13 +137,13 @@
       [data-hh-handle] [draggable] {
         position: absolute;
         top: -0.3em;
-        width: 3.2em;
-        height: calc(100% + 1.3em);
+        width: 2.2em;
+        height: calc(100% + 1.8em);
         background-color: transparent;
         z-index: 1;
       }
-      [data-hh-handle][data-hh-side="left"] [draggable] { right: -2em; }
-      [data-hh-handle][data-hh-side="right"] [draggable] { left: -2em; }
+      [data-hh-handle][data-hh-side="left"] [draggable] { right: -0.4em; }
+      [data-hh-handle][data-hh-side="right"] [draggable] { left: -0.4em; }
       [data-hh-default-handle] {
         position: absolute;
         width: 0.8em;
@@ -177,7 +178,8 @@
         fill: transparent;
         stroke: none;
       }
-      mark[data-hh-highlight-id] {
+      mark[data-hh-highlight-id]:where(${this._containerSelector} *) {
+        /* Scoped to the container, so another Highlighter instance's base rule can't override this instance's highlight styles */
         print-color-adjust: exact;
         background-color: transparent;
         color: inherit;
@@ -397,6 +399,7 @@
     // Hyperlink click (for each hyperlink in container)
     for (const hyperlinkElement of this._hyperlinkElements) {
       hyperlinkElement.addEventListener('click', (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
         this.deactivateHighlights();
         if (!this._allowHyperlinkClick) event.preventDefault();
       }, { signal: this._controller.signal });
@@ -420,6 +423,7 @@
           if (this._previousSelectionRange) this._updateSelectionState();
           previousWidth = width;
           previousHeight = height;
+          this._container.dispatchEvent(new CustomEvent('hh:layoutchange', { detail: { width, height } }));
         }
       }
     }, Math.floor(Object.keys(this._highlightsById).length / 20)));
@@ -428,11 +432,14 @@
     // Set drawing mode to mark elements temporarily when printing (highlights get offset in SVG drawing mode)
     let previousDrawingMode = null;
     globalThis.addEventListener('beforeprint', () => {
+      if (this._activeHighlightId) this.deactivateHighlights();
       previousDrawingMode = this._options.drawingMode;
+      if (previousDrawingMode === 'mark-elements') return;
       this.setOptions({ drawingMode: 'mark-elements' });
       this.drawHighlights();
     }, { signal: this._controller.signal });
     globalThis.addEventListener('afterprint', () => {
+      if (previousDrawingMode === 'mark-elements') return;
       this.setOptions({ drawingMode: previousDrawingMode });
       this.drawHighlights();
     }, { signal: this._controller.signal });
@@ -531,9 +538,15 @@
     let startParagraphId, startParagraphOffset, endParagraphId, endParagraphOffset;
     const selection = this._getRestoredSelectionOrCaret(globalThis.getSelection());
     if (selection.type === 'Range') adjustedSelectionRange = this._snapRangeToBoundaries(selection.getRangeAt(0));
-    if ((properties.startParagraphId ?? properties.startParagraphOffset ?? properties.endParagraphId ?? properties.endParagraphOffset != null) || (adjustedSelectionRange && !adjustedSelectionRange.collapsed)) {
+    const hasBoundsProperties = ['startParagraphId', 'startParagraphOffset', 'endParagraphId', 'endParagraphOffset'].some(key => properties[key] != null);
+    // New highlights and the active highlight take their bounds from the text selection. Other highlights keep their saved bounds, unless new bounds are provided (otherwise, updating an inactive highlight would move it to the text selection, or do nothing if there isn't one).
+    const useSelectionBounds = !hasBoundsProperties && adjustedSelectionRange && !adjustedSelectionRange.collapsed && (isNewHighlight || highlightId === this._activeHighlightId);
+    if (!isNewHighlight && !hasBoundsProperties && !useSelectionBounds) {
+      // Only appearance properties changed, so reuse the saved range instead of recalculating it
+      highlightRange = this._getCorrectedRangeObj(highlightId);
+    } else if (hasBoundsProperties || useSelectionBounds) {
       let startNode, startOffset, endNode, endOffset;
-      if (properties.startParagraphId ?? properties.startParagraphOffset ?? properties.endParagraphId ?? properties.endParagraphOffset != null) {
+      if (!useSelectionBounds) {
         startParagraphId = properties.startParagraphId ?? oldHighlightInfo?.startParagraphId;
         startParagraphOffset = Number.parseInt(properties.startParagraphOffset ?? oldHighlightInfo?.startParagraphOffset);
         endParagraphId = properties.endParagraphId ?? oldHighlightInfo?.endParagraphId;
@@ -541,7 +554,7 @@
         if (!this._paragraphIds.includes(startParagraphId) || !this._paragraphIds.includes(endParagraphId)) return;
         ([ startNode, startOffset ] = this._getTextNodeAndOffset(document.getElementById(startParagraphId), startParagraphOffset, 'start'));
         ([ endNode, endOffset ] = this._getTextNodeAndOffset(document.getElementById(endParagraphId), endParagraphOffset, 'end'));
-      } else if (adjustedSelectionRange) {
+      } else {
         startNode = adjustedSelectionRange.startContainer;
         startOffset = adjustedSelectionRange.startOffset;
         if (this._shouldSkipTextNode(startNode)) {
@@ -881,9 +894,19 @@
       return;
     }
     const selection = globalThis.getSelection();
-    const highlightRange = this._getCorrectedRangeObj(highlightId);
+
+    // Switch the active highlight before redrawing the previously active one, so there's no in-between state with no active highlight (an hh:selectionchange event in that state could lead an app to create a new highlight over the previous one)
+    const previousHighlight = this._highlightsById[this._activeHighlightId];
     this._activeHighlightId = highlightId;
 
+    // Redraw the previously active highlight. In mark-elements mode, this changes the DOM, so get the new highlight's range afterward.
+    if (previousHighlight) this.drawHighlights([previousHighlight.highlightId]);
+    const highlightRange = this._getCorrectedRangeObj(highlightId);
+
+    // Save the highlight's range as the previous selection range. Otherwise, a pending selectionchange event (such as one from the tap that led to this highlight being activated) is compared against a stale range, which can deactivate the highlight or restore a different selection range.
+    this._previousSelectionRange = highlightRange.cloneRange();
+    this._previousSelectionDirection = 'forward';
+
     // Update the selection range if needed
     // In Android Chrome, sometimes selection handles don't show when a selection is updated programmatically, so it's best to only update the selection if needed.
     let selectionRange = selection.type === 'Range' ? selection.getRangeAt(0) : null;
@@ -893,6 +916,7 @@
     }
 
     this._updateSelectionState();
+    if (previousHighlight) this._container.dispatchEvent(new CustomEvent('hh:highlightdeactivate', { detail: { highlight: previousHighlight } }));
     this._container.dispatchEvent(new CustomEvent('hh:highlightactivate', { detail: { highlight: highlightToActivate } }));
   }
 
@@ -1149,13 +1173,14 @@
         if (resolvedMode === 'highlight-api') {
           const colorString = this._options.colorDefs[highlightInfo.color];
           cssText += `
-            ${this._containerSelector} ::highlight(${highlightInfo.escapedHighlightId}) { all: unset; }
-            ${this._containerSelector} :is(${this._paragraphSelector})::highlight(${highlightInfo.escapedHighlightId}),
-            ${this._containerSelector} :is(${this._paragraphSelector}) *::highlight(${highlightInfo.escapedHighlightId}) { --hh-color: ${colorString}; ${styleString} }
-            ${this._containerSelector} :is(rt, img)::highlight(${highlightInfo.escapedHighlightId}) { color: inherit; background-color: transparent; }
+            :where(${this._containerSelector} *)::highlight(${highlightInfo.escapedHighlightId}) { all: unset; }
+            :where(${this._containerSelector} :is(${this._paragraphSelector}))::highlight(${highlightInfo.escapedHighlightId}),
+            :where(${this._containerSelector} :is(${this._paragraphSelector}) *)::highlight(${highlightInfo.escapedHighlightId}) { --hh-color: ${colorString}; ${styleString} }
+            :where(${this._containerSelector} :is(rt, img))::highlight(${highlightInfo.escapedHighlightId}),
+            :where(${this._containerSelector} :is(${this._paragraphSelector}) :is(rt, img))::highlight(${highlightInfo.escapedHighlightId}) { color: inherit; background-color: transparent; }
           `;
         } else {
-          cssText += `mark[data-hh-highlight-id=${highlightInfo.escapedHighlightId}][data-hh-style] { ${styleString} }\n`;
+          cssText += `mark[data-hh-style]:where([data-hh-highlight-id=${highlightInfo.escapedHighlightId}]) { ${styleString} }\n`;
         }
       }
     }
@@ -1188,7 +1213,6 @@
     // Get active highlight properties
     const activeHighlightId = this._activeHighlightId;
     const highlightInfo = this._highlightsById[activeHighlightId] ?? null;
-    const isSvgActive = activeHighlightId && highlightInfo?.resolvedDrawingMode === 'svg';
     const color = highlightInfo?.color ?? null;
     const style = highlightInfo?.style ?? null;
     const variables = highlightInfo?.variables ?? {};
@@ -1207,6 +1231,9 @@
     if (boundsHash != this._previousBoundsHash) changes.push('selection');
     if (changes.length === 0) return;
 
+    // WebKit doesn't draw text decorations on ::selection, and iOS ignores ::selection styles entirely. If the style has an SVG template, use it for the active state.
+    const useSvgSelection = activeHighlightId && (highlightInfo?.resolvedDrawingMode === 'svg' || isWebKit && this._getStyleDef(style)?.svg);
+
     // Get range metadata
     let rangeText = null, rangeHtml = null, rangeParagraphIds = null, rangeObj = null;
     let rangeRect = null, rangeParagraphs = [], rangeLineRects = [];
@@ -1232,9 +1259,9 @@
     this._selectionState = { activeHighlightId, color, style, variables, isResizing, pointerType, selection, changes, rangeText, rangeHtml, rangeRect: rangeRect, rangeLineRects, rangeParagraphIds, rangeObj };
     this._previousBoundsHash = boundsHash;
 
-    // Draw SVG selection rects (SVG drawing mode only)
+    // Draw SVG selection rects (SVG drawing mode, or WebKit selection style fallback)
     this._svgActiveOverlay.innerHTML = '';
-    if (isSvgActive) {
+    if (useSvgSelection) {
       this._svgActiveOverlay.dataset.hhColor = color;
       this._svgActiveOverlay.dataset.hhStyle = style;
       let svgContent = '';
@@ -1254,33 +1281,33 @@
       const colorString = options.colorDefs[color] ?? (supportsAccentColor ? 'AccentColor' : 'dodgerblue');
       this._container.style.setProperty('--hh-color', colorString);
 
-      // Hide the active highlight (and wrappers), and set a selection style that mimics the highlight. This avoids the need to redraw the highlight while actively editing it (especially important for <mark> highlights, because DOM manipulation around the selection can make the selection UI unstable).
-      if (isSvgActive) {
-        this._selectionStylesheet.replaceSync(`
-          ${this._containerSelector} g[data-hh-highlight-id="${activeHighlightId}"][data-hh-style] { display: none; }
-          ${this._containerSelector} [data-hh-wrapper][data-hh-highlight-id="${activeHighlightId}"] { visibility: hidden; }
-          ${this._containerSelector} ::selection { background-color: transparent; }
-        `);
-      } else if (activeHighlightId) {
-        // Remove stale SVG highlight if a highlight switches from SVG to a different resolvedDrawingMode
-        for (const svgHighlight of this._svgBackground.querySelectorAll(`g[data-hh-highlight-id="${activeHighlightId}"]`)) {
-          svgHighlight.remove();
-        }
-        const styleString = this._getStyleString(style, 'css', true, highlightInfo.variables, highlightInfo.rangeRect);
-        this._selectionStylesheet.replaceSync(`
-          ${this._containerSelector} ::highlight(${highlightInfo.escapedHighlightId}) { all: unset; }
+      // Hide the active highlight (and wrappers), and either draw it with the SVG overlay or set a selection style that mimics it. This avoids the need to redraw the highlight while actively editing it (especially important for <mark> highlights, because DOM manipulation around the selection can make the selection UI unstable).
+      if (activeHighlightId) {
+        let cssText = `
+          ${this._containerSelector} ::highlight(${highlightInfo.escapedHighlightId}),
+          ${this._containerSelector} :is(${this._paragraphSelector})::highlight(${highlightInfo.escapedHighlightId}),
+          ${this._containerSelector} :is(${this._paragraphSelector}) *::highlight(${highlightInfo.escapedHighlightId}) { all: unset; }
           ${this._containerSelector} mark[data-hh-highlight-id="${activeHighlightId}"][data-hh-style] { all: unset; }
           ${this._containerSelector} [data-hh-wrapper][data-hh-highlight-id="${activeHighlightId}"] { visibility: hidden; }
+          ${this._containerSelector} g[data-hh-highlight-id="${activeHighlightId}"][data-hh-style] { display: none; }
           ${this._containerSelector} ::selection { background-color: transparent; }
-          ${this._containerSelector} :is(${this._paragraphSelector})::selection,
-          ${this._containerSelector} :is(${this._paragraphSelector}) *::selection { --hh-color: ${colorString}; ${styleString} }
-          ${this._containerSelector} :is(rt, img)::selection { background-color: transparent; }
-        `);
+        `;
+        // If not drawn by the SVG overlay, style the selection to mimic the highlight
+        if (!useSvgSelection) {
+          const styleString = this._getStyleString(style, 'css', true, highlightInfo.variables, highlightInfo.rangeRect);
+          cssText += `
+            ${this._containerSelector} :is(${this._paragraphSelector})::selection,
+            ${this._containerSelector} :is(${this._paragraphSelector}) *::selection { --hh-color: ${colorString}; ${styleString} }
+            ${this._containerSelector} :is(rt, img)::selection,
+            ${this._containerSelector} :is(${this._paragraphSelector}) :is(rt, img)::selection { background-color: transparent; }
+          `;
+        }
+        this._selectionStylesheet.replaceSync(cssText);
 
       // No active highlight (show the regular selection UI)
       } else {
         this._selectionStylesheet.replaceSync(`
-          ${this._containerSelector} ::selection { background-color: Highlight; color: inherit; }
+          :where(${this._containerSelector} *)::selection { background-color: Highlight; color: inherit; }
           ${this._containerSelector} rt::selection, ${this._containerSelector} img::selection { background-color: transparent; }
         `);
       }
@@ -1504,7 +1531,7 @@
     const options = this._options;
     let css = '';
     for (const color of Object.keys(options.colorDefs)) {
-      css += `${this._containerSelector} [data-hh-color="${color}"] { --hh-color: ${options.colorDefs[color]}; }\n`;
+      css += `:where(${this._containerSelector} [data-hh-color="${color}"]) { --hh-color: ${options.colorDefs[color]}; }\n`;
     }
     this._colorStylesheet.replaceSync(css);
   }
@@ -1513,8 +1540,7 @@
   Highlighter.prototype._getResolvedDrawingMode = function (highlightInfo) {
     const options = this._options;
     if (options.drawingMode === 'mark-elements') return 'mark-elements';
-    const resolvedStyle = Object.hasOwn(options.styleDefs, highlightInfo.style) ? highlightInfo.style : _defaultStyle;
-    if ((options.drawingMode === 'svg' && !options.styleDefs[resolvedStyle]?.svg)
+    if ((options.drawingMode === 'svg' && !this._getStyleDef(highlightInfo.style)?.svg)
       || (options.drawingMode === 'highlight-api' && !supportsHighlightApi)) {
       return 'mark-elements';
     }
@@ -1587,13 +1613,18 @@
     return str.replace(/\{[^}]+\}/g, match => map[match] ?? match);
   }
 
+  // Get the style definition for a highlight style, falling back to the default style
+  Highlighter.prototype._getStyleDef = function (style) {
+    const styleDefs = this._options.styleDefs;
+    return styleDefs[Object.hasOwn(styleDefs, style) ? style : _defaultStyle];
+  }
+
   // Get style string for a given highlight style
   Highlighter.prototype._getStyleString = function (style, type, active = false, variables = {}, rangeRect = null, lineRect = null) {
-    const options = this._options;
-    style = Object.hasOwn(options.styleDefs, style) ? style : _defaultStyle;
-    let styleString = options.styleDefs[style]?.[type] ?? '';
+    const styleDef = this._getStyleDef(style);
+    let styleString = styleDef?.[type] ?? '';
     if (active) {
-      styleString = options.styleDefs[style]?.[`${type}Active`] ?? styleString;
+      styleString = styleDef?.[`${type}Active`] ?? styleString;
     }
     if (styleString) {
       styleString = this._applySubstitutions(styleString, variables, rangeRect, lineRect);
@@ -1716,6 +1747,22 @@
     const paragraphFontSize = Number.parseFloat(paragraphStyle.fontSize);
     const snapTolerance = Math.max(paragraphFontSize / 2, 4);
 
+    const pseudoElemRects = _gatherPseudoElemRects(paragraph);
+
+    // Horizontal distance between a rect and a line's span so far, ignoring space taken up by pseudoelements (such as footnote markers) that contribute no text nodes. Zero or negative means the rect overlaps the span.
+    const distanceToLine = (pos, rect) => {
+      const gapLeft = Math.min(pos.maxRight, rect.right);
+      const gapRight = Math.max(pos.minLeft, rect.left);
+      let distance = gapRight - gapLeft;
+      if (distance <= snapTolerance) return distance;
+      for (const pseudoRect of pseudoElemRects) {
+        if (pseudoRect.top >= rect.bottom || pseudoRect.bottom <= rect.top) continue;
+        const overlap = Math.min(pseudoRect.right, gapRight) - Math.max(pseudoRect.left, gapLeft);
+        if (overlap > 0) distance -= overlap;
+      }
+      return distance;
+    };
+
     const linePositions = {};
     const lineBottomKeys = [];
     const textNodeRange = document.createRange();
@@ -1731,8 +1778,7 @@
       for (const rect of textNodeRange.getClientRects()) {
         const lineBottom = lineBottomKeys.find(b => {
           if (Math.abs(b - rect.bottom) >= snapTolerance) return false;
-          const pos = linePositions[b];
-          return rect.left <= pos.maxRight + snapTolerance && rect.right >= pos.minLeft - snapTolerance;
+          return distanceToLine(linePositions[b], rect) <= snapTolerance;
         }) ?? rect.bottom;
         if (!linePositions[lineBottom]) lineBottomKeys.push(lineBottom);
         const pos = linePositions[lineBottom] ??= { minLeft: rect.left, maxRight: rect.right, maxFontSize: fontSize, maxLineHeight: lineHeight };
@@ -1744,7 +1790,6 @@
     }
 
     // Expand line rects to include pseudoelements, and snap to the paragraph's leading edge
-    const pseudoElemRects = _gatherPseudoElemRects(paragraph);
     lineBottomKeys.sort((a, b) => a - b);
     const lines = lineBottomKeys.map((lineBottom) => {
       const pos = linePositions[lineBottom];
@@ -1761,6 +1806,8 @@
   }
 
   Highlighter.prototype._updateHighlightRects = function (highlightIds = Object.keys(this._highlightsById), paragraphLineRectsCache = new Map(), columnGeometryCache = new Map()) {
+    // Refresh _additionsRect in case it has stale data
+    this._additionsRect = this._additionsDiv.getBoundingClientRect();
     for (const highlightId of highlightIds) {
       const highlightInfo = this._highlightsById[highlightId];
       const rangeParagraphs = highlightInfo.rangeParagraphIds.map(id => document.getElementById(id));
@@ -1784,9 +1831,9 @@
         paragraphLineRectsCache.set(paragraph.id, paragraphLineRects);
       }
       const { lines, snapTolerance, pseudoElemRects } = paragraphLineRects;
-      // If the previous paragraph is below the current paragraph (such as in multi-column layouts), reset prevParagraphBottom
       if (lines.length === 0) continue;
-      if (prevParagraphBottom > lines[0].bottom) prevParagraphBottom = Number.NEGATIVE_INFINITY;
+      // The previous paragraph's bottom is only a valid boundary if it sits above this paragraph's first line — reset it if the paragraphs are side by side, or in a later column
+      if (prevParagraphBottom > lines[0].top + snapTolerance) prevParagraphBottom = Number.NEGATIVE_INFINITY;
       const lineStates = lines.map((lineRect, i) => ({
         topY: i === 0 ? prevParagraphBottom : lines[i - 1].bottom,
         left: Infinity, right: -Infinity,
@@ -2048,7 +2095,7 @@
 
   // Check browser type
   const isTouchDevice = navigator.maxTouchPoints > 0;
-  const isWebKit = /^((?!Chrome|Firefox|Android|Samsung).)*AppleWebKit/i.test(navigator.userAgent);
+  const isWebKit = /^(?!.*(Chrome|Firefox|Android|Samsung)).*AppleWebKit/i.test(navigator.userAgent);
   const isWKWebView = isWebKit && globalThis.webkit?.messageHandlers;
   const supportsCaretPositionFromPoint = document.caretPositionFromPoint;
   const supportsCaretRangeFromPoint = document.caretRangeFromPoint;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samuelbradshaw/highlight-helper-js",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "JavaScript tool that enables highlighting or underlining text in an HTML page.",
   "type": "module",
   "main": "highlight-helper.mjs",