1. ホーム
  2. javascript

[解決済み] JavaScriptで文字幅を計算する

2022-03-19 18:13:37

質問

JavaScriptで文字列の幅を計算したいのですが、どうすればいいですか?等幅の書体を使わなくても可能でしょうか?

内蔵されていない場合は、各文字の幅のテーブルを作成することしか考えられませんが、これはかなり無理があります。 ユニコード と異なる文字サイズ(そしてすべてのブラウザー)。

解決方法は?

以下のようなスタイルでDIVを作成します。JavaScriptで、測定しようとするフォントサイズと属性を設定し、DIVに文字列を入れ、DIVの現在の幅と高さを読み取ります。DIVは内容に合わせて伸縮し、サイズは文字列のレンダリングサイズと数ピクセル以内に収まるでしょう。

var fontSize = 12;
var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px"

console.log(height, width);
#Test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap; /* Thanks to Herb Caudill comment */
}
<div id="Test">
    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>