Signatur
Beschreibung
Die schreibgeschützte Eigenschaft ideographicBaseline eines TextMetrics-Objekts gibt den Abstand in CSS-Pixeln an: von der horizontalen Linie, die beim Messen durch CanvasRenderingContext2D.textBaseline festgelegt war, bis zur ideografischen Grundlinie der Zeile. Diese Grundlinie ist die Unterkante des Em-Quadrats. An ihr werden chinesische, japanische und koreanische Schriftzeichen (CJK) ausgerichtet.
Das TextMetrics-Objekt bekommst du über ctx.measureText(text). Der Wert hängt von der Schrift ab (ctx.font) und davon, welcher Wert beim Messen in ctx.textBaseline stand. In Chromium-Browsern zeigen positive Werte nach oben und negative nach unten. Beim Standardwert "alphabetic" ist ideographicBaseline deshalb meist negativ: Die ideografische Grundlinie liegt unter der alphabetischen. Misst du mit textBaseline = "ideographic", ist der Wert 0.
Du brauchst die Eigenschaft vor allem, wenn du lateinischen und CJK-Text auf einer Zeile mischst, eigene Textlayouts oder Beschriftungen in Diagrammen baust oder Linien und Hintergründe genau an der Grundlinie von Schriftzeichen ausrichten willst. Zusammen mit alphabeticBaseline und hangingBaseline kannst du damit zwischen Grundliniensystemen umrechnen, ohne textBaseline immer wieder neu zu setzen.
Rückgabewert
double in CSS-Pixeln: der Abstand von der textBaseline-Linie zur ideografischen Grundlinie. Der Wert ist 0, wenn beim Messen textBaseline = "ideographic" gesetzt war.Beispiele
Wert auslesen und vergleichen
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '40px sans-serif';
for (const baseline of ['alphabetic', 'ideographic', 'top', 'bottom']) {
ctx.textBaseline = baseline;
const m = ctx.measureText('漢字 Text');
console.log(baseline.padEnd(12), m.ideographicBaseline.toFixed(2));
}Ideografische Grundlinie als Hilfslinie zeichnen
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px "Noto Sans JP", sans-serif';
ctx.textBaseline = 'alphabetic';
const text = '日本語 Japan';
const x = 20;
const y = 100; // alphabetische Grundlinie
ctx.fillText(text, x, y);
const m = ctx.measureText(text);
// Positiv = nach oben, daher vom y-Wert abziehen
const ideoY = y - m.ideographicBaseline;
ctx.strokeStyle = 'crimson';
ctx.beginPath();
ctx.moveTo(x, ideoY);
ctx.lineTo(x + m.width, ideoY);
ctx.stroke();Lateinischen und CJK-Text an der ideografischen Grundlinie ausrichten
const ctx = document.querySelector('canvas').getContext('2d');
ctx.textBaseline = 'alphabetic';
const lineY = 120; // gemeinsame ideografische Grundlinie
const drawOnIdeographic = (text, font, x) => {
ctx.font = font;
const m = ctx.measureText(text);
// alphabetische y-Position so wählen, dass die ideografische Linie auf lineY liegt
ctx.fillText(text, x, lineY + m.ideographicBaseline);
return x + m.width;
};
let x = 10;
x = drawOnIdeographic('Preis:', '24px serif', x) + 8;
x = drawOnIdeographic('価格', '40px sans-serif', x);// Wichtig · Fallstricke
- Vorzeichen: Der Wert ist relativ zu
textBaselinezum Zeitpunkt des Messens. Änderst dutextBaselinedanach, bleibt das alteTextMetrics-Objekt unverändert. Miss dann neu mitmeasureText(). Die Richtung der Werte (positiv nach oben) hat sich in Chromium herauskristallisiert. Prüfe sie im Zweifel in deinen Zielbrowsern. - Schriftabhängig: Viele Schriften enthalten keine eigene ideografische Grundlinie in ihren Metriken (OpenType-Tabelle
BASE). Der Browser schätzt den Wert dann, meist aus der Unterlänge (descent). Die Werte können sich deshalb zwischen Browsern und Betriebssystemen um einige Pixel unterscheiden. - Webfonts: Miss erst, wenn die Schrift geladen ist, zum Beispiel nach
await document.fonts.ready. Sonst bekommst du die Metriken der Ersatzschrift. - Kompatibilität: Firefox unterstützt die Eigenschaft erst seit Version 116. In älteren Browsern ist sie
undefined, deshalb vorher prüfen, etwa mit'ideographicBaseline' in TextMetrics.prototype. Die Eigenschaft funktioniert auch mitOffscreenCanvasRenderingContext2D. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird stillschweigend ignoriert.