現在、HTMLを作成しているのですが、
画面で入力した情報を取得して、
PDFに反映させるといったことをしています。

そこで、テキストエリアに入力したままを
PDFに出力する箇所があるのですが、
テキストエリアのcolsで指定したバイト数よりも
全角文字が多く入ってしまうので、
PDFと画面で若干ずれが生じています。

現在はcols88でフォントはMSゴシックを指定しています。
この場合ですと、1バイト文字()は88バイト(88文字)入るのですが、
2バイト文字(全角文字)だと94バイト(47文字)
入ってしまいます。
フォントはゴシックとほぼ同じ種類だったら
問題ないので、フォントで対応できる場合も
ご教授ください。
又、この問題はどうしようもない問題とご存知でしたら、
そちらもご教授ください。
よろしくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

「MS ゴシック」が、完全な等幅フォントではない(全角と半角の名場が異なる)ことが原因です。


ただし、フォントサイズが 1.5 の倍数の時には、完全な等幅になるようなので、フォントサイズを 12 あたりに設定してやるとよいでしょう。

 <TEXTAREA style="font:12px 'MS ゴシック'" cols="88"></TEXTAREA>

このようにしておけば、全角/半角が混じっても、88バイト分しか入らなくなります。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

1.5の倍数時に等幅なるというので
問題が解決しました。
フォントサイズを9にすることにしました。
助かりました、ありがとうございます。

お礼日時:2002/02/25 19:24

こんにちは。

COLSとかかれているからには、<TEXTAREA>のほうですよね?
となると、MAXLENGTHで指定するわけにもいきませんね。
(しかも、MAXLENGTHの解釈はIEとNNで異なり、文字数だったりバイト数
だったりするので汎用性がないですし・・・)

試していないので申し訳ないのですが、<TT>でうまくいかないでしょうか?
TeleType、等幅フォントとするタグです。
プロポーショナルフォントを使うと、どうしても1バイト文字2つと2バイト文字1つ
の幅が同じにはならないと思いますので。

#フォントの見栄えが変わってしまいますが・・・

この回答への補足

ご回答ありがとうございます。

ご教授頂いた<TT>を以下のように試したのですが、
<TT>タグがきかないようです。
【試したHTML】
<TT><TEXTAREA></TEXTAREA></TT>

そこで、少し<TT>を試したところ
ラベル系の文字に効果が出るようでした。
しかし、
12345678901234567890
あいうえおかきくけこ
と<TT>タグ付のラベルで試したところ
若干ずれが生じるみたいです。

他の方法がございましたら、ご教授お願い致します。

補足日時:2002/02/25 15:45
    • good
    • 0

テキストエリアに、


 MAXLENGTH=n(入力可能な文字数)
 を追加して下さい。

<INPUT TYPE="TEXT" NAME="UID" VALUE='' SIZE=12 MAXLENGTH=8>
 で、半角で8文字まで入力可能になります。

この回答への補足

早速のご回答ありがとうございます。
また、質問の内容が曖昧ですいませんでした。

テキストフィールドであれば
MAXLENGTHを使用して制限が可能ですが、
テキストエリアだと無理だと思います。
また、MAXLENGTHの場合は、文字数になってしまうので、
全角文字でもMAXLENGTHで指定した文字数まで
入力可能になってしまいます。
今回はバイト数で制限したい状態です。
曖昧で申し訳ございませんが、
よろしくお願い致します。

補足日時:2002/02/25 14:51
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテキストエリアの幅を10桁までにしてスクロールさせないようにしたい

タイトルのままなんですが、可能でしょうか?
<textarea name="textarea" cols="40" rows="10">テスト</textarea>

あと、テキストエリアに<pre>タグをつけると改行が入ってしまい、
1行分テキストエリアから離れてしまいます・・・。
テストタイトル<br>
<pre><textarea name="textarea" cols="40" rows="10">テスト</textarea></pre>

