人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptで、プロポーショナルフォント
(MS P ゴシック)によって、
表示幅ぴったりのTextareaを作って、文字列を表示したいと考えています。

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

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

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

●質問者: lionfan
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:Hatena JavaScript ギリギリ コード ゴシック
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● van-dine
●20ポイント

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

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

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

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

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

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

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


2 ● GoldenDawn
●300ポイント ベストアンサー

ちょっと考えてみました。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>
◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