@braccato/core 1.6.3 → 1.6.4

package/dist/inject.js

@@ -298,6 +298,15 @@ function createHighlightRun(doc, text) {
     run.setAttribute("aria-hidden", "true");
     return run;
 }
+// A background gap must carry the background size too, or it renders full-size and the gap looks oversized.
+function createSpaceNode(doc, text, isBackground) {
+    if (!isBackground)
+        return doc.createTextNode(text);
+    const span = doc.createElement("span");
+    span.classList.add(BACKGROUND_LYRIC_CLASS);
+    span.textContent = text;
+    return span;
+}
 export function createLyricsLine(doc, parts, line, lyricElement, options = { splitBackgroundLine: true }) {
     const lineText = parts.map(part => part.words).join("");
     const mainText = options.splitBackgroundLine
@@ -336,8 +345,8 @@ export function createLyricsLine(doc, parts, line, lyricElement, options = { spl
             const highlightRun = shouldUseBackgroundLine ? backgroundHighlightRun : mainHighlightRun;
             const pendingSpace = shouldUseBackgroundLine ? pendingBackgroundSpace : pendingForegroundSpace;
             if (target.childNodes.length > 0 && pendingSpace.length > 0) {
-                target.appendChild(doc.createTextNode(pendingSpace));
-                highlightRun.appendChild(doc.createTextNode(pendingSpace));
+                target.appendChild(createSpaceNode(doc, pendingSpace, shouldUseBackgroundLine));
+                highlightRun.appendChild(createSpaceNode(doc, pendingSpace, shouldUseBackgroundLine));
             }
             const { lyricGroup, highlightGroup } = createWordGroup(doc, item, line);
             target.appendChild(lyricGroup);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braccato/core",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Synchronized lyrics renderer with word-by-word animations",
   "type": "module",
   "license": "MIT",