use dy to position multi-line text (observablehq#1582)

* use dy to position multi-line text * fix blank initial lines
Byates2023 · May 18, 2023 · c8ec5ec · c8ec5ec
1 parent 46301cf
commit c8ec5ec
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 139 deletions.
diff --git a/src/marks/text.js b/src/marks/text.js
@@ -141,13 +141,17 @@ function applyMultilineText(selection, mark, T, TL) {
     const n = lines.length;
     const y = lineAnchor === "top" ? 0.71 : lineAnchor === "bottom" ? 1 - n : (164 - n * 100) / 200;
     if (n > 1) {
+      let m = 0;
       for (let i = 0; i < n; ++i) {
+        ++m;
         if (!lines[i]) continue;
         const tspan = this.ownerDocument.createElementNS(namespaces.svg, "tspan");
         tspan.setAttribute("x", 0);
-        tspan.setAttribute("y", `${(y + i) * lineHeight}em`);
+        if (i === m - 1) tspan.setAttribute("y", `${(y + i) * lineHeight}em`);
+        else tspan.setAttribute("dy", `${m * lineHeight}em`);
         tspan.textContent = lines[i];
         this.appendChild(tspan);
+        m = 0;
       }
     } else {
       if (y) this.setAttribute("y", `${y * lineHeight}em`);

diff --git a/test/output/covidIhmeProjectedDeaths.svg b/test/output/covidIhmeProjectedDeaths.svg
diff --git a/test/output/letterFrequencyWheel.svg b/test/output/letterFrequencyWheel.svg
diff --git a/test/output/longLabels.svg b/test/output/longLabels.svg
diff --git a/test/output/mobyDick.svg b/test/output/mobyDick.svg
diff --git a/test/output/penguinAnnotated.svg b/test/output/penguinAnnotated.svg
diff --git a/test/output/penguinFacetAnnotatedX.svg b/test/output/penguinFacetAnnotatedX.svg