svelteplot · gka · Jun 11, 2025 · Jun 11, 2025 · Jun 11, 2025 · Jun 11, 2025
diff --git a/src/lib/helpers/getBaseStyles.ts b/src/lib/helpers/getBaseStyles.ts
@@ -50,3 +50,13 @@ export function maybeToPixel(cssKey: string, value: string | number) {
     }
     return value;
 }
+
+export function maybeFromPixel(value: string | number) {
+    return typeof value === 'string' && value.endsWith('px') ? +value.slice(0, -2) : value;
+}
+
+export function maybeFromRem(value: string | number, rootFontSize: number = 16) {
+    return typeof value === 'string' && value.endsWith('rem')
+        ? +value.slice(0, -3) * rootFontSize
+        : value;
+}
diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
@@ -38,6 +38,7 @@ export function resolveProp<T>(
     ) {
         return datum[accessor] as T;
     }
+
     return isRawValue(accessor) ? accessor : _defaultValue;
 }
 

diff --git a/src/lib/marks/Text.svelte b/src/lib/marks/Text.svelte
@@ -18,6 +18,11 @@
          * the line anchor for vertical position; top, bottom, or middle
          */
         lineAnchor?: ConstantAccessor<'bottom' | 'top' | 'middle'>;
+        /**
+         * line height as multiplier of font size
+         * @default 1.2
+         */
+        lineHeight?: ConstantAccessor<number>;
         frameAnchor?: ConstantAccessor<
             | 'bottom'
             | 'top'
@@ -35,7 +40,6 @@
     import { getContext, type Snippet } from 'svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import type {
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
@@ -46,11 +50,14 @@
     import Mark from '../Mark.svelte';
     import { sort } from '$lib/index.js';
 
+    import MultilineText from './helpers/MultilineText.svelte';
+
     const DEFAULTS = {
         fontSize: 12,
         fontWeight: 500,
         strokeWidth: 1.6,
         frameAnchor: 'center',
+        lineHeight: 1.1,
         ...getContext<PlotDefaults>('svelteplot/_defaults').text
     };
 
@@ -65,21 +72,12 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
-
-    const LINE_ANCHOR = {
-        bottom: 'auto',
-        middle: 'central',
-        top: 'hanging'
-    } as const;
-
     const args = $derived(
         sort({
             data,
             ...options
         })
-    );
+    ) as TextMarkProps;
 </script>
 
 <Mark
