(MS P ゴシック)によって、
表示幅ぴったりのTextareaを作って、文字列を表示したいと考えています。
たとえば Hatena という文字列を、ギリギリの大きさのTextArea内に表示したいのです。
そのための参考になるコードか、やりかたを教えていただければと思います。
よろしくお願いいたします。
※「勉強しろ」「本を読め」等、一般的すぎる回答は避けてください
ちょっと考えてみました。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>
JavaScriptだけでは、プロポーショナルフォントの幅を取得することができません。
Flashを介して幅を取得するのはどうでしょうか?
一例を紹介します(ただし、IE以外での動作は保証しませんが)
//Flashムービーの名前をswfMovie, //幅(ピクセル)を格納したFlashの変数の名前をfWidth, //テキストエリアのIDをobjTAとする document.getElementById("objTA").style.width = window.swfMovie.GetVariable("fwidth") + "px";
van-dine様、ありがとうございます。やはり難しそうですか・・・。
いちおう質問自体は継続させて頂きますが、参考となるご意見ありがとうございます!!
(なかなかかわいいアイコンですね!!)
ちょっと考えてみました。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様、お見事でした。こちらでもばっちり動きました。
大感謝です!! さすが、はてなはすごい人だらけですね!!
GoldenDawn様、お見事でした。こちらでもばっちり動きました。
大感謝です!! さすが、はてなはすごい人だらけですね!!