v144 · Canvas · demo

Font Inspector

Type any string, pick a font family and size, and the canvas overlays every metric line measureText() exposes: baseline, em box, actual glyph bounds, and ideographic baseline. The table below updates live with precise pixel values.

Enhanced TextMetrics support: checking…
64px
alphabetic baseline
em ascent / descent
actual bounding box top / bottom
actual bbox left / right
ideographic baseline
Some extended properties (fontBoundingBoxAscent, fontBoundingBoxDescent, actualBoundingBoxAscent) are not present in this browser. Showing available values only. Chrome 144 exposes the full set.
property description value (px)
render text to populate…

the API

const ctx = canvas.getContext('2d');
ctx.font = '64px serif';
const m = ctx.measureText('Typography');

// Classic (all browsers)
m.width                       // advance width

// Enhanced TextMetrics — Chrome 144+
m.actualBoundingBoxAscent     // glyph top above baseline
m.actualBoundingBoxDescent    // glyph bottom below baseline
m.actualBoundingBoxLeft       // glyph left of origin
m.actualBoundingBoxRight      // glyph right of origin
m.fontBoundingBoxAscent       // em box ascent (all glyphs in this font)
m.fontBoundingBoxDescent      // em box descent
m.alphabeticBaseline          // alphabetic baseline offset
m.ideographicBaseline         // ideographic baseline offset

how to read the overlay

Each coloured line represents a different coordinate the browser tracks. The black baseline is where the text origin sits — glyphs hang from here. The blue lines bound the full em box: every glyph in the chosen font fits inside them regardless of which characters are on screen. The green lines tighten to the actual ink of the rendered string — they move as you type. The red verticals show the left and right ink edges, which can exceed the reported width (the advance) when glyphs have italic overhang. The dashed purple line marks the ideographic baseline used by CJK glyphs.

see also