@@ -101,99 +99,9 @@
         <GroupMultiple class="text {className}" length={className ? 2 : args.data.length}>
             {#each scaledData as d, i (i)}
                 {#if d.valid}
-                    {@const title = resolveProp(args.title, d.datum, '')}
-                    {@const frameAnchor = resolveProp(args.frameAnchor, d.datum)}
-                    {@const isLeft =
-                        frameAnchor === 'left' ||
-                        frameAnchor === 'top-left' ||
-                        frameAnchor === 'bottom-left'}
-                    {@const isRight =
-                        frameAnchor === 'right' ||
-                        frameAnchor === 'top-right' ||
-                        frameAnchor === 'bottom-right'}
-                    {@const isTop =
-                        frameAnchor === 'top' ||
-                        frameAnchor === 'top-left' ||
-                        frameAnchor === 'top-right'}
-                    {@const isBottom =
-                        frameAnchor === 'bottom' ||
-                        frameAnchor === 'bottom-left' ||
-                        frameAnchor === 'bottom-right'}
-                    {@const [x, y] =
-                        args.x != null && args.y != null
-                            ? [d.x, d.y]
-                            : [
-                                  args.x != null
-                                      ? d.x
-                                      : isLeft
-                                        ? plot.options.marginLeft
-                                        : isRight
-                                          ? plot.options.marginLeft + plot.facetWidth
-                                          : plot.options.marginLeft + plot.facetWidth * 0.5,
-                                  args.y != null
-                                      ? d.y
-                                      : isTop
-                                        ? plot.options.marginTop
-                                        : isBottom
-                                          ? plot.options.marginTop + plot.facetHeight
-                                          : plot.options.marginTop + plot.facetHeight * 0.5
-                              ]}
-
-                    {@const dx = +resolveProp(args.dx, d.datum, 0)}
-                    {@const dy = +resolveProp(args.dy, d.datum, 0)}
                     {@const textLines = String(resolveProp(args.text, d.datum, '')).split('\n')}
-                    {@const lineAnchor = resolveProp(
-                        args.lineAnchor,
-                        d.datum,
-                        args.y != null ? 'middle' : isTop ? 'top' : isBottom ? 'bottom' : 'middle'
-                    )}
-                    {@const textClassName = resolveProp(args.textClass, d.datum, null)}
-
-                    {@const [style, styleClass] = resolveStyles(
-                        plot,
-                        { ...d, __tspanIndex: 0 },
-                        {
-                            fontSize: 12,
-                            fontWeight: 500,
-                            strokeWidth: 1.6,
-                            textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle',
-                            ...args
-                        },
-                        'fill',
-                        usedScales
-                    )}
 
-                    {#if textLines.length > 1}
-                        <!-- multiline text-->
-                        {@const fontSize = resolveProp(args.fontSize, d.datum) || 12}
-                        <text
-                            class={[textClassName]}
-                            dominant-baseline={LINE_ANCHOR[lineAnchor]}
-                            transform="translate({Math.round(x + dx)},{Math.round(
-                                y +
-                                    dy -
-                                    (lineAnchor === 'bottom'
-                                        ? textLines.length - 1
-                                        : lineAnchor === 'middle'
-                                          ? (textLines.length - 1) * 0.5
-                                          : 0) *
-                                        fontSize
-                            )})"
-                            >{#each textLines as line, l (l)}<tspan
-                                    x="0"
-                                    dy={l ? fontSize : 0}
-                                    class={styleClass}
-                                    {style}>{line}</tspan
-                                >{/each}{#if title}<title>{title}</title>{/if}</text>
-                    {:else}
-                        <!-- singleline text-->
-                        <text
-                            class={[textClassName, styleClass]}
-                            dominant-baseline={LINE_ANCHOR[lineAnchor]}
-                            transform="translate({Math.round(x + dx)},{Math.round(y + dy)})"
-                            {style}
-                            >{textLines[0]}{#if title}<title>{title}</title>{/if}</text>
-                    {/if}
+                    <MultilineText {textLines} {d} {args} {usedScales} />
                 {/if}
             {/each}
         </GroupMultiple>

diff --git a/src/lib/marks/helpers/MultilineText.svelte b/src/lib/marks/helpers/MultilineText.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+    import { resolveProp, resolveStyles } from 'svelteplot/helpers/resolve';
+    import { getContext, type ComponentProps } from 'svelte';
+    import type { PlotContext, ScaledDataRecord, UsedScales } from 'svelteplot/types';
+    import type Text from '../Text.svelte';
+    import { CSS_VAR } from 'svelteplot/constants';
+    import { maybeFromPixel, maybeFromRem } from 'svelteplot/helpers/getBaseStyles';
+
+    const LINE_ANCHOR = {
+        bottom: 'auto',
+        middle: 'central',
+        top: 'hanging'
+    } as const;
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    let {
+        textLines,
+        d,
+        args,
+        usedScales
+    }: {
+        textLines: string[];
+        d: ScaledDataRecord;
+        args: ComponentProps<typeof Text>;
+        usedScales: UsedScales;
+    } = $props();
+
+    const title = $derived(resolveProp(args.title, d.datum, ''));
+    const frameAnchor = $derived(resolveProp(args.frameAnchor, d.datum));
+    const isLeft = $derived(
+        frameAnchor === 'left' || frameAnchor === 'top-left' || frameAnchor === 'bottom-left'
+    );
+    const isRight = $derived(
+        frameAnchor === 'right' || frameAnchor === 'top-right' || frameAnchor === 'bottom-right'
+    );
+    const isTop = $derived(
+        frameAnchor === 'top' || frameAnchor === 'top-left' || frameAnchor === 'top-right'
+    );
+    const isBottom = $derived(
+        frameAnchor === 'bottom' || frameAnchor === 'bottom-left' || frameAnchor === 'bottom-right'
+    );
+    const lineAnchor = $derived(
+        resolveProp(
+            args.lineAnchor,
+            d.datum,
+            args.y != null ? 'middle' : isTop ? 'top' : isBottom ? 'bottom' : 'middle'
+        )
+    );
+    const textClassName = $derived(resolveProp(args.textClass, d.datum, null));
+    const [x, y] = $derived(
+        args.x != null && args.y != null
+            ? [d.x, d.y]
+            : [
+                  args.x != null
+                      ? d.x
+                      : isLeft
+                        ? plot.options.marginLeft
+                        : isRight
+                          ? plot.options.marginLeft + plot.facetWidth
+                          : plot.options.marginLeft + plot.facetWidth * 0.5,
+                  args.y != null
+                      ? d.y
+                      : isTop
+                        ? plot.options.marginTop
+                        : isBottom
+                          ? plot.options.marginTop + plot.facetHeight
+                          : plot.options.marginTop + plot.facetHeight * 0.5
+              ]
+    );
+
+    const dx = $derived(+resolveProp(args.dx, d.datum, 0));
+    const dy = $derived(+resolveProp(args.dy, d.datum, 0));
+
+    const [style, styleClass] = $derived(
+        resolveStyles(
+            plot,
+            { ...d, __tspanIndex: 0 },
+            {
+                fontSize: 12,
+                fontWeight: 500,
+                strokeWidth: 1.6,
+                textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle',
+                ...args
+            },
+            'fill',
+            usedScales
+        )
+    );
+
+    const fontSize = $derived(
+        textLines.length > 1 ? (resolveProp(args.fontSize, d.datum) ?? 12) : 0
+    );
+    let textElement: SVGTextElement | null = $state(null);
+
+    const rootFontSize = $derived(
+        textElement?.ownerDocument?.documentElement && textLines.length > 1
+            ? maybeFromPixel(getComputedStyle(textElement.ownerDocument.documentElement).fontSize)
+            : 14
+    );
+
+    const computedFontSize = $derived(
+        textElement && textLines.length > 1 && CSS_VAR.test(fontSize)
+            ? maybeFromRem(
+                  maybeFromPixel(
+                      getComputedStyle(textElement).getPropertyValue(
+                          `--${fontSize.match(CSS_VAR)[1]}`
+                      )
+                  ),
+                  rootFontSize
+              )
+            : fontSize
+    );
+
+    const lineHeight = $derived(
+        textLines.length > 1 ? (resolveProp(args.lineHeight, d.datum) ?? 1.2) : 0
+    );
+</script>
+
+{#if textLines.length > 1}
+    <!-- multiline text-->
+    <text
+        bind:this={textElement}
+        class={[textClassName]}
+        dominant-baseline={LINE_ANCHOR[lineAnchor]}
+        transform="translate({Math.round(x + dx)},{Math.round(
+            y +
+                dy -
+                (lineAnchor === 'bottom'
+                    ? textLines.length - 1
+                    : lineAnchor === 'middle'
+                      ? (textLines.length - 1) * 0.5
+                      : 0) *
+                    computedFontSize *
+                    lineHeight
+        )})"
+        >{#each textLines as line, l (l)}<tspan
+                x="0"
+                dy={l ? computedFontSize * lineHeight : 0}
+                class={styleClass}
+                {style}>{line}</tspan
+            >{/each}{#if title}<title>{title}</title>{/if}</text>
+{:else}
+    <!-- singleline text-->
+    <text
+        class={[textClassName, styleClass]}
+        dominant-baseline={LINE_ANCHOR[lineAnchor]}
+        transform="translate({Math.round(x + dx)},{Math.round(y + dy)})"
+        {style}
+        >{textLines[0]}{#if title}<title>{title}</title>{/if}</text>
+{/if}
+
+<style>
+    text {
+        paint-order: stroke fill;
+    }
+</style>
diff --git a/src/routes/examples/text/css-var.svelte b/src/routes/examples/text/css-var.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" module>
+    export const sortKey = 99;
+    export const title = 'CSS variable font size';
+    export const description =
+        'The font size and line height are being used to position multiline text in SVG. You can also use CSS variables to set the font size (currently only in <tt>px</tt> and <tt>rem</tt>).';
+</script>
+
+<script lang="ts">
+    import { Plot, Text } from 'svelteplot';
+    import Frame from 'svelteplot/marks/Frame.svelte';
+</script>
+
+<Plot axes={false}>
+    <Frame borderRadius={20} strokeOpacity={0.25} />
+    <Text
+        fontSize="var(--my-font-size)"
+        fill="var(--svp-accent)"
+        fontWeight="bold"
+        text={`SveltePlot\nis great`} />
+</Plot>
+
+<style>
+    :root {
+        --my-font-size: 3rem;
+        @media screen and (max-width: 600px) {
+            --my-font-size: 27px;
+        }
+    }
+</style>
diff --git a/src/routes/marks/text/+page.md b/src/routes/marks/text/+page.md
@@ -118,16 +118,19 @@ Useful for showing text labels. The text mark is using SVG `<text>` elements, so
 
 ## Text options
 
-The following channels are required:
-
 - **text** - the text contents (a string, possibly with multiple lines)
+
+You can position text either using [frameAnchor](#frame-anchor) or using _x_ and _y_ channels.
+
 - **x** - the horizontal position; bound to the _x_ scale
 - **y** - the vertical position; bound to the _y_ scale
+- **frameAnchor** - if no x or y is given, the text can be positioned relative to the plot frame - `bottom`, `top`, `left`, `right`, `top-left`, `bottom-left`, `top-right`, `bottom-right`
+
 - **dx** - horizontal offset in px
 - **dy** - vertical offset in px
 - **textAnchor** - `start`, `end`, or `middle`
 - **lineAnchor** - `top`, `bottom` or `middle`
-- **frameAnchor** - if no x or y is given, the text can be positioned relative to the plot frame - `bottom`, `top`, `left`, `right`, `top-left`, `bottom-left`, `top-right`, `bottom-right`
+- **lineHeight** - expressed as factor of font size, default 1.1
 - **class** - CSS class name to applied to the `<g>` around all texts
 - **textClass** - CSS class to be applied to each `<text>` element, can be a function of data
 

diff --git a/static/examples/arrow/metro.dark.png b/static/examples/arrow/metro.dark.png
diff --git a/static/examples/arrow/metro.png b/static/examples/arrow/metro.png
diff --git a/static/examples/axis/datawrapper-ticks.dark.png b/static/examples/axis/datawrapper-ticks.dark.png
diff --git a/static/examples/axis/datawrapper-ticks.png b/static/examples/axis/datawrapper-ticks.png
diff --git a/static/examples/axis/major-minor.dark.png b/static/examples/axis/major-minor.dark.png
diff --git a/static/examples/axis/major-minor.png b/static/examples/axis/major-minor.png
diff --git a/static/examples/axis/tick-count.dark.png b/static/examples/axis/tick-count.dark.png
diff --git a/static/examples/axis/tick-count.png b/static/examples/axis/tick-count.png
diff --git a/static/examples/axis/tick-interval.dark.png b/static/examples/axis/tick-interval.dark.png
diff --git a/static/examples/axis/tick-interval.png b/static/examples/axis/tick-interval.png
diff --git a/static/examples/axis/tick-spacing.dark.png b/static/examples/axis/tick-spacing.dark.png
diff --git a/static/examples/axis/tick-spacing.png b/static/examples/axis/tick-spacing.png
diff --git a/static/examples/bar/defaults.dark.png b/static/examples/bar/defaults.dark.png
diff --git a/static/examples/bar/defaults.png b/static/examples/bar/defaults.png
diff --git a/static/examples/bar/linked-bars.dark.png b/static/examples/bar/linked-bars.dark.png
diff --git a/static/examples/bar/linked-bars.png b/static/examples/bar/linked-bars.png
diff --git a/static/examples/bar/shuffled-bars.dark.png b/static/examples/bar/shuffled-bars.dark.png
diff --git a/static/examples/bar/shuffled-bars.png b/static/examples/bar/shuffled-bars.png
diff --git a/static/examples/brush/constrained.dark.png b/static/examples/brush/constrained.dark.png
diff --git a/static/examples/brush/constrained.png b/static/examples/brush/constrained.png
diff --git a/static/examples/brush/filter.dark.png b/static/examples/brush/filter.dark.png
diff --git a/static/examples/brush/filter.png b/static/examples/brush/filter.png
diff --git a/static/examples/brush/overview-detail.dark.png b/static/examples/brush/overview-detail.dark.png
diff --git a/static/examples/brush/overview-detail.png b/static/examples/brush/overview-detail.png
diff --git a/static/examples/brush/zoomable-scatter.dark.png b/static/examples/brush/zoomable-scatter.dark.png
diff --git a/static/examples/brush/zoomable-scatter.png b/static/examples/brush/zoomable-scatter.png
diff --git a/static/examples/dot/0-scatterplot.dark.png b/static/examples/dot/0-scatterplot.dark.png
diff --git a/static/examples/dot/0-scatterplot.png b/static/examples/dot/0-scatterplot.png
diff --git a/static/examples/dot/1-colored-scatterplot.dark.png b/static/examples/dot/1-colored-scatterplot.dark.png
diff --git a/static/examples/dot/1-colored-scatterplot.png b/static/examples/dot/1-colored-scatterplot.png
diff --git a/static/examples/dot/2-symbol-channel.dark.png b/static/examples/dot/2-symbol-channel.dark.png
diff --git a/static/examples/dot/2-symbol-channel.png b/static/examples/dot/2-symbol-channel.png
diff --git a/static/examples/dot/3-dot-plot.dark.png b/static/examples/dot/3-dot-plot.dark.png
diff --git a/static/examples/dot/3-dot-plot.png b/static/examples/dot/3-dot-plot.png
diff --git a/static/examples/dot/bubble-matrix.dark.png b/static/examples/dot/bubble-matrix.dark.png
diff --git a/static/examples/dot/bubble-matrix.png b/static/examples/dot/bubble-matrix.png
diff --git a/static/examples/geo/custom-proj.dark.png b/static/examples/geo/custom-proj.dark.png
diff --git a/static/examples/geo/custom-proj.png b/static/examples/geo/custom-proj.png
diff --git a/static/examples/geo/earthquakes.dark.png b/static/examples/geo/earthquakes.dark.png
diff --git a/static/examples/geo/earthquakes.png b/static/examples/geo/earthquakes.png
diff --git a/static/examples/geo/inset-aspect.dark.png b/static/examples/geo/inset-aspect.dark.png
diff --git a/static/examples/geo/inset-aspect.png b/static/examples/geo/inset-aspect.png
diff --git a/static/examples/geo/us-choropleth-canvas.dark.png b/static/examples/geo/us-choropleth-canvas.dark.png
diff --git a/static/examples/geo/us-choropleth-canvas.png b/static/examples/geo/us-choropleth-canvas.png
diff --git a/static/examples/geo/us-choropleth.dark.png b/static/examples/geo/us-choropleth.dark.png
diff --git a/static/examples/geo/us-choropleth.png b/static/examples/geo/us-choropleth.png
diff --git a/static/examples/grid/clipped-gridlines.dark.png b/static/examples/grid/clipped-gridlines.dark.png
diff --git a/static/examples/grid/clipped-gridlines.png b/static/examples/grid/clipped-gridlines.png
diff --git a/static/examples/line/apple-stock.dark.png b/static/examples/line/apple-stock.dark.png
diff --git a/static/examples/line/apple-stock.png b/static/examples/line/apple-stock.png
diff --git a/static/examples/line/geo-line.dark.png b/static/examples/line/geo-line.dark.png
diff --git a/static/examples/line/geo-line.png b/static/examples/line/geo-line.png
diff --git a/static/examples/line/gradient-line.dark.png b/static/examples/line/gradient-line.dark.png
diff --git a/static/examples/line/gradient-line.png b/static/examples/line/gradient-line.png
diff --git a/static/examples/line/line-grouping.dark.png b/static/examples/line/line-grouping.dark.png
diff --git a/static/examples/line/line-grouping.png b/static/examples/line/line-grouping.png
diff --git a/static/examples/line/tour-de-france.dark.png b/static/examples/line/tour-de-france.dark.png
diff --git a/static/examples/line/tour-de-france.png b/static/examples/line/tour-de-france.png
diff --git a/static/examples/regression/cars.dark.png b/static/examples/regression/cars.dark.png
diff --git a/static/examples/regression/cars.png b/static/examples/regression/cars.png
diff --git a/static/examples/regression/faceted.dark.png b/static/examples/regression/faceted.dark.png
diff --git a/static/examples/regression/faceted.png b/static/examples/regression/faceted.png
diff --git a/static/examples/regression/grouped.dark.png b/static/examples/regression/grouped.dark.png
diff --git a/static/examples/regression/grouped.png b/static/examples/regression/grouped.png
diff --git a/static/examples/regression/loess.dark.png b/static/examples/regression/loess.dark.png
diff --git a/static/examples/regression/loess.png b/static/examples/regression/loess.png
diff --git a/static/examples/regression/log.dark.png b/static/examples/regression/log.dark.png
diff --git a/static/examples/regression/log.png b/static/examples/regression/log.png
diff --git a/static/examples/text/css-var.dark.png b/static/examples/text/css-var.dark.png
diff --git a/static/examples/text/css-var.png b/static/examples/text/css-var.png
diff --git a/static/examples/text/frame-anchor.dark.png b/static/examples/text/frame-anchor.dark.png
diff --git a/static/examples/text/frame-anchor.png b/static/examples/text/frame-anchor.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,7 @@ export function resolveProp<T>( @@
         ) {
             return datum[accessor] as T;
         }
         return isRawValue(accessor) ? accessor : _defaultValue;
     }
@@ Expand Down @@