@voila.dev/chart 4.0.0

package/src/core/scales/color.ts

@@ -0,0 +1,51 @@
+import { toNumber } from "#/core/scales/continuous.ts";
+import { categoryKey } from "#/core/scales/discrete.ts";
+import type { ChartColorScale, ChartValue } from "#/core/types.ts";
+
+/**
+ * Colours stay CSS strings all the way to the renderer (`var(--chart-2)`,
+ * `color-mix(…)`): SVG resolves them itself, and the Canvas renderer resolves
+ * them against the page, so a theme switch needs no recompute.
+ */
+
+/** One palette colour per category, cycling when there are more categories than colours. */
+export function ordinalColorScale(
+	domain: ReadonlyArray<ChartValue>,
+	palette: ReadonlyArray<string>,
+): ChartColorScale {
+	const indexByKey = new Map<string, number>();
+	for (const value of domain) {
+		const key = categoryKey(value);
+		if (!indexByKey.has(key)) {
+			indexByKey.set(key, indexByKey.size);
+		}
+	}
+	return {
+		kind: "ordinal",
+		domain,
+		map: (value) =>
+			palette[(indexByKey.get(categoryKey(value)) ?? 0) % palette.length],
+	};
+}
+
+const PERCENT_PRECISION = 10;
+
+/** A ramp between two colours, mixed by the browser in OKLab so the steps look even. */
+export function sequentialColorScale(
+	domain: readonly [number, number],
+	[from, to]: readonly [string, string],
+): ChartColorScale {
+	const [low, high] = domain;
+	const span = high - low;
+	return {
+		kind: "sequential",
+		domain,
+		map: (value) => {
+			const share = span === 0 ? 1 : (toNumber(value) - low) / span;
+			const percent =
+				Math.round(Math.min(1, Math.max(0, share)) * 100 * PERCENT_PRECISION) /
+				PERCENT_PRECISION;
+			return `color-mix(in oklab, ${to} ${percent}%, ${from})`;
+		},
+	};
+}

package/src/core/scales/continuous.ts

@@ -0,0 +1,111 @@
+import { formatCompactNumber, formatTickValue } from "#/core/format.ts";
+import { niceTicks } from "#/core/ticks.ts";
+import type { ChartPositionScale, ChartValue } from "#/core/types.ts";
+
+export interface ContinuousScaleOptions {
+	readonly domain: readonly [number, number];
+	readonly range: readonly [number, number];
+	readonly locale: string;
+	/** How many ticks the axis has room for. */
+	readonly tickCount: number;
+}
+
+export function toNumber(value: ChartValue): number {
+	if (value instanceof Date) {
+		return value.getTime();
+	}
+	return typeof value === "number" ? value : Number(value);
+}
+
+function interpolator(
+	[domainStart, domainEnd]: readonly [number, number],
+	[rangeStart, rangeEnd]: readonly [number, number],
+) {
+	const domainSpan = domainEnd - domainStart;
+	const rangeSpan = rangeEnd - rangeStart;
+	return {
+		// A zero-width domain collapses to the middle of the range: a flat series
+		// draws a centred line instead of dividing by zero.
+		forward: (value: number) =>
+			domainSpan === 0
+				? rangeStart + rangeSpan / 2
+				: rangeStart + ((value - domainStart) / domainSpan) * rangeSpan,
+		backward: (pixel: number) =>
+			rangeSpan === 0
+				? domainStart
+				: domainStart + ((pixel - rangeStart) / rangeSpan) * domainSpan,
+	};
+}
+
+/** Numbers in, pixels out, linearly. */
+export function linearScale(
+	options: ContinuousScaleOptions,
+): ChartPositionScale {
+	const { domain, range, locale, tickCount } = options;
+	const { forward, backward } = interpolator(domain, range);
+	const map = (value: ChartValue) => forward(toNumber(value));
+	return {
+		kind: "linear",
+		domain,
+		range,
+		bandwidth: 0,
+		map,
+		center: map,
+		invert: backward,
+		ticks: (count = tickCount) =>
+			niceTicks(
+				Math.min(domain[0], domain[1]),
+				Math.max(domain[0], domain[1]),
+				count,
+			),
+		format: (value) => formatTickValue(toNumber(value), locale),
+	};
+}
+
+/**
+ * Orders of magnitude, for data that spans several of them. Values at or
+ * below zero have no logarithm: they are clamped onto the bottom of the scale
+ * rather than drawn at minus infinity.
+ */
+export function logScale(options: ContinuousScaleOptions): ChartPositionScale {
+	const { range, locale, tickCount } = options;
+	const low = Math.max(Number.MIN_VALUE, Math.min(...options.domain));
+	const high = Math.max(low, ...options.domain);
+	const logDomain: readonly [number, number] = [
+		Math.log10(low),
+		Math.log10(high),
+	];
+	const { forward, backward } = interpolator(logDomain, range);
+	const map = (value: ChartValue) =>
+		forward(Math.log10(Math.max(low, toNumber(value))));
+
+	function ticks(count = tickCount): ReadonlyArray<number> {
+		const first = Math.floor(logDomain[0]);
+		const last = Math.ceil(logDomain[1]);
+		const decades = last - first;
+		// Few decades leave room for 2 and 5 between the powers of ten.
+		const multiples = decades * 3 <= count ? [1, 2, 5] : [1];
+		const values: number[] = [];
+		for (let power = first; power <= last; power += 1) {
+			for (const multiple of multiples) {
+				const value = multiple * 10 ** power;
+				if (value >= low && value <= high) {
+					values.push(value);
+				}
+			}
+		}
+		return values;
+	}
+
+	return {
+		kind: "log",
+		domain: [low, high],
+		range,
+		bandwidth: 0,
+		map,
+		center: map,
+		invert: (pixel) => 10 ** backward(pixel),
+		ticks,
+		format: (value) => formatCompactNumber(toNumber(value), locale),
+	};
+}

