TextMetrics.alphabeticBaseline — Eigenschaft · JavaScript-Referenz

Signatur

TextMetrics.alphabeticBaseline

Beschreibung

alphabeticBaseline ist eine schreibgeschützte Eigenschaft eines TextMetrics-Objekts. Dieses Objekt liefert CanvasRenderingContext2D.measureText(). Der Wert gibt in CSS-Pixeln an, wie weit die alphabetische Grundlinie von der Bezugslinie entfernt ist, die gerade über ctx.textBaseline eingestellt ist. Auf der alphabetischen Grundlinie „sitzen“ lateinische Buchstaben wie a, x oder H. Unterlängen wie bei g oder p reichen darunter.

Der Wert hängt deshalb direkt von textBaseline ab. Steht textBaseline auf "alphabetic" (das ist die Voreinstellung), ist der Wert 0 (in Chromium teilweise -0). Bei anderen Einstellungen wie "top", "middle" oder "bottom" gibt er den Versatz zwischen dieser Linie und der alphabetischen Grundlinie an. Bei "top" ist der Wert in aktuellen Browsern negativ, bei "bottom" positiv. Der Wert zeigt also nach oben: Er gibt an, wie weit die Grundlinie über der Bezugslinie liegt.

Nützlich ist die Eigenschaft, wenn Sie Text mit einer beliebigen textBaseline zeichnen, aber trotzdem die alphabetische Grundlinie kennen müssen. Beispiele: Unterstreichungen zeichnen, Beschriftungen in Diagrammen an einer gemeinsamen Grundlinie ausrichten oder Schriften mit unterschiedlichen Metriken nebeneinander setzen. Zusammen mit hangingBaseline und ideographicBaseline können Sie auch Texte aus verschiedenen Schriftsystemen aneinander ausrichten.

Rückgabewert

Typ

number

Beschreibung

Ein double in CSS-Pixeln: der Abstand von der durch textBaseline angegebenen Linie zur alphabetischen Grundlinie. Bei textBaseline = "alphabetic" ist er 0.

Beispiele

Wert bei verschiedenen textBaseline-Einstellungen

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

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

top -35.xx hanging -28.xx middle -13.xx alphabetic 0.00 ideographic 8.xx bottom 8.xx (genaue Werte hängen von Schrift und Browser ab)

Unterstreichung an der Grundlinie trotz textBaseline = "top"

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

const text = 'Unterstrichen';
const x = 20;
const y = 20; // obere Kante des Texts
ctx.fillText(text, x, y);

const m = ctx.measureText(text);
// alphabeticBaseline ist bei "top" negativ, daher subtrahieren
const baselineY = y - m.alphabeticBaseline;

ctx.beginPath();
ctx.moveTo(x, baselineY + 2);
ctx.lineTo(x + m.width, baselineY + 2);
ctx.lineWidth = 2;
ctx.stroke();

Zwei Schriften an gemeinsamer Grundlinie ausrichten

const ctx = document.querySelector('canvas').getContext('2d');
ctx.textBaseline = 'middle';
const centerY = 60;

// Grundlinie der ersten Schrift ermitteln
ctx.font = '48px Georgia';
const m1 = ctx.measureText('Preis:');
const baselineY = centerY - m1.alphabeticBaseline;
ctx.fillText('Preis:', 10, centerY);

// zweite Schrift so platzieren, dass sie dieselbe Grundlinie hat
ctx.font = '24px monospace';
const m2 = ctx.measureText('49,90 €');
ctx.fillText('49,90 €', 10 + m1.width + 8, baselineY + m2.alphabeticBaseline);

// Wichtig · Fallstricke

Vorzeichen: Welches Vorzeichen der Wert hat, hängt von der aktiven textBaseline ab. Ältere Browser setzen das teils uneinheitlich um. Prüfen Sie Ihre Berechnung am besten einmal mit textBaseline = "top" und "bottom".
Momentaufnahme: Das TextMetrics-Objekt ändert sich nicht mehr. Wenn Sie font oder textBaseline danach ändern, müssen Sie measureText() erneut aufrufen.
Der Wert hängt von der Schrift ab, nicht vom übergebenen Text. Die alphabetische Grundlinie kommt aus den Metriken der Schrift. Ist eine Webschrift noch nicht geladen, misst der Browser mit der Ersatzschrift. Warten Sie deshalb vorher auf document.fonts.ready.
Kompatibilität: Firefox unterstützt die Eigenschaft erst ab Version 116. In älteren Browsern ist sie undefined. Prüfen Sie das so: 'alphabeticBaseline' in TextMetrics.prototype. Ersatzweise können Sie den Wert aus fontBoundingBoxAscent bei textBaseline = "alphabetic" ableiten.
Die Eigenschaft gibt es auch in Web Workern über OffscreenCanvasRenderingContext2D.measureText().

Siehe auch

TextMetrics.hangingBaseline TextMetrics.ideographicBaseline TextMetrics.emHeightAscent TextMetrics.emHeightDescent TextMetrics.actualBoundingBoxAscent TextEncoderStream.writable