サイト内検索

textBaseline プロパティ

構文

context . textBaseline [ = value ]

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

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

仕様

textBaseline IDL 属性は、取得時においては、現在値を返さなければいけません。セット時においては、もしこの値に top, hanging, middle, alphabetic, ideographic, bottom のいずれかがセットされれば、新たな値に変更されなければいけません。そうでなければ、無視されなければいけません。コンテキストが生成されると、textBaseline 属性は 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プロパティのサンプル

このサンプルは、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 Safari Chrome Opera IE ExplorerCanvas
2 × 2 × 1 × 9.2 × 9 ○ 0002 ×
3 × 3 × 2 ○ 9.5 ×   3 ×
3.5 ○ 4 ○ 3 ○ 10 ×    
3.6 ○ 5 ○ 6 ○ 10.60 ○    

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

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

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