構文

context . textBaseline [ = value ]

現在のベースライン・アラインメント設定を返します。

値をセットして、ベースライン・アラインメントを変更することができます。利用可能な値とその意味は、下記の通りです。それ以外の値は無視されます。デフォルトは alphabetic です。

仕様

textBaseline 属性の指定可能なキーワードは、そのキーワードが表す意味の通りに、フォント内の整列線の位置を表します：

キーワードと整列線の位置の対応は以下の通りです：

top

The top of the em square

hanging

The hanging baseline

middle

The middle of the em square

alphabetic

The alphabetic baseline

ideographic

The ideographic baseline

bottom

The bottom of the em square

※ 原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-textbaseline

サンプル

このサンプルは、textBaseline の値を変えながら文字列を描いたものです。それぞれの文字列のアンカーポイント（fillText メソッドに指定する座標）には赤丸を描き、そこから横に補助線を引きました。

ctx.fillStyle = "black";
ctx.font = "28px 'Monotype Corsiva'";
/* 補助点・補助線を描画する関数 */
var draw_point_line = function(x, y) {
  var fs = ctx.fillStyle;
  /* 補助点 */
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(x, y, 3, 0, Math.PI*2, false);
  ctx.fill();
  /* 補助線 */
  ctx.strokeStyle = "red";
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(370, y);
  ctx.stroke();
  /* */
  ctx.fillStyle = fs;
};
/* textBaselineにtopをセット  */
ctx.textBaseline = "top";
ctx.fillText('textBaseline="top" 日本語', 10, 10);
draw_point_line(10, 10);
/* textBaselineにhangingをセット */
ctx.textBaseline = "hanging";
ctx.fillText('textBaseline="hanging" 日本語', 10, 60);
draw_point_line(10, 60);
/* textBaselineにmiddleをセット */
ctx.textBaseline = "middle";
ctx.fillText('textBaseline="middle" 日本語', 10, 110);
draw_point_line(10, 110);
/* textBaselineにalphabeticをセット */
ctx.textBaseline = "alphabetic";
ctx.fillText('textBaseline="alphabetic" 日本語', 10, 160);
draw_point_line(10, 160);
/* textBaselineにideographicをセット */
ctx.textBaseline = "ideographic";
ctx.fillText('textBaseline="ideographic" 日本語', 10, 210);
draw_point_line(10, 210);
/* textBaselineにbottomをセット */
ctx.textBaseline = "bottom";
ctx.fillText('textBaseline="bottom" 日本語', 10, 260);
draw_point_line(10, 260);

[textBaselineプロパティの実際のサンプル]

ブラウザ対応状況

Firefox 3.5 は textBaseline プロパティに対応はしていますが、Safari 4 や Chrome 2, 3 と比べて、textBaseline の値の解釈が若干異なっています。

"hanging" 関しては、Firefox 3.5 の解釈が間違っているようです（本来ベースラインの下側に文字が表示されるべきところが、上に文字が表示される）。

"ideographic" については、逆に、Safari 4 や Chrome 2, 3 と比べて、Firefox 3.5 のほうが正しい解釈をしているようです。