任意の文字列で、レンダリングに必要な横幅を計算するTweetこんにちは、@yoheiMuneです。今日は、任意の文字列に対して、その横幅がHTML上で何pxになるかを計算したい場合の、実装についてブログに書きたいと思います。何がしたいのか例えば、「あいうえお」という文字列があった場合に、それをレンダリングする際に、何pxの横幅が必要かを計算したいというお話です。計算する上で、font-sizeやletter-paddingなどのcssの適用結果も考慮して、表示横幅を計算します。方法1:spanタグを用いて、文字列の横幅を計算するさっそく実装方法です。spanタグを生成して、それに必要なスタイルなどを設定し、spanの長さを計算します。終わったらDOMから削除します.span.parentElement.removeChild(span);これで文字の横幅を計算することができました。方法2:canvasを用いて、文字列の横幅を計算する方法1に比べて設定可能なスタイル(css)は少ないですが、canvasを使っても、計測することができます。width);最後に今日は、JavaScriptで文字列の横幅を計算する方法でした。ゲームやスケジュール表など、複雑なものを作るとき以外は使わないかもしれませんが、メモとしても残しておきたいのでブログに書きました。最後になりますが本ブログでは、フロントエンド、Python、PHP、サーバー、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。onclickなどでbind関数を使って、任意の値をイベントハンドラーに渡すもしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。Munesada)です。世の中をさらに便利に面白くをモットーにWeb界隈で活動しています。Now機械学習/AI/自然言語処理のホットな"今"をお届けするキュレーションメディアです。