JavaScript で文字列の幅を取得する

JavaScript

ブラウザ上に表示される文字列の幅を取得する必要があり、以下のサイトにたどり着いた。

javascriptで文字列の描画幅を取得する方法 - Qiita

最小のサンプルにすると、以下のようになる。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
function strWidth(str) {
  var e = $("#ruler"),
      width = e.text(str).get(0).offsetWidth;
  e.empty();
  return width;
}
</script>
</head>
<body>
<span id="ruler" style="visibility:hidden;position:absolute;white-space:nowrap;"></span>
</body>
</html>

ところが、主要なブラウザで確認したところ、Chrome のみ期待通りに動作しない。

Firefox

IE

Chrome

Chrome の場合、どうやら span タグにあらかじめ文字列が入っていないと期待通りに動作しないようだ。

つまり、以下のように修正する。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
function strWidth(str) {
  var e = $("#ruler"),
      width = e.text(str).get(0).offsetWidth;
  e.text("&nbsp;"); // NBSP を入れておく
  return width;
}
</script>
</head>
<body>
<!-- NBSP を入れておく -->
<span id="ruler" style="visibility:hidden;position:absolute;white-space:nowrap;">&nbsp;</span>
</body>
</html>

ここでは HTML、JavaScript 共に "&nbsp;" を入れているが、これが " " だとやはり期待通りに動作しない。

Chrome のバージョンは 29.0.1547.57 だ。とりあえず NBSP が入っていても問題ないので、Chrome 対応のコードを採用することにしよう。