Hoe wordt tekstbreedte gemeten?

Tekstbreedte verwijst naar de horizontale pixelruimte die een reeks tekens inneemt wanneer deze wordt weergegeven met een specifiek lettertype, grootte en gewicht. In tegenstelling tot tekentellingen hangt pixelbreedte af van de proportionele afstand van elke glyph — de letter "W" is veel breder dan "i" in de meeste lettertypen. Het nauwkeurig meten van tekstbreedte is belangrijk voor UI-indeling, labelafkapping, dynamische canvasweergave en het aanpassen van strings in containers met vaste breedte.

Browsers stellen de measureText()-methode van de HTML5 Canvas API beschikbaar, die de weergegeven tekstbreedte berekent zonder deze op het scherm weer te geven. Door naar een offscreen canvascontext te tekenen, kan een nauwkeurige sub-pixelmeting worden verkregen voor elke combinatie van lettertype, grootte en gewicht.

Gereedschapbeschrijving

Dit gereedschap berekent de pixelbreedte van een of twee tekststrings met behulp van de Canvas API. Selecteer een lettertypefamilie, stel de tekengrootte en het gewicht in en zie direct de weergegeven pixelbreedte. Wanneer twee strings worden ingevoerd, toont een vergelijkingsweergave het absolute verschil en de breedteverhouding tussen beide.

Functies

  • Ondersteunt alle webveilige systeemlettertypen en aangepaste geüploade lettertypebestanden (TTF, OTF, WOFF, WOFF2)
  • Vergelijk twee strings tegelijk met verschil- en verhoudingsstatistieken
  • Aanpasbare tekengrootte van 1 tot 256 px en alle negen standaard lettertypegewichtwaarden

Hoe het werkt

De breedte wordt gemeten met behulp van de CanvasRenderingContext2D.measureText()-API van de browser. Een offscreen <canvas>-element wordt gemaakt, de lettertypeeigenschap van de 2D-context wordt ingesteld op de geselecteerde familie, grootte en gewicht, en measureText() retourneert de begrenzingsvakbreedte in pixels. Aangepaste lettertypen worden in het FontFace-register van de browser geladen voordat de meting plaatsvindt, zodat de resultaten het werkelijke lettertype weerspiegelen.