Skip to content
Dan Lemon edited this page May 2, 2018 · 2 revisions

Use Cases for Font Metrics APIs from a Math Polyfilling Perspective (Peter Krautzberger)

For polyfilling complex layout such as mathematical or chemical equations, the dimensions of glyph bounding boxes are necessary to calculate correct placement of, e.g., surds, multiscripts, reaction arrows etc. Most JavaScript libraries for math layout generate the relevant data for specific fonts during development and then have to load this data (along with webfonts if necessary).

An alternative approach (not used in math rendering) would be to use opentype.js to load webfonts and extract the font metrics data on the fly; this does not work with local fonts however.

Existing specs like canvas TextMetrics (seem to?) only provide font-wide bounding box information, not character specific information and would furthermore require the creation of canvas elements to get such data; cf. also fontmetrics.js based on opentype.js. Additionally, hacks using canvas rendering and pixel scanning can provide some (but not all) information, cf. here.

All of these approaches (pre-generated font data, opentype.js, canvas with pixel scanning) are not very efficient and have significant drawbacks. However, they demonstrate the need for a font metrics API that can provide access to lower level font information. Such an API would make the desired layout work easier and more performant; it would furthermore allow such tools to support arbitrary (web or local) fonts.