雑記帳

整理しない情報集

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