Signatur
Beschreibung
Die schreibgeschützte Eigenschaft emHeightAscent eines TextMetrics-Objekts gibt an, wie weit die Oberkante des Em-Quadrats (der Em-Box) über der aktuell gewählten Grundlinie liegt. Maßgeblich ist dabei CanvasRenderingContext2D.textBaseline. Den Wert liefert ctx.measureText(). Positive Werte bedeuten, dass die Oberkante oberhalb der Grundlinie liegt.
Anders als actualBoundingBoxAscent hängt der Wert nicht von den gemessenen Zeichen ab. Er wird allein aus der Schrift und ihrer Größe berechnet. Zusammen mit emHeightDescent ergibt sich die Em-Höhe, die bei den meisten Schriften der Schriftgröße entspricht, also emHeightAscent + emHeightDescent ≈ font-size. So eignet sich der Wert für ein gleichmäßiges Zeilenraster, für einheitlich hohe Hintergrundflächen hinter Text und für die typografisch genaue vertikale Ausrichtung, unabhängig davon, ob der Text Ober- oder Unterlängen hat.
Der Wert gilt für den Zustand des Kontexts zum Zeitpunkt des Aufrufs von measureText(). Ändert man danach font oder textBaseline, muss man neu messen.
Rückgabewert
double) von der textBaseline-Linie zur Oberkante der Em-Box. Bei textBaseline = "top" ist er typischerweise 0, bei "bottom" ungefähr gleich der Schriftgröße. Er kann auch negativ sein, wenn die Grundlinie über der Em-Oberkante liegt.Beispiele
Em-Höhe einer Schrift ermitteln
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '40px sans-serif';
ctx.textBaseline = 'alphabetic';
const m = ctx.measureText('Hallo');
console.log('Ascent:', m.emHeightAscent.toFixed(1));
console.log('Descent:', m.emHeightDescent.toFixed(1));
console.log('Em-Höhe:', (m.emHeightAscent + m.emHeightDescent).toFixed(1));Wirkung verschiedener textBaseline-Werte
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '20px serif';
for (const baseline of ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']) {
ctx.textBaseline = baseline;
const { emHeightAscent } = ctx.measureText('Äg');
console.log(baseline.padEnd(12), emHeightAscent.toFixed(2));
}Einheitlich hohe Hintergrundfläche hinter Text
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '24px system-ui';
ctx.textBaseline = 'alphabetic';
const drawLabel = (text, x, y) => {
const m = ctx.measureText(text);
const height = m.emHeightAscent + m.emHeightDescent;
// Hintergrund bezogen auf die Em-Box: gleich hoch für "ace" und "Ägyptisch"
ctx.fillStyle = '#ffe08a';
ctx.fillRect(x - 4, y - m.emHeightAscent, m.width + 8, height);
ctx.fillStyle = '#222';
ctx.fillText(text, x, y);
};
drawLabel('ace', 10, 40);
drawLabel('Ägyptisch', 80, 40);// Wichtig · Fallstricke
- Nicht mit
actualBoundingBoxAscentverwechseln: Dieser Wert beschreibt die tatsächlich gezeichneten Glyphen,emHeightAscentdagegen die Em-Box der Schrift. Akzente wie bei „Ä“ oder hohe Glyphen können über die Em-Box hinausragen. - Auch nicht mit
fontBoundingBoxAscentverwechseln: Dieser Wert kommt aus den Ascender-Metriken der Schrift und ist meist größer als die Em-Oberkante. - Browser-Unterstützung: Safari unterstützt die Eigenschaft seit Längerem, Chrome und Edge erst seit Version 99, Firefox erst seit Version 116. Ältere Browser liefern
undefined. Deshalb vorher prüfen, etwa mit'emHeightAscent' in TextMetrics.prototype, und bei Bedarf auffontBoundingBoxAscentoder eine Schätzung aus der Schriftgröße ausweichen. - Schriften laden: Wird gemessen, bevor eine Webschrift geladen ist, beziehen sich die Werte auf die Ersatzschrift. Vorher
await document.fonts.load('24px MeineSchrift')aufrufen. - Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert, im Strict Mode lösen sie einen
TypeErroraus. - Die Werte sind CSS-Pixel und unabhängig von
devicePixelRatio. Transformationen des Kontexts wiescale()fließen nicht ein.