The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Sep 28, 2023
M = import("https://esm.sh/gh/observablehq/plot/src/marks/text.js")
mono = M.monospaceWidth
normal = M.defaultWidth
words = "normal text user would hope to match with widths and MAYBE A FEW ALL-CAPS WORDS numbers too such as 1 2 23 123 1346 4444 9999 0.00 11111 aaaabbbb"
ratio("What will you do about this?", "mono")
ratio("What will you do about this?")
viewof actualWidth = {
const div = htl.html`<a>…`;
div.value = function (text, type = "default") {
div.innerHTML = `<span class="${type}">${text}</span>`;
const { width } = div.getBoundingClientRect();
return width;
};
return div;
}
ratio("0123456789")
ratio("abcdefghijklmnopqrstuvwxyz")
ratio("abcdefghijklmnopqrstuvwxyz".toUpperCase())
9.6 / 15.15 // prosposal for monospace: a character's base length would be 63.
ratio = (text, type) =>
(type === "mono" ? mono : normal)(text) / actualWidth(text, type)
<style>
.default { font-size: 11px; font-family: sans-serif; }
.mono { font-size: 11px; font-family: monospace;}
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