package/src/core/scales/discrete.ts

@@ -0,0 +1,156 @@
+import { dateFormat, formatDate } from "#/core/format.ts";
+import type { ChartPositionScale, ChartValue } from "#/core/types.ts";
+
+/**
+ * Categories in, slots out. `band` gives each category a slot of `bandwidth`
+ * pixels (what bars sit on), `point` a position with no width (what lines sit
+ * on, first and last touching the plot edges).
+ */
+
+export interface DiscreteScaleOptions {
+	readonly domain: ReadonlyArray<ChartValue>;
+	readonly range: readonly [number, number];
+	readonly locale: string;
+	/** Share of a step left empty between two bands. 0 = touching bars. */
+	readonly paddingInner?: number;
+	/** Share of a step left empty before the first and after the last slot. */
+	readonly paddingOuter?: number;
+}
+
+const DEFAULT_BAND_PADDING_INNER = 0.2;
+const DEFAULT_BAND_PADDING_OUTER = 0.1;
+
+/** A category's identity: two equal dates are one category. */
+export function categoryKey(value: ChartValue): string {
+	return value instanceof Date ? `${value.getTime()}` : String(value);
+}
+
+/** A category as a label. A year stays "2026", never "2 026". */
+export function formatCategory(value: ChartValue, locale: string): string {
+	return value instanceof Date ? formatDate(value, locale) : String(value);
+}
+
+/**
+ * Labels for a row of date categories, as short as the dates allow: years
+ * when every date is a New Year, months when every date is a first of the
+ * month (with the year where it turns), days when every date is a midnight.
+ */
+function dateCategoryFormatter(
+	domain: ReadonlyArray<ChartValue>,
+	locale: string,
+): ((value: ChartValue) => string) | undefined {
+	const dates = domain.filter((value): value is Date => value instanceof Date);
+	if (dates.length === 0 || dates.length !== domain.length) {
+		return undefined;
+	}
+	const midnight = dates.every((date) => date.getTime() % 86_400_000 === 0);
+	const firstOfMonth =
+		midnight && dates.every((date) => date.getUTCDate() === 1);
+	const newYear =
+		firstOfMonth && dates.every((date) => date.getUTCMonth() === 0);
+	if (newYear) {
+		const year = dateFormat(locale, { year: "numeric" });
+		return (value) => year.format(value as Date);
+	}
+	if (firstOfMonth) {
+		const month = dateFormat(locale, { month: "short" });
+		const monthYear = dateFormat(locale, { month: "short", year: "numeric" });
+		const first = dates[0].getTime();
+		return (value) => {
+			const date = value as Date;
+			return date.getUTCMonth() === 0 || date.getTime() === first
+				? monthYear.format(date)
+				: month.format(date);
+		};
+	}
+	if (midnight) {
+		const day = dateFormat(locale, { day: "numeric", month: "short" });
+		return (value) => day.format(value as Date);
+	}
+	return undefined;
+}
+
+function clamp(value: number, low: number, high: number): number {
+	return Math.min(Math.max(value, low), high);
+}
+
+function indexer(domain: ReadonlyArray<ChartValue>) {
+	const indexByKey = new Map<string, number>();
+	for (const [index, value] of domain.entries()) {
+		const key = categoryKey(value);
+		if (!indexByKey.has(key)) {
+			indexByKey.set(key, index);
+		}
+	}
+	return (value: ChartValue) => indexByKey.get(categoryKey(value)) ?? 0;
+}
+
+export function bandScale(options: DiscreteScaleOptions): ChartPositionScale {
+	const {
+		domain,
+		range,
+		locale,
+		paddingInner = DEFAULT_BAND_PADDING_INNER,
+		paddingOuter = DEFAULT_BAND_PADDING_OUTER,
+	} = options;
+	const [start, end] = range;
+	const count = domain.length;
+	const step =
+		(end - start) / Math.max(1, count - paddingInner + paddingOuter * 2);
+	const bandwidth = Math.abs(step * (1 - paddingInner));
+	const origin = start + step * paddingOuter;
+	const indexOf = indexer(domain);
+	// A reversed range (a y band running top to bottom is not, but a flipped
+	// one is) still opens each band towards larger pixels.
+	const map = (value: ChartValue) =>
+		origin + step * indexOf(value) - (step < 0 ? bandwidth : 0);
+
+	return {
+		kind: "band",
+		domain,
+		range,
+		bandwidth,
+		map,
+		center: (value) => map(value) + bandwidth / 2,
+		invert: (pixel) =>
+			domain[
+				count === 0
+					? 0
+					: clamp(Math.floor((pixel - origin) / step), 0, count - 1)
+			],
+		ticks: () => domain,
+		format:
+			dateCategoryFormatter(domain, locale) ??
+			((value) => formatCategory(value, locale)),
+	};
+}
+
+export function pointScale(options: DiscreteScaleOptions): ChartPositionScale {
+	const { domain, range, locale, paddingOuter = 0 } = options;
+	const [start, end] = range;
+	const count = domain.length;
+	const step = (end - start) / Math.max(1, count - 1 + paddingOuter * 2);
+	const origin = start + step * paddingOuter;
+	const indexOf = indexer(domain);
+	const map = (value: ChartValue) =>
+		count <= 1 ? start + (end - start) / 2 : origin + step * indexOf(value);
+
+	return {
+		kind: "point",
+		domain,
+		range,
+		bandwidth: 0,
+		map,
+		center: map,
+		invert: (pixel) =>
+			domain[
+				count === 0
+					? 0
+					: clamp(Math.round((pixel - origin) / step), 0, count - 1)
+			],
+		ticks: () => domain,
+		format:
+			dateCategoryFormatter(domain, locale) ??
+			((value) => formatCategory(value, locale)),
+	};
+}

