soulwire/fontmetrics

A lightweight JavaScript library for computing accurate font metrics such as x-height, cap height, ascent, descent and tittle for any loaded web font.

fontmetrics's Issues

Wrong bottom value or absent line-height metric

Take 48px Roboto font.

fontMetrics gives 74 pixels line-height (or top - bottom) value:

let fontMetrics = require('fontmetrics')
let m = fontMetrics({
  origin: 'top',
  fontFamily: 'Roboto',
  fontSize: 48
})
m.bottom * 48
// 74

That is seen in demo as

Measuring it manually by comparing top and bottom text baselines, gives different value:

let canvas = document.body.appendChild(document.createElement('canvas'))
canvas.height = canvas.width = 100
let ctx = canvas.getContext('2d')
ctx.font = '48px Roboto'
ctx.textBaseline = 'top'
ctx.fillText('Sphinx', 0, 0)

let a = first(ctx.getImageData(0, 0, 100, 100))

ctx.clearRect(0, 0, 100, 100)
ctx.textBaseline = 'bottom'
ctx.fillText('Sphinx', 0, 100)

let b = first(ctx.getImageData(0, 0, 100, 100))

let lineHeight = canvas.height - b + a

That perfectly corresponds to the bottom value defined in https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline.

I wonder what is the meaning of bottom property in FontMetrics? That makes it impossible to calculate middle value, corresponding to context.textBaseline = 'middle' alignment. An attempt to use it in gl-text failed.

Canvas2d textBaseline values

Would be nice to have canvas2d baselines values: hanging, middle, alphabetical, from https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline.

For median/middle, see https://en.wikipedia.org/wiki/Baseline_(typography).

Default `capHeight` includes overshoot

By default S is chosen for measuring cap height, but in fact S height includes overshoot:

H or I would be more reliable default.

Overshoot property

https://en.wikipedia.org/wiki/Overshoot_(typography)

Would be nice to have its value too

Licensing of this code?

Can you please include a LICENSE file in this repo? c.f. https://help.github.com/articles/licensing-a-repository/