measureTextの覚書
公開日:
カテゴリ: Javascript
measureText() の出力値の仕様や使い方を毎回忘れそうなので覚書を残しておきます。
measureText
measureText(string) を実行すると TextMetrics クラスのオブジェクトが返ってきます。
TextMetrics
2024年9月時点でChrome 129で取得できるプロパティは以下。
| プロパティ名 | 内容 |
|---|---|
| actualBoundingBoxAscent | 実際の外接の天面 |
| actualBoundingBoxDescent | 実際の外接の底面 |
| actualBoundingBoxLeft | 実際の外接の左側面 |
| actualBoundingBoxRight | 実際の外接の右側面 |
| alphabeticBaseline | アルファベットのベースライン |
| fontBoundingBoxAscent | フォントの天面 |
| fontBoundingBoxDescent | フォントの底面 |
| hangingBaseline | ぶら下がりのベースライン |
| ideographicBaseline | イデオグラフィックのベースライン |
| width | 幅 |
WHATWGの仕様書には他に以下の2つのプロパティが定義されていますが、現在のChromeでは取得できませんでした。
- emHeightAscent
- emHeightDescent
各プロパティの関係は、WHATWGの仕様書に わかりやすい画像 が掲載されています。
TextMetricsの使い方
X座標は textAlign 、Y座標は textBaseline が適用された状態で座標(0, 0)に描画した際の値が返ってきます。
つまり、実際の座標は以下の計算で求めることができます。X座標・Y座標は fillText() などで指定した座標に対応します。
- Ascent系
Y座標 - Ascentの値
- Descent系
Y座標 + Descentの値
- Baseline系
Y座標 - Baselineの値
- Left系
X座標 - Leftの値
- Right系
X座標 + Rightの値
付録
textBaseline の値による measureText の変化を確認できます。フォントは "24px sans-serif" 、文字列は Sample Text 日本語 を指定しています。
参考資料
カテゴリ: Javascript