package/src/core/scales/resolve.ts

@@ -0,0 +1,158 @@
+import type { ChartPositionScaleOptions } from "#/core/define-chart.ts";
+import { linearScale, logScale, toNumber } from "#/core/scales/continuous.ts";
+import { bandScale, categoryKey, pointScale } from "#/core/scales/discrete.ts";
+import { timeScale } from "#/core/scales/time.ts";
+import { niceDomain } from "#/core/ticks.ts";
+import type {
+	ChartChannel,
+	ChartPositionScale,
+	ChartPositionScaleKind,
+	ChartValue,
+} from "#/core/types.ts";
+
+/**
+ * What a scale will be once the plot size is known: its kind and its domain,
+ * read off every channel the marks put on it. Split from the range so the
+ * axes can measure their tick labels before the plot rectangle exists.
+ */
+export interface ScalePlan {
+	readonly kind: ChartPositionScaleKind;
+	readonly domain: ReadonlyArray<ChartValue>;
+	readonly label: string | undefined;
+	/** The band padding a mark asked for, when the options name none. */
+	readonly padding?: number;
+	readonly paddingOuter?: number;
+}
+
+function inferKind(
+	channels: ReadonlyArray<ChartChannel>,
+	values: ReadonlyArray<ChartValue>,
+): ChartPositionScaleKind {
+	if (channels.some((channel) => channel.discrete === "band")) {
+		return "band";
+	}
+	const askedPoint = channels.some((channel) => channel.discrete === "point");
+	if (values.length > 0 && values.every((value) => value instanceof Date)) {
+		return askedPoint ? "point" : "time";
+	}
+	if (values.length > 0 && values.every((value) => typeof value === "number")) {
+		return askedPoint ? "point" : "linear";
+	}
+	return "point";
+}
+
+function distinct(
+	values: ReadonlyArray<ChartValue>,
+): ReadonlyArray<ChartValue> {
+	const seen = new Set<string>();
+	const kept: ChartValue[] = [];
+	for (const value of values) {
+		const key = categoryKey(value);
+		if (!seen.has(key)) {
+			seen.add(key);
+			kept.push(value);
+		}
+	}
+	return kept;
+}
+
+function continuousDomain(
+	values: ReadonlyArray<ChartValue>,
+	options: { readonly zero: boolean; readonly nice: boolean },
+	kind: ChartPositionScaleKind,
+): readonly [number, number] {
+	let low = Number.POSITIVE_INFINITY;
+	let high = Number.NEGATIVE_INFINITY;
+	for (const value of values) {
+		const number = toNumber(value);
+		if (Number.isFinite(number)) {
+			low = Math.min(low, number);
+			high = Math.max(high, number);
+		}
+	}
+	if (!Number.isFinite(low)) {
+		return [0, 1];
+	}
+	if (options.zero && kind === "linear") {
+		low = Math.min(low, 0);
+		high = Math.max(high, 0);
+	}
+	if (options.nice && kind === "linear") {
+		return niceDomain(low, high);
+	}
+	return [low, high];
+}
+
+export function planScale(
+	channels: ReadonlyArray<ChartChannel>,
+	options: ChartPositionScaleOptions | undefined,
+	axis: "x" | "y",
+): ScalePlan | undefined {
+	if (channels.length === 0) {
+		return undefined;
+	}
+	const values = channels.flatMap((channel) => channel.values);
+	const kind = options?.type ?? inferKind(channels, values);
+	const label =
+		options?.label ?? channels.find((channel) => channel.label)?.label;
+	if (kind === "band" || kind === "point") {
+		const padding = channels.find(
+			(channel) => channel.padding !== undefined,
+		)?.padding;
+		const paddingOuter = channels.find(
+			(channel) => channel.paddingOuter !== undefined,
+		)?.paddingOuter;
+		return {
+			kind,
+			domain: options?.domain ?? distinct(values),
+			label,
+			padding,
+			paddingOuter: paddingOuter ?? padding,
+		};
+	}
+	if (options?.domain !== undefined) {
+		return { kind, domain: options.domain.map(toNumber), label };
+	}
+	const zero =
+		options?.zero ?? channels.some((channel) => channel.includeZero === true);
+	// A value axis (y, or the x of horizontal bars) reads best on round
+	// numbers; a position axis (the x of a scatter) on the data's own extent.
+	const nice = options?.nice ?? (axis === "y" || zero);
+	return {
+		kind,
+		domain: continuousDomain(values, { zero, nice }, kind),
+		label,
+	};
+}
+
+export function buildScale(
+	plan: ScalePlan,
+	options: ChartPositionScaleOptions | undefined,
+	range: readonly [number, number],
+	locale: string,
+	tickCount: number,
+): ChartPositionScale {
+	const ordered: readonly [number, number] = options?.reverse
+		? [range[1], range[0]]
+		: range;
+	if (plan.kind === "band" || plan.kind === "point") {
+		const discrete = {
+			domain: plan.domain,
+			range: ordered,
+			locale,
+			paddingInner: options?.paddingInner ?? plan.padding,
+			paddingOuter: options?.paddingOuter ?? plan.paddingOuter,
+		};
+		return plan.kind === "band" ? bandScale(discrete) : pointScale(discrete);
+	}
+	const continuous = {
+		domain: [toNumber(plan.domain[0]), toNumber(plan.domain[1])] as const,
+		range: ordered,
+		locale,
+		tickCount,
+	};
+	if (plan.kind === "time") {
+		return timeScale(continuous);
+	}
+	return plan.kind === "log" ? logScale(continuous) : linearScale(continuous);
+}

