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

文字列の長さに応じてフォントサイズを縮小したり、省略表示したりできないかと思って調べてみました。
canvasのmeasureText()を使う方法と、DOMのoffsetWidthの値を使う方法があるようです。

canvasを使う方法

　HTML5のcanvasを使いますので、canvas要素に非対応なIE8以前ではexcanvas.jsが必要です。

　IEとexcanvasのバージョンの組み合わせ次第で動かない可能性もあります。

手順：
(1)まずHTML中にcanvasを用意する

<canvas id="canvas" width="0" height="0" style="visibility:hidden;position:absolute;"></canvas>

Firefox9ではstyleでdisplay:none;としても大丈夫でしたが、IE+excanvasでは駄目だったので、hidden指定のうえ、positionをabsoluteにして浮かせておきます。

(2)幅を測定する処理は以下のように記述します。

function strWidth(str) {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
    var metrics = context.measureText(str);
    return metrics.width;
  }
  return -1;
}

context.font = でフォントの指定も必要ですね。

DOMのoffsetWidthの値を使う

こちらを参考にしました。→http://d.hatena.ne.jp/Psychs/20070525/1180077269

手順：
(1)まずHTML中に測定に使用するspanを用意する

<span id="ruler" style="visibility:hidden;position:absolute;white-space:nowrap;"></span>

折り返しが発生すると測定結果が狂うのでwhite-space:nowrap;にした方がいいです。
必要に応じてフォントなどの条件指定も。

(2)幅を測定する処理は以下のように記述します。（jQuery使用してます）

function strWidth(str) {
  var e = $("#ruler");
  var width = e.text(str).get(0).offsetWidth;
  e.empty();
  return width;
}

私の環境(Firefox9)ではどちらの方法でも同じ値が取得できました。
最初、違う値が出たので「あれ？」と思ったら、フォントを合わせるのを忘れてました……。