TextMetrics.fontBoundingBoxDescent — Eigenschaft · JavaScript-Referenz

Signatur

TextMetrics.fontBoundingBoxDescent

Beschreibung

Die schreibgeschützte Eigenschaft fontBoundingBoxDescent eines TextMetrics-Objekts gibt an, wie weit die Bounding-Box der Schriftart unter die Linie reicht, die mit CanvasRenderingContext2D.textBaseline festgelegt ist. Der Wert wird in CSS-Pixeln angegeben. Ein TextMetrics-Objekt erhalten Sie über ctx.measureText(text).

Im Unterschied zu actualBoundingBoxDescent hängt der Wert nicht von den konkreten Zeichen ab. Er kommt aus den Metriken der Schrift (Descent aus der Font-Tabelle). Ob Sie "aaa" oder "gjpqy" messen, das Ergebnis ist bei gleicher Schrift und Größe dasselbe. Deshalb passt die Eigenschaft gut, wenn Sie gleichmäßige Zeilenhöhen, Textboxen mit festem Innenabstand oder vertikal zentrierte Beschriftungen brauchen, deren Position sich nicht mit dem Inhalt ändern soll.

Zusammen mit fontBoundingBoxAscent ergibt die Summe fontBoundingBoxAscent + fontBoundingBoxDescent die Höhe der Font-Box, also eine brauchbare Zeilenhöhe ohne zusätzlichen Zeilenabstand. Mit der Standard-Einstellung textBaseline = "alphabetic" ist der Wert positiv, weil die Box unter die Grundlinie reicht.

Rückgabewert

Typ

number

Beschreibung

Abstand in CSS-Pixeln von der textBaseline-Linie bis zur Unterkante der Font-Bounding-Box. Positive Werte bedeuten: Die Unterkante liegt unterhalb der Grundlinie.

Beispiele

Unterlänge der Schrift auslesen

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

const m = ctx.measureText('Hallo');
console.log(m.fontBoundingBoxDescent);

7 (ungefährer Wert, abhängig von Schrift und Plattform)

Unterschied zu actualBoundingBoxDescent

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

for (const text of ['ace', 'gjpqy']) {
  const m = ctx.measureText(text);
  console.log(text,
    'font:', m.fontBoundingBoxDescent.toFixed(1),
    'actual:', m.actualBoundingBoxDescent.toFixed(1));
}

ace font: 9.1 actual: 0.6 gjpqy font: 9.1 actual: 8.8 (Werte ungefähr, der font-Wert bleibt gleich)

Beschriftung mit gleichmäßigem Hintergrund zeichnen

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

const drawLabel = (text, x, y, padding = 6) => {
  const m = ctx.measureText(text);
  const ascent = m.fontBoundingBoxAscent;
  const descent = m.fontBoundingBoxDescent;
  // Hintergrund: gleiche Höhe für jeden Text
  ctx.fillStyle = '#1e293b';
  ctx.fillRect(x - padding, y - ascent - padding,
    m.width + padding * 2, ascent + descent + padding * 2);
  ctx.fillStyle = '#fff';
  ctx.fillText(text, x, y);
};

drawLabel('Umsatz', 20, 40);
drawLabel('Gewinnquote', 20, 90); // gleich hohe Box trotz „q“

Mehrzeiligen Text mit Zeilenhöhe aus Font-Metriken setzen

const ctx = document.querySelector('canvas').getContext('2d');
ctx.font = '18px sans-serif';
ctx.textBaseline = 'alphabetic';

const lines = ['Erste Zeile', 'Zweite Zeile mit gjpq', 'Dritte Zeile'];
const { fontBoundingBoxAscent: a, fontBoundingBoxDescent: d } = ctx.measureText('M');
const lineHeight = a + d;

lines.forEach((line, i) => {
  ctx.fillText(line, 10, 10 + a + i * lineHeight);
});
console.log('Zeilenhöhe:', lineHeight.toFixed(1));

Zeilenhöhe: 20.7 (ungefährer Wert)

// Wichtig · Fallstricke

Bezug zu textBaseline: Der Wert wird ab der gerade eingestellten Grundlinie gemessen. Wenn Sie textBaseline nach measureText() ändern, passt das gespeicherte Ergebnis nicht mehr. Bei "bottom" oder "ideographic" kann der Wert fast 0 oder sogar negativ sein.
Schrift muss geladen sein: Ist eine Webfont noch nicht geladen, misst der Browser die Ersatzschrift. Warten Sie vorher auf document.fonts.ready oder document.fonts.load('20px MeineSchrift').
Plattformunterschiede: Die Werte kommen aus den Schriftdateien und aus der Text-Engine des Browsers. Sie können sich zwischen Betriebssystemen und Browsern um Bruchteile eines Pixels unterscheiden. Verlassen Sie sich nicht auf pixelgenaue Werte, etwa in Tests.
Kompatibilität: Firefox unterstützt die Eigenschaft erst ab Version 116 (vorher nur hinter einem Flag). Für ältere Browser brauchen Sie eine Ausweichlösung, z. B. if ('fontBoundingBoxDescent' in metrics), und sonst eine Schätzung wie fontSize * 0.25. In OffscreenCanvas und Web Workern ist die Eigenschaft ebenfalls verfügbar.
Für die tatsächliche Ausdehnung der gezeichneten Zeichen, etwa für Treffertests oder enge Rahmen, verwenden Sie actualBoundingBoxDescent.

Siehe auch

TextMetrics.fontBoundingBoxAscent TextMetrics.actualBoundingBoxDescent TextMetrics.actualBoundingBoxAscent TextMetrics.actualBoundingBoxLeft TextMetrics.actualBoundingBoxRight