get-text-metrics
Introduction
Measuring text performantly in the browser isn't as straightforward as one would think—the recommended way is to leverage the Canvas API (and its measureText
method) instead of relying on the DOM directly. getTextMetrics
embraces this way into a single function and attempts to smooth out the differences between the DOM and the Canvas API.
When supported, getTextMetrics
will leverage an OffscreenCanvas from a Worker to measure in a background thread.
Installation
Skypack
<script type="module">
import { getTextMetrics } from "https://cdn.skypack.dev/get-text-metrics"
</script>
Yarn
yarn add get-text-metrics
npm
npm install get-text-metrics
Usage
Import getTextMetrics
.
import { getTextMetrics } from "get-text-metrics"
Invoke it asynchronously with a string and access its TextMetrics
in return.
const metrics = await getTextMetrics(
"With impressions chosen from another time."
)
// metrics: TextMetrics
Given an array of strings instead, getTextMetrics
will return an array of TextMetrics
.
const metrics = await getTextMetrics([
"With impressions chosen from another time.",
"Underneath a sky that's ever falling down."
])
// metrics: [TextMetrics, TextMetrics]
Font
A secondary argument can be set to specify a font appearance—from properties, a font
string, or a CSSStyleDeclaration
.
Properties
Specify individual font properties as an object with fontFamily
, fontSize
, fontStretch
, fontStyle
, fontVariant
, fontWeight
, and lineHeight
.
const metrics = await getTextMetrics("", {
fontFamily: "cursive",
fontSize: 16,
fontStyle: "italic",
fontWeight: 500,
fontVariant: "small-caps",
lineHeight: 2
})
string
Specify all font properties as a font
shorthand string.
const metrics = await getTextMetrics("", "italic small-caps 500 16px/2 cursive")
CSSStyleDeclaration
Specify a CSSStyleDeclaration
from which to extract font properties.
const paragraph = document.querySelector("p")
const metrics = await getTextMetrics("", window.getComputedStyle(paragraph))