package/src/core/scales/time.ts

@@ -0,0 +1,180 @@
+import { dateFormat } from "#/core/format.ts";
+import {
+	type ContinuousScaleOptions,
+	linearScale,
+	toNumber,
+} from "#/core/scales/continuous.ts";
+import { niceTicks } from "#/core/ticks.ts";
+import type { ChartPositionScale, ChartValue } from "#/core/types.ts";
+
+/**
+ * Dates in, pixels out. Ticks land on calendar boundaries (midnight, the first
+ * of the month, New Year) rather than on round millisecond counts, and their
+ * labels only say what changes between two ticks.
+ *
+ * Everything is UTC. Chart data is mostly day or month buckets written as
+ * `2026-03-01`, which JavaScript parses as UTC midnight: reading them in the
+ * viewer's zone would push every bucket onto the previous day west of
+ * Greenwich.
+ */
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+
+type Unit = "second" | "minute" | "hour" | "day" | "week" | "month" | "year";
+
+interface TimeInterval {
+	readonly unit: Unit;
+	readonly step: number;
+	/** Approximate length, only to pick the interval closest to the tick count. */
+	readonly duration: number;
+}
+
+const INTERVALS: ReadonlyArray<TimeInterval> = [
+	{ unit: "second", step: 1, duration: SECOND },
+	{ unit: "second", step: 5, duration: 5 * SECOND },
+	{ unit: "second", step: 15, duration: 15 * SECOND },
+	{ unit: "second", step: 30, duration: 30 * SECOND },
+	{ unit: "minute", step: 1, duration: MINUTE },
+	{ unit: "minute", step: 5, duration: 5 * MINUTE },
+	{ unit: "minute", step: 15, duration: 15 * MINUTE },
+	{ unit: "minute", step: 30, duration: 30 * MINUTE },
+	{ unit: "hour", step: 1, duration: HOUR },
+	{ unit: "hour", step: 3, duration: 3 * HOUR },
+	{ unit: "hour", step: 6, duration: 6 * HOUR },
+	{ unit: "hour", step: 12, duration: 12 * HOUR },
+	{ unit: "day", step: 1, duration: DAY },
+	{ unit: "day", step: 2, duration: 2 * DAY },
+	{ unit: "week", step: 1, duration: WEEK },
+	{ unit: "month", step: 1, duration: MONTH },
+	{ unit: "month", step: 3, duration: 3 * MONTH },
+	{ unit: "month", step: 6, duration: 6 * MONTH },
+	{ unit: "year", step: 1, duration: YEAR },
+];
+
+const UNIT_MS: Record<"second" | "minute" | "hour" | "day", number> = {
+	second: SECOND,
+	minute: MINUTE,
+	hour: HOUR,
+	day: DAY,
+};
+
+function chooseInterval(span: number, count: number): TimeInterval {
+	const target = span / Math.max(1, count);
+	let best = INTERVALS[0];
+	for (const interval of INTERVALS) {
+		if (
+			Math.abs(Math.log(interval.duration / target)) <
+			Math.abs(Math.log(best.duration / target))
+		) {
+			best = interval;
+		}
+	}
+	return best;
+}
+
+function monthTicks(start: number, end: number, step: number): number[] {
+	const from = new Date(start);
+	const year = from.getUTCFullYear();
+	let month = from.getUTCMonth();
+	month = Math.ceil(month / step) * step;
+	const ticks: number[] = [];
+	for (;;) {
+		const time = Date.UTC(year + Math.floor(month / 12), month % 12, 1);
+		if (time > end) {
+			return ticks;
+		}
+		if (time >= start) {
+			ticks.push(time);
+		}
+		month += step;
+	}
+}
+
+function intervalTicks(
+	start: number,
+	end: number,
+	interval: TimeInterval,
+): number[] {
+	const { unit, step } = interval;
+	if (unit === "year") {
+		const years = niceTicks(
+			new Date(start).getUTCFullYear(),
+			new Date(end).getUTCFullYear(),
+			Math.max(1, Math.round((end - start) / YEAR)),
+		).filter(Number.isInteger);
+		return years
+			.map((year) => Date.UTC(year, 0, 1))
+			.filter((time) => time >= start && time <= end);
+	}
+	if (unit === "month") {
+		return monthTicks(start, end, step);
+	}
+	if (unit === "week") {
+		// Weeks start on Monday: 1970-01-05 was one.
+		const monday = Date.UTC(1970, 0, 5);
+		const first = monday + Math.ceil((start - monday) / WEEK) * WEEK;
+		const ticks: number[] = [];
+		for (let time = first; time <= end; time += WEEK) {
+			ticks.push(time);
+		}
+		return ticks;
+	}
+	const size = UNIT_MS[unit] * step;
+	const ticks: number[] = [];
+	for (let time = Math.ceil(start / size) * size; time <= end; time += size) {
+		ticks.push(time);
+	}
+	return ticks;
+}
+
+function tickLabel(time: number, unit: Unit, locale: string): string {
+	const date = new Date(time);
+	if (unit === "year") {
+		return dateFormat(locale, { year: "numeric" }).format(date);
+	}
+	if (unit === "month") {
+		// The year only where it turns, so a row of months stays short.
+		return date.getUTCMonth() === 0
+			? dateFormat(locale, { month: "short", year: "numeric" }).format(date)
+			: dateFormat(locale, { month: "short" }).format(date);
+	}
+	if (unit === "day" || unit === "week") {
+		return dateFormat(locale, { day: "numeric", month: "short" }).format(date);
+	}
+	if (unit === "second") {
+		return dateFormat(locale, {
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit",
+		}).format(date);
+	}
+	return dateFormat(locale, { hour: "2-digit", minute: "2-digit" }).format(
+		date,
+	);
+}
+
+export function timeScale(options: ContinuousScaleOptions): ChartPositionScale {
+	const { domain, locale, tickCount } = options;
+	const linear = linearScale(options);
+	const [start, end] = [Math.min(...domain), Math.max(...domain)];
+	let unit = chooseInterval(end - start, tickCount).unit;
+
+	return {
+		...linear,
+		kind: "time",
+		domain: [new Date(domain[0]), new Date(domain[1])],
+		invert: (pixel) => new Date(toNumber(linear.invert(pixel))),
+		ticks: (count = tickCount) => {
+			const interval = chooseInterval(end - start, count);
+			unit = interval.unit;
+			return intervalTicks(start, end, interval).map((time) => new Date(time));
+		},
+		format: (value: ChartValue) => tickLabel(toNumber(value), unit, locale),
+	};
+}

