TextMetrics
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
メモ: この機能はウェブワーカー内で利用可能です。
TextMetrics インターフェイスは、キャンバス内のテキストの一部の長さを表します。TextMetrics インスタンスは CanvasRenderingContext2D.measureText() メソッドから取得することができます。
インスタンスプロパティ
TextMetrics.width読取専用-
インラインテキストのある区間の幅を CSS ピクセル単位で返します。コンテキストの現在のフォントを考慮します。
TextMetrics.actualBoundingBoxLeft読取専用-
CanvasRenderingContext2D.textAlignプロパティで指定された位置合わせ点から、指定されたテキストの境界矩形の左側までの、ベースラインに平行な距離（CSS ピクセル単位）。これは、指定された位置合わせ点から左方向への距離を示す正の数値です。 TextMetrics.actualBoundingBoxRight読取専用-
CanvasRenderingContext2D.textAlignプロパティで指定された位置合わせ点から、指定されたテキストの境界矩形の右端までの距離を CSS ピクセル単位で返します。距離はベースラインと平行に測定されます。 TextMetrics.fontBoundingBoxAscent読取専用-
CanvasRenderingContext2D.textBaseline属性で指定された水平線から、テキストの描画に使用される全フォントの最も高い境界矩形の上端までの距離を、CSS ピクセル単位で返します。 TextMetrics.fontBoundingBoxDescent読取専用-
CanvasRenderingContext2D.textBaseline属性で指定された水平線から、テキストの描画に使用されたすべてのフォントの境界矩形の下端までの距離を、CSS ピクセル単位で返します。 TextMetrics.actualBoundingBoxAscent読取専用-
CanvasRenderingContext2D.textBaseline属性で指定された水平線から、テキストの描画に使用される境界矩形の上端までの距離を CSS ピクセル単位で返します。 TextMetrics.actualBoundingBoxDescent読取専用-
CanvasRenderingContext2D.textBaseline属性で指定された水平線から、テキストの描画に使用される境界矩形の下端までの距離を CSS ピクセル単位で返します。 TextMetrics.emHeightAscent読取専用-
CanvasRenderingContext2D.textBaselineプロパティで指定された水平線から、行ボックス内の em 矩形の上端までの距離を、CSS ピクセル単位で返します。 TextMetrics.emHeightDescent読取専用-
CanvasRenderingContext2D.textBaselineプロパティで指定される水平線から、行ボックス内の em 矩形の下端までの距離を、CSS ピクセル単位で返します。 TextMetrics.hangingBaseline読取専用-
CanvasRenderingContext2D.textBaselineプロパティで指定される水平線から、行ボックスのハンギングベースラインまでの距離を CSS ピクセル単位で返します。 TextMetrics.alphabeticBaseline読取専用-
CanvasRenderingContext2D.textBaselineプロパティで指定される水平線から、行ボックスのアルファベットベースラインまでの距離を CSS ピクセル単位で返します。 TextMetrics.ideographicBaseline読取専用-
CanvasRenderingContext2D.textBaselineプロパティで指定される水平線から、行ボックスの表意文字ベースライン（訳注：漢字などのベースライン）までの距離を CSS ピクセル単位で返します。
例
ベースラインの解説
この例は、TextMetrics オブジェクトが保持するベースラインを示しています。デフォルトのベースラインは alphabeticBaseline です。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 = `Abcdefghijkl漢字 (${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();
});
結果
テキストの幅の計測
テキストの x 方向を測定する際には、斜体・イタリックフォントでは文字が送り幅を超えて突出するため、actualBoundingBoxLeft と actualBoundingBoxRight の合計がインラインボックスの幅 (width) を超える場合があります。
したがって、絶対的なテキスト幅をより正確に得る方法として、actualBoundingBoxLeft と actualBoundingBoxRight の合計を使用することが有用である場合があります。
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
仕様書
| Specification |
|---|
| HTML # textmetrics |
ブラウザーの互換性
関連情報
CanvasRenderingContext2Dにおけるクリエイターメソッド<canvas>要素、および関連するインターフェイスであるHTMLCanvasElement