Signatur
Beschreibung
hangingBaseline ist eine schreibgeschützte Eigenschaft des TextMetrics-Objekts, das CanvasRenderingContext2D.measureText() zurückgibt. Der Wert (ein double) gibt an, wie weit die hängende Grundlinie der Zeile von der horizontalen Bezugslinie entfernt ist, die durch ctx.textBaseline festgelegt wird. Die Angabe erfolgt in CSS-Pixeln.
Die hängende Grundlinie gibt es vor allem in indischen Schriften wie Devanagari, Bengali oder Gurmukhi sowie im Tibetischen: Die Zeichen „hängen“ dort an einer waagerechten Linie im oberen Bereich. Bei lateinischer Schrift liegt diese Linie ungefähr auf Höhe der Großbuchstaben. Du brauchst den Wert, wenn du Text aus verschiedenen Schriften an einer gemeinsamen oberen Linie ausrichten, Hilfslinien für Typografie-Werkzeuge zeichnen oder Unterstreichungen bzw. Kopfbalken von Hand positionieren willst.
Das Vorzeichen folgt der Konvention der übrigen Grundlinien-Werte in TextMetrics: Ist textBaseline auf "alphabetic" gesetzt, ist der Wert positiv, weil die hängende Grundlinie über der Bezugslinie liegt. Auf der Zeichenfläche liegt die Linie dann bei y - hangingBaseline. Setzt du textBaseline = "hanging", ist der Wert 0.
Rückgabewert
textBaseline-Bezugslinie zur hängenden Grundlinie. Positive Werte bedeuten, dass die Linie oberhalb der Bezugslinie liegt.Beispiele
Wert auslesen und mit der textBaseline vergleichen
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '40px serif';
for (const baseline of ['alphabetic', 'hanging', 'top', 'bottom']) {
ctx.textBaseline = baseline;
const { hangingBaseline } = ctx.measureText('Hallo');
console.log(baseline.padEnd(10), hangingBaseline.toFixed(2));
}Hängende Grundlinie als Hilfslinie einzeichnen
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = 20;
const y = 100;
ctx.font = '48px "Noto Sans Devanagari", sans-serif';
ctx.textBaseline = 'alphabetic';
const text = 'नमस्ते';
const metrics = ctx.measureText(text);
ctx.fillStyle = '#222';
ctx.fillText(text, x, y);
// Die Linie liegt um hangingBaseline Pixel ÜBER der Bezugslinie
const lineY = y - metrics.hangingBaseline;
ctx.strokeStyle = 'crimson';
ctx.beginPath();
ctx.moveTo(x, lineY);
ctx.lineTo(x + metrics.width, lineY);
ctx.stroke();Zwei Schriften an der hängenden Linie ausrichten
const ctx = document.querySelector('canvas').getContext('2d');
ctx.textBaseline = 'alphabetic';
const hangingY = 60; // gemeinsame hängende Linie
const drawHanging = (text, font, x) => {
ctx.font = font;
const m = ctx.measureText(text);
// Bezugslinie so verschieben, dass die hängende Linie bei hangingY landet
ctx.fillText(text, x, hangingY + m.hangingBaseline);
return x + m.width + 10;
};
let x = 10;
x = drawHanging('हिन्दी', '36px sans-serif', x);
x = drawHanging('Latin', '28px serif', x);// Wichtig · Fallstricke
- Browserunterstützung: Chromium stellt den Wert seit Version 87 bereit, Firefox erst seit 116. Für ältere Browser prüfst du mit
'hangingBaseline' in TextMetrics.prototypeund nimmst als Ersatz z. B. etwa 80 % vonfontBoundingBoxAscent. - Näherungswerte: Viele Schriften enthalten keine eigene Angabe für die hängende Grundlinie. Browser schätzen sie dann, oft als festen Anteil der Oberlänge. Deshalb können sich die Werte je nach Browser und Schrift deutlich unterscheiden.
- Die Linie gilt für die ganze Zeile: Der Wert beschreibt die Zeile und hängt nicht von den einzelnen Zeichen ab. Er ändert sich nur, wenn du
fontodertextBaselineänderst, nicht mit dem gemessenen Text. - Vorzeichen: Positive Werte bedeuten „nach oben“. Auf der Zeichenfläche wird also subtrahiert (
y - hangingBaseline), weil die y-Achse nach unten zeigt. - Der Wert beachtet keine Transformationen (
scale(),setTransform()). Er gilt im aktuellen Koordinatensystem vor der Transformation. - Die Webschrift muss geladen sein, bevor du misst (z. B. mit
await document.fonts.ready). Sonst misst der Browser die Ersatzschrift.