2018/12/10更新

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

このエントリーをはてなブックマークに追加            

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



何がしたいのか

例えば、「あいうえお」という文字列があった場合に、それをレンダリングする際に、何pxの横幅が必要かを計算したいというお話です。計算する上で、font-sizeletter-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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。