テキスト描画の基準位置を変更する(textBaseLine) [html5 の Canvas を使ってみる：第廿八回]

テキストを描画するときの基準となる位置を textBaseLine で指定できるようなので、やってみた。

★html 側

<canvas id="textBaseline"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: textBaseline で 2 次元描画を行うことの定義
  var c = document.getElementById("textBaseline").getContext('2d');

// textBaseLine を bottom に指定
  c.textBaseline = "bottom";
// 「あいう漢字 abcdefgAZ」という文字を、
// fillText(); で配置
  c.fillText("あいう漢字 abcdefgAZ", 10, 80);
}

すると、こうなる。textBaseLine を指定したテキストの上に何も指定しないテキストも一緒に描画し、テキストを配置する座標を通る水平線を補助線として引いてみた。ちなみに、判りやすいようにテキストには 1.5em と fantasy を指定している。


★ブラウザごとの解釈

☆Firefox 3.6.3、Opera 10.53
W3C の画と比べても正常動作と思われる。Opera はやや下に来ているが。。。
☆Safari 5.0、Chrome 5.0.375.70
W3C のウェブページに掲載されている画と説明文を比較すると、bottom は「The bottom of the em square」となっているが、各ブラウザの実行結果はこの画の bottom of bounding box となっているようだ。WebKit 系の Safari と Chrome はさらに下に来てしまっているように感じる。

次に、ideographic を指定する。ideographic は表意文字で、いわば漢字のこと。

// textBaseLine を ideographic に指定
  c.textBaseline = "ideographic";

★ブラウザごとの解釈

☆Firefox 3.6.3、Opera 10.53
W3C の画と比べても正常動作だと思われる。
☆Safari 5.0、Chrome 5.0.375.70
bottom と同じような描画になってしまっている。

次に、alphabetic を指定する。

// textBaseLine を alphabetic に指定
  c.textBaseline = "alphabetic";

★ブラウザごとの解釈

☆Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53
W3C の画と比べても正常動作だと思われる。

次に、middle を指定する。

// textBaseLine を middle に指定
  c.textBaseline = "middle";

★ブラウザごとの解釈

☆Opera 10.53
「Z」の文字を見れば、真ん中かなと思う。
☆Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3
なんかどれも真ん中っぽくないけど。。。

次は、hanging。

// textBaseLine を hanging に指定
  c.textBaseline = "hanging";

★ブラウザごとの解釈

☆Safari 5.0、Chrome 5.0.375.70、Opera 10.53

W3C の画だと、文字の上辺少し下に線が来ている。hang の意味を考えると、そんな解釈になる気もする。吊るすってことなので、物体を吊るすときは物体全部が吊るすもの（紐など）より下にあるのではなく、物体の上から少し下に吊るすものの支点がある感じだから。んで、WebKit 系は文字の上に来ている。W3C の説明で言う top of em square ってことかな。Opera は少し上だが。。。
☆Firefox 3.6.3
これは如何に。文字の下に線が来とるではないか。

最後に、top。

// textBaseLine を top に指定
  c.textBaseline = "top";

★ブラウザごとの解釈

☆Safari 5.0、Chrome 5.0.375.70、Opera 10.53
これも、W3C の説明で言う top of bounding box になってるみたい。
☆Firefox 3.6.3
近いけど、これが hanging って感じ。

W3C；
4.8.11 The canvas element — HTML 5