feat(troika-three-text): include capHeight and xHeight font metrics i…

…n textRenderInfo
protectwise · Mar 14, 2022 · 3459fd5 · 3459fd5
1 parent c278118
commit 3459fd5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/troika-three-text/src/FontParser.js b/packages/troika-three-text/src/FontParser.js
@@ -160,6 +160,8 @@ function parserFactory(Typr, woff2otf) {
       unitsPerEm,
       ascender,
       descender: firstNum(os2 && os2.sTypoDescender, hhea && hhea.descender, 0),
+      capHeight: firstNum(os2 && os2.sCapHeight, ascender),
+      xHeight: firstNum(os2 && os2.sxHeight, ascender),
       lineGap: firstNum(os2 && os2.sTypoLineGap, hhea && hhea.lineGap),
       forEachGlyph(text, fontSize, letterSpacing, callback) {
         let glyphX = 0

diff --git a/packages/troika-three-text/src/TextBuilder.js b/packages/troika-three-text/src/TextBuilder.js
@@ -85,6 +85,8 @@ const atlases = Object.create(null)
  * @property {number} [caretHeight] - An appropriate height for all selection carets.
  * @property {number} ascender - The font's ascender metric.
  * @property {number} descender - The font's descender metric.
+ * @property {number} capHeight - The font's cap height metric, based on the height of Latin capital letters.
+ * @property {number} xHeight - The font's x height metric, based on the height of Latin lowercase letters.
  * @property {number} lineHeight - The final computed lineHeight measurement.
  * @property {number} topBaseline - The y position of the top line's baseline.
  * @property {Array<number>} blockBounds - The total [minX, minY, maxX, maxY] rect of the whole text block;
@@ -267,6 +269,8 @@ function getTextRenderInfo(args, callback) {
         ascender: result.ascender,
         descender: result.descender,
         lineHeight: result.lineHeight,
+        capHeight: result.capHeight,
+        xHeight: result.xHeight,
         topBaseline: result.topBaseline,
         blockBounds: result.blockBounds,
         visibleBounds: result.visibleBounds,

diff --git a/packages/troika-three-text/src/Typesetter.js b/packages/troika-three-text/src/Typesetter.js
@@ -11,6 +11,8 @@
  *     unitsPerEm: number,
  *     ascender: number,
  *     descender: number,
+ *     capHeight: number,
+ *     xHeight: number,
  *     lineGap: number,
  *     forEachGlyph(string, fontSize, letterSpacing, callback) {
  *       //invokes callback for each glyph to render, passing it an object:
@@ -170,7 +172,7 @@ export function createTypesetter(fontParser, bidi, config) {
       let maxLineWidth = 0
       let renderableGlyphCount = 0
       let canWrap = whiteSpace !== 'nowrap'
-      const {ascender, descender, unitsPerEm, lineGap} = fontObj
+      const {ascender, descender, unitsPerEm, lineGap, capHeight, xHeight} = fontObj
       timings.fontLoad = now() - mainStart
       const typesetStart = now()
 
@@ -531,6 +533,8 @@ export function createTypesetter(fontParser, bidi, config) {
         unitsPerEm, //font units per em
         ascender: ascender * fontSizeMult, //font ascender
         descender: descender * fontSizeMult, //font descender
+        capHeight: capHeight * fontSizeMult, //font cap-height
+        xHeight: xHeight * fontSizeMult, //font x-height
         lineHeight, //computed line height
         topBaseline, //y coordinate of the top line's baseline
         blockBounds: [ //bounds for the whole block of text, including vertical padding for lineHeight