DIVの中にline-hightを設定したテキストを入れた時と同じ場所になるようにDIVと同じサイズのCanvasの中に文字を書き込みたい

Question

下記サンプル最後の 800.64 がline-height割合で
この割合を調整してベースラインの位置に来るように調整してあるのですが、font-sizeを変えると0.64では一致しなくなります。
ベースラインを計算する方法を教えてください。
どのようなfont-size, line-height, フォント、主要なブラウザでも一致させれるようにしたいです。
https://codepen.io/as124680/pen/wvdwWyO

Answer 1

試してないですが、

line-height 80px に対して、actualBoudingBoxAscent + actualBoundingBoxDescent の値でセンタリングをして、上の座標に actualBoudingBoxAscent を足した値をベースラインとして fillText() に指定するとどうでしょうか。

fontBoudingBoxAscent fontBoundingBoxDescent の方が正確なはずですが、Firefox が未対応のようです。

Comments

[abroad128]

すみません、理解できなかったので補足していただけると助かります。

[int32_t]

何が理解できないのか教えて下さい。actualBoudingBox* の値の入手方法はわかりますか?

[abroad128]

はい、それに関してはわかります。
line-height に対して、actualBoudingBoxAscent + actualBoundingBoxDescent の値でセンタリング
の部分が分からないです。

[int32_t]

fontHeight = actualBoundingBoxAscent + actualBoundingBoxDescent だとして、
fontHeight が line-height の上辺下辺の中央に来るように位置を決める、ということです。line-height の上辺から (line-height - fontHeight) / 2 下が fontHeight の上辺、line-height の下辺から (line-height - fontHeight) / 2 上が fontHeight の下辺ですね。

で、fontHeight の上辺から actualBoundingBoxAscent だけ下の座標がベースラインです。

Answer 2

一番ダメなのは

ctx.fillText("01234", 0, 150 + 0800.64);

「0」にいくつを掛けても0です

あわせて
「ctx.textBaseline = "bottom";」を除外すれば想定に近いものになると思います

Comments

[abroad128]

申し訳ございません。
デバッグ時のコードをのせてしまいました。
bottomと0*は本来無かった物なので修正しておきました。

[yambejp]

ちゃんと計算してませんが、ざっくりと・・・

36pxのとき→ctx.fillText("01234", 0, 190+36/3);
100pxのとき→ctx.fillText("01234", 0, 190+100/3);

みたいな感じで

[abroad128]

回答ありがとうございます。
試してみたのですが、フォントによって一致するときの「3」の部分が変わるみたいです。。。