package/src/core/text.ts

@@ -0,0 +1,42 @@
+import type { ChartTextMeasurer } from "#/core/types.ts";
+
+/**
+ * Text width without a browser. The server and the first client render both
+ * lay out with this estimate, so the hydrated markup matches; the browser
+ * swaps in real metrics right after.
+ *
+ * Widths are in ems for a typical UI sans-serif: narrow letters, wide
+ * letters, digits (tabular in most UI fonts) and everything else.
+ */
+const NARROW = /[ijlt.,:;'!|()[\]\s]/;
+const WIDE = /[mwMW@%]/;
+const DIGIT = /[0-9]/;
+const UPPER = /[A-Z]/;
+
+const EM_NARROW = 0.3;
+const EM_WIDE = 0.85;
+const EM_DIGIT = 0.58;
+const EM_UPPER = 0.66;
+const EM_OTHER = 0.54;
+const BOLD_FACTOR = 1.06;
+const BOLD_WEIGHT = 600;
+
+function emWidth(character: string): number {
+	if (NARROW.test(character)) return EM_NARROW;
+	if (WIDE.test(character)) return EM_WIDE;
+	if (DIGIT.test(character)) return EM_DIGIT;
+	if (UPPER.test(character)) return EM_UPPER;
+	return EM_OTHER;
+}
+
+export const estimateTextWidth: ChartTextMeasurer = (
+	text,
+	fontSize,
+	fontWeight = 400,
+) => {
+	let ems = 0;
+	for (const character of text) {
+		ems += emWidth(character);
+	}
+	return ems * fontSize * (fontWeight >= BOLD_WEIGHT ? BOLD_FACTOR : 1);
+};