その3 <TT>
<HTML> <HEAD> <TITLE>文書タイトル</TITLE> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;charset=x-sjis"> <SCRIPT LANGUAGE="JavaScript"> <!-- if(navigator.appVersion.indexOf("Mac") != -1){ if(navigator.appName.charAt(0)=="M" && navigator.appVersion.charAt(0)==4 && navigator.appVersion.indexOf("MSIE 5.") != -1){ document.write('<STYLE TYPE="text/css">') document.write("<!--TT {font-size:14px}//-->") document.write("</STYLE>") } } //--> </SCRIPT> </HEAD> <BODY> <BASEFONT SIZE=3> <SCRIPT LANGUAGE="JavaScript"> <!-- if(navigator.appVersion.indexOf("Win") != -1){ if(navigator.appName.charAt(0)=="M"){ document.write("<BASEFONT SIZE=4>") } }else if(navigator.appVersion.indexOf("Mac") != -1){ document.write("<BASEFONT SIZE=4>") if(navigator.appName.charAt(0)=="M" && navigator.appVersion.charAt(0)<=3){ document.write("<BASEFONT SIZE=5>") } } //--> </SCRIPT> <TT> …………ホームページの内容…………… </TT> </BODY> </HTML>
HPを見る時、私はよくソースを覗きます。ちょっと変わったレイアウトをしてるページなんかは特に。その経験からして、<TT>の指定をして文章を公開していらっしゃる方は少なくありません。
<TT>という指定は“等幅のフォントで表示して下さい”という意味です。早い話が<TT>と</TT>で囲まれた文章は、先の<FONT FACE="MS ゴシック">を指定した場合と同じような感じで表示されるのです。
<TT>を指定すれば、その機械ごとにちゃんと等幅の文字を表示してくれます。"MS ゴシック"があるかないかなんて、気にする必要はありません。万歳。これは便利です。
ところが…ここに大きな問題があります。実は<TT></TT>に囲まれた文章はIEで文字サイズが一まわり小さく表示されてしまうのです。ちなみにNNではそんな事はありません。
これは困りました。WinでもMacでも同じように表示される代わりにIEとNNの表示が違ってきてしまうのです。
■■■■■■■■■
そこでこの<TT>の文字サイズを調節する方法です。
まず<BASEFONT SIZE=3>。これが基本の文字サイズです。
次に<SCRIPT LANGUAGE="JavaScript">から</SCRIPT>まで。ここでやっているのはまず“WindowsのIEならば文字サイズを4にする”こと、です。if(navigator.appVersion.indexOf("Win") != -1)は「Winだったら」という意味です。次の行のif(navigator.appName.charAt(0)=="M")は「マイクロソフトのIEだったら」という意味。先に書いた通り、IEでは<TT>内の文字は一まわり小さく表示されるので基本サイズの3に対して、サイズを4にする訳です。
その次にしているのがMacだった場合、<BASEFONT SIZE=4>で文字サイズを4にします。そして“IEでVer3以下だったら文字サイズを5にする”。こうすることで<TT>内の文字サイズを4にするわけです。ではどうしてVer3以下だけの指定なのでしょう?
実はMac版のIEのVer4は<TT>内の文字が小さくならないのです。Win版Mac版合わせて、このバージョンだけの現象です。
では最新版のIE5はどうでしょう?もちろん<TT>内の文字は一回り小さな文字で表示されます。だからVer3以下と同じように文字サイズを5にしたいのですが…。困った事にIE5では<TT>内の文字が大きくなると、太字として表示されてしまう現象が出るのです。
これを避けるための指定が<SCRIPT LANGUAGE="JavaScript">から</SCRIPT>までの指定です。Mac版のIEVer5だったら、<TT>内の文字の大きさを14ピクセルで表示することを指定しています。ちょっと小さめの文字ですが、これ以上の大きさを指定すると太字になってしまうのです。ブラウザの仕様だとは思うのですが…どうしてこんな風になるのかすごく不思議です。
あとは本文を<TT>と</TT>で囲めばOKです。
■■■■■■■■■
ちょっとめんどくさい指定かもしれませんが、こうすることで読みやすい文章になるならやる価値はあると思います。実はこのページ、この指定が付けてあります。ちょっとソースを覗いてみて下さい。
■■■■■■■■■
ここまでこの文書を読んできた方で「やだな」と感じている方は多いと思います。そう、この<TT>の指定をするにせよ、MS ゴシックを指定するにせよ、解決できない問題があるのです。
実は句読点が一行の最後にあった場合、一文字前の文字を道連れにして次の行に表示されてしまうのです(これを"追いだし"と言います)。それだけならばまだいいのですが「〜だったのかっ!」というような文が行末にあった時に、"かっ!」"という4文字が次の行に追い出されてしまうのです(これはIEVer4の場合。撥音、エクスクラメーション、カッコの3つが行頭禁則文字と判定されているせいでしょう。NNの場合は多少マシで、撥音は行頭禁則されません)。特にこの文書のような半角英数字の混じった文章だと、"記号や,記号が追い出されて、行の終わりの改行がでこぼこ。…プロポーショナルフォントなら「しょうがないなあ」と思えるこのでこぼこも、なまじ大きさの揃った文字だけに余計にみっともなく感じられます。
とは言うものの、<TT>やフォントの指定をすれば間違いなく文章は読みやすくなります。今まで使った事のない人はぜひ一度この指定をしてみて下さい。格段に読みやすさが違いますよ。