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
![image](https://user-images.githubusercontent.com/300067/41502401-61eb93c8-7187-11e8-9231-4ce5facf8221.png)
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
![image](https://user-images.githubusercontent.com/300067/41502430-d2b7e1e2-7187-11e8-81ca-c360df895e27.png)
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.