Javascriptで、プロポーショナルフォント

(MS P ゴシック)によって、
表示幅ぴったりのTextareaを作って、文字列を表示したいと考えています。

たとえば Hatena という文字列を、ギリギリの大きさのTextArea内に表示したいのです。

そのための参考になるコードか、やりかたを教えていただければと思います。
よろしくお願いいたします。

※「勉強しろ」「本を読め」等、一般的すぎる回答は避けてください

回答の条件
  • 1人1回まで
  • 登録:2008/10/20 17:44:27
  • 終了:2008/10/21 01:24:14

ベストアンサー

id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812008/10/21 00:25:10

ポイント300pt

ちょっと考えてみました。IE6、Firefox、Opera、WebKit(Safari、Google Chrome) で確認。

ただし、Firefox と Opera では textarea の中身が日本語だとうまく行きません。

(何とかなりそうな気もするけど、もう寝るのでとりあえずここまで)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <style type="text/css">
      textarea { font-family : "MS Pゴシック" ; white-space : pre ; }
    </style>
    <script type="text/javascript">
      <!--
        function $(id) { return document.getElementById(id) ; }

        onload = function() {

          // For IE or WebKit
          if (navigator.appVersion.match(/AppleWebKit|MSIE/)) {
            for (var i = 0; ; ++i) {
              $('ta').style.width = i + 'px' ;
              if ($('ta').scrollHeight == $('ta').clientHeight) break ;
            }
          }

          // For Firefox
          if (navigator.userAgent.match(/Firefox/)) {
            $('ta').style.width = '0px' ;
            $('ta').style.width = $('ta').scrollWidth + 'px' ;
          }

          // For Opera
          if (navigator.appName == 'Opera') {
            $('ta').style.width = '0px' ;
            var pw = $('ta').scrollWidth ;
            for (var i = pw; ; ++i) {
              $('ta').style.width = i + 'px' ;
              if ($('ta').scrollWidth > pw) {
                $('ta').style.width = (i-1) + 'px' ;
                break ;
              }
            }
          }
        }
      //-->
    </script>
  </head>

  <body>
    <form>
      <textarea rows="1" id="ta">Hatena</textarea>
    </form>
  </body>
</html>
id:lionfan

GoldenDawn様、お見事でした。こちらでもばっちり動きました。

大感謝です!! さすが、はてなはすごい人だらけですね!!

2008/10/21 01:23:52

その他の回答(1件)

id:van-dine No.1

van-dine回答回数108ベストアンサー獲得回数112008/10/20 19:12:25

ポイント20pt

JavaScriptだけでは、プロポーショナルフォントの幅を取得することができません。

Flashを介して幅を取得するのはどうでしょうか?

一例を紹介します(ただし、IE以外での動作は保証しませんが)

//Flashムービーの名前をswfMovie,
//幅(ピクセル)を格納したFlashの変数の名前をfWidth,
//テキストエリアのIDをobjTAとする
document.getElementById("objTA").style.width
  = window.swfMovie.GetVariable("fwidth") + "px";
id:lionfan

van-dine様、ありがとうございます。やはり難しそうですか・・・。

いちおう質問自体は継続させて頂きますが、参考となるご意見ありがとうございます!!

(なかなかかわいいアイコンですね!!)

2008/10/20 19:40:17
id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812008/10/21 00:25:10ここでベストアンサー

ポイント300pt

ちょっと考えてみました。IE6、Firefox、Opera、WebKit(Safari、Google Chrome) で確認。

ただし、Firefox と Opera では textarea の中身が日本語だとうまく行きません。

(何とかなりそうな気もするけど、もう寝るのでとりあえずここまで)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <style type="text/css">
      textarea { font-family : "MS Pゴシック" ; white-space : pre ; }
    </style>
    <script type="text/javascript">
      <!--
        function $(id) { return document.getElementById(id) ; }

        onload = function() {

          // For IE or WebKit
          if (navigator.appVersion.match(/AppleWebKit|MSIE/)) {
            for (var i = 0; ; ++i) {
              $('ta').style.width = i + 'px' ;
              if ($('ta').scrollHeight == $('ta').clientHeight) break ;
            }
          }

          // For Firefox
          if (navigator.userAgent.match(/Firefox/)) {
            $('ta').style.width = '0px' ;
            $('ta').style.width = $('ta').scrollWidth + 'px' ;
          }

          // For Opera
          if (navigator.appName == 'Opera') {
            $('ta').style.width = '0px' ;
            var pw = $('ta').scrollWidth ;
            for (var i = pw; ; ++i) {
              $('ta').style.width = i + 'px' ;
              if ($('ta').scrollWidth > pw) {
                $('ta').style.width = (i-1) + 'px' ;
                break ;
              }
            }
          }
        }
      //-->
    </script>
  </head>

  <body>
    <form>
      <textarea rows="1" id="ta">Hatena</textarea>
    </form>
  </body>
</html>
id:lionfan

GoldenDawn様、お見事でした。こちらでもばっちり動きました。

大感謝です!! さすが、はてなはすごい人だらけですね!!

2008/10/21 01:23:52

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません