Obtenir des statistiques sur les polices en JavaScript?

Question

Je travaille actuellement sur un projet JavaScript qui utilise le canevas HTML5 comme cible de rendu. Pour que mon code fonctionne bien avec les interfaces (spécifiées de manière rigide) que j'ai reçues, je dois être capable de prendre une police et d'extraire les hauteurs de montée et de descente de cette police. Cela permettra aux clients de positionner plus précisément le texte. Je suis conscient que je peux modifier l'emplacement du texte en définissant l'attribut textBaseline, mais j'ai en fait besoin des valeurs numériques décrivant ces hauteurs différentes. Y a-t-il un moyen simple de le faire? Si ce n'est pas le cas, y a-t-il une bibliothèque (avec un peu de chance) qui peut le gérer pour moi? La plupart des solutions proposées que j'ai trouvées sont des bibliothèques de rendu de polices lourdes, ce qui semble être une énorme surpuissance pour ce problème.

Answer 1

This article sur HTML5 Metrics Typographic traite le problème et un part solution using CSS - bien que l'arrondi entier de offsetTop etc est un problème (potentiellement peut utiliser getBoundingClientRect() pour obtenir des valeurs correctes de virgule flottante pour certains navigateurs).

Answer 2

La réponse courte est qu'il n'y a pas de construction intégrée et vous êtes en quelque sorte vous-même. Pour cette raison, la plupart des gens les estiment simplement. Certaines personnes pré-calculent toutes les valeurs, ce qui n'est pas trop de travail à condition de n'utiliser que quelques polices.

La troisième méthode consiste à créer une toile en mémoire et à imprimer des lettres (par exemple Q et O) et à tenter de déterminer par programme la montée et la descente à l'aide d'une collision par pixel. C'est une douleur et peut être lent en fonction du nombre de polices et de la précision que vous souhaitez obtenir, mais c'est la façon la plus précise de le faire si vous ne voulez pas pré-calculer les valeurs.

Answer 3

Tout comme une référence ici: La largeur du texte peut être mesuré avec:

ctx.measureText(txt).width 

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