Obteniendo métricas de fuentes en JavaScript?

Question

Actualmente estoy trabajando en un proyecto de JavaScript que usa el lienzo HTML5 como un objetivo de representación. Para que mi código funcione correctamente con las interfaces (rígidamente especificadas) que me han proporcionado, necesito poder tomar una fuente y extraer las alturas de ascenso y descenso de esa fuente. Esto permitirá a los clientes ubicar el texto con mayor precisión. Soy consciente de que puedo cambiar dónde se dibuja el texto estableciendo el atributo textBaseline, pero en realidad necesito los valores numéricos que describen estas alturas diferentes. ¿Hay una manera simple de hacer esto? Si no, ¿hay una biblioteca (afortunadamente ligera) que pueda manejarlo por mí? La mayoría de las soluciones propuestas que he encontrado son bibliotecas de renderizado de fuentes pesadas, lo que parece una sobrecarga masiva para este problema.

Answer 1

This article en HTML5 tipográficas métricas discute el problema y una part solution using CSS - aunque el redondeo entero de offsetTop etc es un problema (potencialmente pueden utilizar getBoundingClientRect() para obtener valores de punto flotante adecuados para algunos navegadores).

Answer 2

La respuesta corta es que no hay un camino integrado y usted está por su cuenta.

Debido a esto, la mayoría de la gente simplemente los estima. Algunas personas calculan previamente todos los valores, lo cual no es demasiado trabajo, siempre que use solo unas pocas fuentes.

La tercera forma es hacer un lienzo en la memoria e imprimir algunas letras (por ejemplo, un Q y un O) e intentar programar el ascenso y el descenso utilizando la colisión por píxel. Es un problema y puede ser lento dependiendo de la cantidad de fuentes y de la precisión que desee, pero es la forma más precisa de hacerlo si no desea calcular previamente los valores.

Answer 3

Sólo como referencia aquí: La anchura del texto se puede medir con:

ctx.measureText(txt).width 

http://www.w3schools.com/tags/canvas_measuretext.asp