TextMetrics.emHeightDescent — Eigenschaft · JavaScript-Referenz

Signatur

TextMetrics.emHeightDescent

Beschreibung

Die schreibgeschützte Eigenschaft emHeightDescent gehört zu dem TextMetrics-Objekt, das CanvasRenderingContext2D.measureText() zurückgibt. Sie gibt an, wie weit die Unterkante des Em-Quadrats (des abstrakten Rahmens, der der Schriftgröße entspricht) unterhalb der aktuellen Grundlinie liegt. Die Grundlinie wird dabei über ctx.textBaseline bestimmt.

Ein positiver Wert bedeutet, dass die Unterkante des Em-Quadrats unterhalb der Grundlinie liegt, ein negativer Wert bedeutet, dass sie darüber liegt. Bei textBaseline = "alphabetic" (Standard) ist der Wert typischerweise positiv, bei "bottom" ist er praktisch 0.

Zusammen mit emHeightAscent ergibt sich die Höhe des Em-Quadrats: emHeightAscent + emHeightDescent, die in der Regel der eingestellten Schriftgröße entspricht. Anders als actualBoundingBoxDescent hängt der Wert nicht von den konkret gemessenen Zeichen ab, sondern nur von Schrift und Grundlinie. Das eignet sich für ein konsistentes, textunabhängiges vertikales Layout, etwa um Beschriftungen unterschiedlicher Inhalte bündig auszurichten.

Rückgabewert

Typ

number

Beschreibung

Abstand in CSS-Pixeln (Gleitkommazahl). Ein positiver Wert heißt: Die Unterkante des Em-Quadrats liegt unterhalb der Grundlinie.

Beispiele

Em-Abstieg messen

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '40px serif';

const metrics = ctx.measureText('Hallo');
console.log(metrics.emHeightDescent);

z. B. 8.4 (abhängig von Schrift und Browser)

Einfluss von textBaseline vergleichen

const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '40px sans-serif';

for (const baseline of ['top', 'middle', 'alphabetic', 'ideographic', 'bottom']) {
  ctx.textBaseline = baseline;
  const { emHeightDescent } = ctx.measureText('Äg');
  console.log(baseline.padEnd(12), emHeightDescent.toFixed(2));
}

top 40.00 middle 20.00 alphabetic ca. 8–9 ideographic ca. 0 bottom 0.00

Em-Quadrat um den Text zeichnen

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px Georgia';
ctx.textBaseline = 'alphabetic';

const text = 'Typografie';
const x = 20;
const y = 80;
const m = ctx.measureText(text);

ctx.fillText(text, x, y);

// Em-Quadrat: von Oberkante (y - ascent) bis Unterkante (y + descent)
const emHeight = m.emHeightAscent + m.emHeightDescent;
ctx.strokeStyle = 'crimson';
ctx.strokeRect(x, y - m.emHeightAscent, m.width, emHeight);

console.log('Em-Höhe:', emHeight.toFixed(1));

Em-Höhe: 48.0

Beschriftungen textunabhängig vertikal zentrieren

const ctx = document.querySelector('canvas').getContext('2d');
ctx.font = '24px system-ui';
ctx.textBaseline = 'alphabetic';

const drawCenteredLabel = (text, x, boxTop, boxHeight) => {
  const { emHeightAscent, emHeightDescent } = ctx.measureText(text);
  const emHeight = emHeightAscent + emHeightDescent;
  // Grundlinie so setzen, dass das Em-Quadrat mittig in der Box liegt
  const baselineY = boxTop + (boxHeight - emHeight) / 2 + emHeightAscent;
  ctx.strokeRect(x, boxTop, 120, boxHeight);
  ctx.fillText(text, x + 8, baselineY);
};

// 'ace' und 'Ägypten' landen auf derselben Grundlinie
drawCenteredLabel('ace', 10, 10, 50);
drawCenteredLabel('Ägypten', 140, 10, 50);

// Wichtig · Fallstricke

Vorzeichen beachten: Positive Werte liegen unterhalb der Grundlinie. Bei textBaseline = "top" oder "hanging" ist der Wert groß und positiv, bei "bottom" etwa 0. Wer die Grundlinie wechselt, muss neu messen.
Nicht mit actualBoundingBoxDescent verwechseln: Der tatsächliche Abstieg hängt von den Zeichen ab (z. B. „g“ oder „p“). emHeightDescent ist für jeden Text in derselben Schrift gleich.
Auch nicht mit fontBoundingBoxDescent verwechseln: Dieser Wert bezieht sich auf den größten Abstieg der Schrift (inklusive Zeilenabstand-Metriken) und ist meist größer als der Em-Abstieg.
Browser-Kompatibilität: Erst seit etwa 2023 in allen großen Browsern verfügbar (Firefox ab 116). In älteren Umgebungen ist die Eigenschaft undefined. Deshalb vorher prüfen, z. B. mit 'emHeightDescent' in TextMetrics.prototype, und bei Bedarf auf fontBoundingBoxDescent oder eine Schätzung (etwa 20 % der Schriftgröße) zurückfallen.
Die Werte hängen von der geladenen Schrift ab. Webfonts erst nach document.fonts.ready messen, sonst werden die Metriken der Ersatzschrift geliefert.
Funktioniert ebenso mit OffscreenCanvasRenderingContext2D, also auch in Web Workern.

Siehe auch

TextMetrics TextMetrics.emHeightAscent TextMetrics.actualBoundingBoxDescent TextMetrics.fontBoundingBoxDescent CanvasRenderingContext2D.measureText() CanvasRenderingContext2D.textBaseline TextDecoderStream.ignoreBOM