すみません、どなたかわかる方いらっしゃいますか?
教えてください(^^

Aベストアンサー

サンプルを作ってみました。
10行入力されている時に改行が入力できなくなります。IEとFireFoxで動作確認しました。
FireFoxでは、textareaでrows="10"と指定していても9行分しかエリアが確保されないようなのでスクロールバーがでてしまいますが、10行で改行入力が制限されるのは同じです。まあ、その辺は、適当に直せばいいかと存じます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<script language="JavaScript">
<!--
window.document.onkeypress=lineCheck;
function lineCheck(e){
var ta=document.getElementById("TEXT");
var row=ta.getAttribute("rows");
var r=(ta.value.split("\n")).length;
if(document.all){
if(r>=row && window.event.keyCode==13){ //keyCode for IE
return false; //入力キーを無視
}
} else {
if(r>=row && e.which==13){ //which for NN
return false;
}
}
}
//-->
</script>
<title>textareaを10行までしか入力できなくする</title>
</head>
<body>
<h1>textareaは10行までしか入力できない</h1>
<textarea ID="TEXT" cols="40" rows="10" style="overflow:hidden">
</textarea>
</body>
</html>

サンプルを作ってみました。
10行入力されている時に改行が入力できなくなります。IEとFireFoxで動作確認しました。
FireFoxでは、textareaでrows="10"と指定していても9行分しかエリアが確保されないようなのでスクロールバーがでてしまいますが、10行で改行入力が制限されるのは同じです。まあ、その辺は、適当に直せばいいかと存じます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; char...続きを読む

Q[Javascript]TEXTAREAで改行させるには?

こんにちは。
name="memo" となっている TEXTAREA があるとします。

document.myForm.memo.value = "aaa";
としましたら aaa が TEXTAREA に表示されます。

今回は・・・
aaa
bbb
というように、間に改行を入れて表示させたいと考えています。

"aaa" と "bbb" の間に改行のコマンド的なものを挟めばいいとは思うのですが・・・

わかりません・・・宜しくお願い致します。

Aベストアンサー

こんにちは

document.myForm.memo.value = "aaa\nbbb";
とすれば良いです。
\nは改行コードです。

ご確認ください。

QTEXTAREAのスクロールバーを消したいのですが

TEXTAREAの大きさに文字数が収まっているうちは、
TEXTAREA内の、縦のスクロールバーが表示されないようにしたいのですが、
そのようにできるのでしょうか?
ご存知の方、教えてください!

Aベストアンサー

スタイルシートでoverflow:autoを設定するだけ大丈夫だと思う。

<style type="text/css">
<!--
textarea {overflow:auto;}
-->
</style>
↑<head>~</head>間に。

Q文字を固定したいのですが…

タグについて質問です。
現在サイトを改装しているのですが、文字の位置の固定がどうしても出来ません。
右・左・真ん中という固定ではなく、上・下という固定です。
ページの一番下側に固定したいのですが、どのようにやるのでしょうか…?
検索しても画像の固定の仕方しか出てこなくて困っています。
当方かなりの初心者ですが、何方か教えて下さると助かります。

Aベストアンサー

ブロック要素で囲み、CSSで位置を指定すれば良いんじゃないかな。

<div style="position:absolute; top:0%;left:0%;">最上段左</div>
<div style="position:absolute; top:0%;right:50%;">最上段中央</div>
<div style="position:absolute; top:0%;right:0%;">最上段右</div>
<div style="position:absolute; bottom:0%;left:0%;">最下段左</div>
<div style="position:absolute; bottom:0%;right:50%;">最下段中央</div>
<div style="position:absolute; bottom:0%;right:0%;">最下段右</div>

Qform input テキストを上下中央に表示したい

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style><!--

form input {
margin-bottom:10px;
color:#fff;
border:none;
font-size:12px;
}

form input.mlmg-text {
width:150px; height:26px;
background-color:green;
padding:2px 5px;
text-align:center;
vertical-align:center;
}

form input.mlmg-buttton {
width:50px; height:30px;
color:#fff; background-color:blue;
vertical-align:bottom;
}
--></style>
</head>

<body>
<form method="post">
<input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい"><input type="button" class="mlmg-buttton" name="join" value="GO"><br />
<input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう"><input type="button" class="mlmg-buttton" name="resign" value="GO">
</form>
</body>
</html>

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

...続きを読む

Aベストアンサー

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<style type="text/css">
<!--
ul.hoge {
list-style: none;
margin: 0;
padding: 0;
}
ul.hoge li {
zoom: 100%;
margin-bottom: 10px;
}
ul.hoge li:after {
display: block;
clear: left;
height: 0;
visibility: hidden;
content: "";
}
ul.hoge input {
float: left;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
border: none;
color: #fff;
font-size: 12px;
}
ul.hoge input.mlmg-text {
width: 150px;
height: 1em;
padding: 0.5em;
background-color: green;
}
ul.hoge input.mlmg-buttton {
width: 50px;
height: 2em;
background-color: blue;
}
-->
</style>
</head>

<body>

<form method="post" action="#">
<ul class="hoge">
<li><input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい" /><input type="button" class="mlmg-buttton" name="join" value="GO" /></li>
<li><input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう" /><input type="button" class="mlmg-buttton" name="resign" value="GO" /></li>
</ul>
</form>

</body>
</html>
----------------------------------------------------------------------
ポイントは以下の様な点です。

・inputをulの子要素としてマークアップ(内容を見たところ、送信ボタンのリストの様ですので)。
・inputの余白や行の高さ等を初期化して、textタイプとbuttonタイプのベースのスタイルを揃える。
・inputをfloatで横並びにさせるので、親要素のliで回り込み状態をクリア。
・textタイプとbuttonタイプの高さを揃える。高さは相対的に計算ができる様にemで指定。
buttonタイプの場合は描画領域の高さに対して自動的にセンタリングされるので2emとし、textタイプの場合は要素(valueの値の文字部分)の高さを1emと考え、残りの1emを半分づつ上下paddingとして追加。

いかがでしょうか?

※今回の場合、"vertical-align: middle;"はinputの描画領域(ボックス)とvalueの値の文字部分との位置関係を示すものではないので、実現したいスタイルの為に適切なプロパティではありません。

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" ...続きを読む


人気Q&Aランキング