Explore using pretext to measure text

[jasongrout]

In various places, we use the DOM to measure text like at

lumino/packages/datagrid/src/textrenderer.ts

Line 944 in d4b1494

export function measureFontHeight(font: string): number {

or we explicitly lay out text like at

lumino/packages/datagrid/src/textrenderer.ts

Lines 253 to 282 in d4b1494

	// Single word. Applying text wrap on word by splitting
	// it into characters and fitting the maximum number of
	// characters possible per line (box width).
	if (wordsInColumn.length === 0) {
	let curLineTextWidth = gc.measureText(textInCurrentLine).width;
	while (curLineTextWidth > boxWidth && textInCurrentLine !== '') {
	// Iterating from the end of the string until we find a
	// substring (0,i) which has a width less than the box width.
	for (let i = textInCurrentLine.length; i > 0; i--) {
	const curSubString = textInCurrentLine.substring(0, i);
	const curSubStringWidth = gc.measureText(curSubString).width;
	if (curSubStringWidth < boxWidth || curSubString.length === 1) {
	// Found a substring which has a width less than the current
	// box width. Rendering that substring on the current line
	// and setting the remainder of the parent string as the next
	// string to iterate on for the next line.
	const nextLineText = textInCurrentLine.substring(
	i,
	textInCurrentLine.length
	);
	textInCurrentLine = nextLineText;
	curLineTextWidth = gc.measureText(textInCurrentLine).width;
	gc.fillText(curSubString, textX, curY);
	curY += textHeight;
	// No need to continue iterating after we identified
	// an index to break the string on.
	break;
	}
	}
	}

Pretext (HN discussion) is a new library that measures and lays out text efficiently, so it may be faster or more accurate. This issue is to explore using pretext instead.