TextMetrics

Instanz-Eigenschaften

TextMetrics.width Schreibgeschützt

Gibt die Breite eines Segments von Inline-Text in CSS-Pixeln zurück. Es berücksichtigt die aktuelle Schriftart des Kontexts.

TextMetrics.actualBoundingBoxLeft Schreibgeschützt

Abstand parallel zur Grundlinie vom Ausrichtungspunkt, der durch die Eigenschaft CanvasRenderingContext2D.textAlign angegeben wird, bis zur linken Seite des Begrenzungsrechtecks des gegebenen Textes, in CSS-Pixel; positive Zahlen zeigen einen Abstand an, der nach links vom gegebenen Ausrichtungspunkt geht.

TextMetrics.actualBoundingBoxRight Schreibgeschützt

Gibt den Abstand vom Ausrichtungspunkt, der durch die Eigenschaft CanvasRenderingContext2D.textAlign angegeben wird, bis zur rechten Seite des Begrenzungsrechtecks des gegebenen Textes in CSS-Pixeln zurück. Der Abstand wird parallel zur Grundlinie gemessen.

TextMetrics.fontBoundingBoxAscent Schreibgeschützt

Gibt den Abstand von der durch das Attribut CanvasRenderingContext2D.textBaseline angegebenen horizontalen Linie bis zur Oberseite des höchsten Begrenzungsrechtecks aller zur Darstellung des Textes verwendeten Schriftarten in CSS-Pixeln zurück.

TextMetrics.fontBoundingBoxDescent Schreibgeschützt

Gibt den Abstand von der durch das Attribut CanvasRenderingContext2D.textBaseline angegebenen horizontalen Linie bis zur Unterseite des Begrenzungsrechtecks aller zur Darstellung des Textes verwendeten Schriftarten in CSS-Pixeln zurück.

TextMetrics.actualBoundingBoxAscent Schreibgeschützt

Gibt den Abstand von der durch das Attribut CanvasRenderingContext2D.textBaseline angegebenen horizontalen Linie bis zur Oberseite des zur Darstellung des Textes verwendeten Begrenzungsrechtecks in CSS-Pixeln zurück.

TextMetrics.actualBoundingBoxDescent Schreibgeschützt

Gibt den Abstand von der durch das Attribut CanvasRenderingContext2D.textBaseline angegebenen horizontalen Linie bis zur Unterseite des zur Darstellung des Textes verwendeten Begrenzungsrechtecks in CSS-Pixeln zurück.

TextMetrics.emHeightAscent Schreibgeschützt

Gibt den Abstand von der durch die Eigenschaft CanvasRenderingContext2D.textBaseline angegebenen horizontalen Linie bis zur Oberseite des em-Quadrats in der Linienbox in CSS-Pixeln zurück.

TextMetrics.emHeightDescent Schreibgeschützt

Gibt den Abstand von der durch die Eigenschaft CanvasRenderingContext2D.textBaseline angegebenen horizontalen Linie bis zur Unterseite des em-Quadrats in der Linienbox in CSS-Pixeln zurück.

TextMetrics.hangingBaseline Schreibgeschützt

Gibt den Abstand von der durch die Eigenschaft CanvasRenderingContext2D.textBaseline angegebenen horizontalen Linie bis zur hängenden Grundlinie der Linienbox in CSS-Pixeln zurück.

TextMetrics.alphabeticBaseline Schreibgeschützt

Gibt den Abstand von der durch die Eigenschaft CanvasRenderingContext2D.textBaseline angegebenen horizontalen Linie bis zur alphabetischen Grundlinie der Linienbox in CSS-Pixeln zurück.

TextMetrics.ideographicBaseline Schreibgeschützt

Gibt den Abstand von der durch die Eigenschaft CanvasRenderingContext2D.textBaseline angegebenen horizontalen Linie bis zur ideografischen Grundlinie der Linienbox in CSS-Pixeln zurück.

Beispiele

Veranschaulichung der Grundlinien

Dieses Beispiel zeigt die Grundlinien, die das TextMetrics-Objekt enthält. Die Standardgrundlinie ist die alphabeticBaseline. Siehe auch die Eigenschaft CanvasRenderingContext2D.textBaseline.

HTML

<canvas id="canvas" width="550" height="500"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const baselinesAboveAlphabetic = [
  "fontBoundingBoxAscent",
  "actualBoundingBoxAscent",
  "emHeightAscent",
  "hangingBaseline",
];
const baselinesBelowAlphabetic = [
  "ideographicBaseline",
  "emHeightDescent",
  "actualBoundingBoxDescent",
  "fontBoundingBoxDescent",
];
const baselines = [...baselinesAboveAlphabetic, ...baselinesBelowAlphabetic];
ctx.font = "25px serif";
ctx.strokeStyle = "red";

baselines.forEach((baseline, index) => {
  const text = `Abcdefghijklmnop (${baseline})`;
  const textMetrics = ctx.measureText(text);
  const y = 50 + index * 50;
  ctx.beginPath();
  ctx.fillText(text, 0, y);

  const baselineMetricValue = textMetrics[baseline];
  if (baselineMetricValue === undefined) {
    return;
  }

  const lineY = baselinesBelowAlphabetic.includes(baseline)
    ? y + Math.abs(baselineMetricValue)
    : y - Math.abs(baselineMetricValue);
  ctx.moveTo(0, lineY);
  ctx.lineTo(550, lineY);
  ctx.stroke();
});

Ergebnis

Messen der Textbreite

Beim Messen der x-Richtung eines Textstücks kann die Summe von actualBoundingBoxLeft und actualBoundingBoxRight breiter sein als die Breite des Inline-Box-(width) auf Grund von schrägen/kuriven Schriftarten, bei denen Zeichen über ihre Vorlauflänge hinweggehen.

Es kann deshalb nützlich sein, die Summe von actualBoundingBoxLeft und actualBoundingBoxRight als genauere Methode zur Ermittlung der absoluten Textbreite zu verwenden:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const text = "Abcdefghijklmnop";
ctx.font = "italic 50px serif";
const textMetrics = ctx.measureText(text);

console.log(textMetrics.width);
// 459.8833312988281

console.log(
  textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
);
// 462.8833333333333

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Erzeugermethode in CanvasRenderingContext2D
• Das <canvas>-Element und seine zugehörige Schnittstelle, HTMLCanvasElement