[Javascript] 任意の文字列で、レンダリングに必要な横幅を計算する

こんにちは、@yoheiMuneです。
今日は、任意の文字列に対して、その横幅がHTML上で何pxになるかを計算したい場合の、実装についてブログに書きたいと思います。

何がしたいのか

例えば、「あいうえお」という文字列があった場合に、それをレンダリングする際に、何pxの横幅が必要かを計算したいというお話です。計算する上で、font-sizeやletter-paddingなどのcssの適用結果も考慮して、表示横幅を計算します。

方法1：spanタグを用いて、文字列の横幅を計算する

さっそく実装方法です。spanタグを生成して、それに必要なスタイルなどを設定し、spanの長さを計算します。

// spanを生成.
var span = document.createElement('span');

// 現在の表示要素に影響しないように、画面外に飛ばしておく.
span.style.position = 'absolute';
span.style.top = '-1000px';
span.style.left = '-1000px';

// 折り返しはさせない.
span.style.whiteSpace = 'nowrap';

// 計測したい文字を設定する.
span.innerHTML = 'あいうえお';

// 必要に応じてスタイルを適用する.
span.style.fontSize = '14px';
span.style.letterSpacing = '2em';

// DOMに追加する（追加することで、ブラウザで領域が計算されます）
document.body.appendChild(span);

// 横幅を取得します.
var width = span.clientWidth;
console.log('width:', width)

// 終わったらDOMから削除します.
span.parentElement.removeChild(span);

これで文字の横幅を計算することができました。

方法2：canvasを用いて、文字列の横幅を計算する

方法1に比べて設定可能なスタイル(css)は少ないですが、canvasを使っても、計測することができます。

// canvasを生成.
var canvas = document.createElement('canvas');

// コンテキストを取得.
var context = canvas.getContext('2d');

// フォントを指定.
context.font = '14px';

// 計測する.
var metrics = context.measureText('あいうえお');

// 横幅を取得する.
var width = metrics.width;
console.log('width:', width);

最後に

今日は、JavaScriptで文字列の横幅を計算する方法でした。ゲームやスケジュール表など、複雑なものを作るとき以外は使わないかもしれませんが、メモとしても残しておきたいのでブログに書きました。

最後になりますが本ブログでは、フロントエンド、Python、PHP、サーバー、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！