QLOOKの記事を書いていて、やたらと長いソースを貼ることが多く、どうしても気になったので、再度チャレンジしてみた。
その過程で「PRE CODE はみ出す」で検索したら、前回の途中で投げ出した記事が一番上に出てきたからというのも、一つの理由ではある。
期待して見て下さった方々には申し訳ないことをしてしまった。
そんな訳で今回は基本に戻って、自分でもネットサーフィン以外の調査をして、一つの結論に至ることとなった。
まず、<PRE>を使わないという話は無しにした。
やはり<PRE><CODE>というのは主流であるし、今までもそれで書いてきているので変更が面倒だからである。
ところで話が少しそれるが、「<PRE><CODE>が正しい」という記述をいくつかのサイトで見たのだが、それはどこで定義された正しいなのだろうか？
実は私は今まで、<PRE><CODE>ではなく、<CODE><PRE>で書いてきた。
これは何も考えずに書いてきたのではなく、素人の自分なりに考えてやってきた。
PREはPreformatted Textで整形済み文書である。
自分にとって整形した文書というのは、プログラムソースそのものであり、<CODE>はその中に含まれるものではないと考えるのである。
自分の頭の中での階層を例えるなら<CODE>は箱で、<PRE>はアルミホイル、プログラムソースはバターとする。
HTMLという部屋に作ったバターを置く際、生のまま置いておくのは汚れてしまい、ナンセンスなので包装をする。
箱(<CODE>)に直接バターを入れることもできるが、それだと汚くなってしまうので、アルミホイル(<PRE>)で包んだ状態で箱に入れる。
そう、アルミホイル(<PRE>)はバター(プログラムソース)の状態・体裁を守るためのもので、箱(<CODE>)はそれがバターであると示す外装のようなイメージなのである。
いや、こんな訳の分からない馬鹿な例え方をして、「W3Cにこう書いてある」と言われてしまえば、一蹴されるだけなのだが。
同じ考えなら「じゃあ<PRE>は(本来のソースの)コードじゃないのに、<CODE>の中に入れていいのか」という意見も生まれるし。
誰か詳細を知っている方がいたら教えて欲しい。
さて、順序はともかく<PRE>を使うと決めたとして、そもそもなぜ自動改行されないのか。
どんな場合に自動改行されないのかを調べていくうちに、なんとなくだが分かってきた。
調べる方法はいたって簡単。
「あああああああああ」とか「aaaaaaaaaaaa」という長い文に対して、スペースの有無、<PRE>の有無、CSSの指定の有無の全パターンを書いたHTMLファイルを作成。
ちなみにCSSの有無とは、有名な<PRE>の改行指定。
/* 改行対策 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
このHTMLファイルをFirefox2.0.0.16とIE6.0で調べた。
自分で使っているブラウザしか使っていなくて申し訳ない。
アクセス解析見て、「もう8割ぐらい3.0に移ってるんだぁ」と思いながら、2.0系列を使う日々です。
ちなみにうちの訪問者はIE50%、FF30%、Opera6%、携帯5.6%という感じ。
ブラウザ依存の問題は、こういう環境調査の結果も反映して考えるべきですね。
さて、実際に作ったHTMLソースもここで載せておきます。
<html>
<head>
<style TYPE="text/css">
<!--
pre{
padding:3px;
border:1px solid #333333;
}
pre.kai{
/* 改行対策 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
-->
</style>
</head>
<body>
<h1>スタイルシート指定なし</h1>
<h2>日本語</h2>
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<pre>
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</pre>
<h2>英語</h2>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<pre>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>
<h2>日本語 スペース有</h2>
あああああ あああああ あああああ あああああああああ あああ あああ あああああああああああああああ あああああ ああああああ ああああ あ ああああ あああ あああ あああああ あああああああ ああああ あああああ あああああ あああ ああああああ あああ あああああ ああああああああああ ああ あああああ
<pre>
あああああ あああああ あああああ あああああああああ あああ あああ あああああああああああああああ あああああ ああああああ ああああ あ ああああ あああ あああ あああああ あああああああ ああああ あああああ あああああ あああ ああああああ あああ あああああ ああああああああああ ああ あああああ
</pre>
<h2>英語 スペース有</h2>
aaaa aaaaaaaa aaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaa aaaaa aaaaaaaaaaaaa aaaaa aaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaa aaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaa aaaaaaa aaa aaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa
<pre>
aaaa aaaaaaaa aaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaa aaaaa aaaaaaaaaaaaa aaaaa aaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaa aaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaa aaaaaaa aaa aaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa
</pre>
<h1>スタイルシート指定あり</h1>
<h2>日本語 スペースなし</h2>
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<pre class="kai">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</pre>
<h2>英語 スペースなし</h2>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<pre class="kai">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>
<h2>日本語 スペース有</h2>
あああああ あああああ あああああ あああああああああ あああ あああ あああああああああああああああ あああああ ああああああ ああああ あ ああああ あああ あああ あああああ あああああああ ああああ あああああ あああああ あああ ああああああ あああ あああああ ああああああああああ ああ あああああ
<pre class="kai">
あああああ あああああ あああああ あああああああああ あああ あああ あああああああああああああああ あああああ ああああああ ああああ あ ああああ あああ あああ あああああ あああああああ ああああ あああああ あああああ あああ ああああああ あああ あああああ ああああああああああ ああ あああああ
</pre>
<h2>英語 スペース有</h2>
aaaa aaaaaaaa aaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaa aaaaa aaaaaaaaaaaaa aaaaa aaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaa aaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaa aaaaaaa aaa aaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa
<pre class="kai">
aaaa aaaaaaaa aaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaa aaaaa aaaaaaaaaaaaa aaaaa aaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaa aaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaa aaaaaaa aaa aaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa
</pre>
</body>
</html>
本当は本文に載せようかちょっと迷った。
だって、↑この時点でどういう対策に決めたのかネタバレしてるし。
「スクロールかよ……」と思わずに読み進めてください。
なぜそうしたのかが分かります。
実際、このHTMLのページがどんな風になるかはここ↓
http://blog-imgs-30.fc2.com/r/u/n/run800m/kaigyou.html
ダウンロードするなり、色んなブラウザで見るなりしてみて下さい。
で、実験結果です。自動改行したものは○、しなかったものは×です。
| 要素 | スタイル指定 | 言語 | スペース | FF | IE | | なし | なし | 日本語 | なし | ○ | ○ | | あり | ○ | ○ | | 英語 | なし | × | × | | あり | ○ | ○ | | PRE | なし | 日本語 | なし | × | × | | あり | × | × | | 英語 | なし | × | × | | あり | × | × | | あり | 日本語 | なし | ○ | ○ | | あり | ○ | ○ | | 英語 | なし | × | ○ | | あり | ○ | ○ |
さて実験結果を見ていくと、まず何も指定されてなくても日本語は改行されます。
読点とかがどうなるのかまでは調査してませんが、日本語の場合はどこで切っても特に問題ないからでしょう。
それに対し、英語はスペースのあるところで区切り、それを元に改行します。
スペースがないと一つの単語として扱われ、切れないんですね。
長いURLなんかはこれに当たります。
続いて何も属性とかをいじってない、普通の<PRE>タグに入れた場合。
全てがはみ出すという結果になっています。
<PRE>は整形済み文書をそのまま出すというのが仕事なので、正しい結果でしょう。
では、続いてスタイルシートで改行指定した<PRE>。
ここにきてブラウザによる違いが一箇所でました。
スペースのない英語がFFの場合自動改行されず、IEではされました。
ただ、ここまでやっておいてなんなんですが……
自動改行を目的に頑張っていたのですが、「英単語を勝手にぶつ切りにするような改行をしてもいいのか？」という疑問が生まれました。
そもそもプログラムソースを<PRE>で載せたいのは、インデントのある文や長い文などを、そのまま載せるためにしていた訳です。
はみ出すからと改行させたくないところで改行されては困る訳です。
それならばスクロールに妥協してでも、そのまま載せるほうがいいのではないかと結論に至りました。
そもそもスクロールするほどプログラムソースが長くなることが、そんなに多くはないというのも妥協に至った理由です。
最後に実験していて気付いたブラウザの違いという点なんですが、はみ出す際にFFでは文字だけがはみ出しますがIEではブロックごと延長されてはみ出します。
W3Cの規定がどうかは分かりませんが、見た目としてはIEの方がミスってないようには見えますね。
FFのはみ出し方は完全にバグだと思われます。
そんなこんなで<PRE>内の文が長い場合のみ、横スクロールさせるという方向に決めました。
実際に使っているスタイルはこれです
pre{
background-color:#ffee99;
border-color:#000000;
border-style:solid;
border-width:1px;
font-size:100%;
padding: 5px;
overflow:auto;
width:540px;
}
overflowがautoなので、ブラウザが自動で横幅を考えて、長い時にだけスクロールバーをつけてくれます。
ただ、これだけだとIEが……
スクロールバー使わずに、どこまでもはみ出しやがるんですね。
こいつには横幅を任せておけん、ということで渋々widthを指定しました。
ほんとはwidthを固定値にするのはやりたくなかったんですよ。
せめて%指定にしたかった。
普通のGUIアプリケーションでもウィンドウサイズいじれない奴あるじゃないですか。
ああいうの、融通がきかねぇなぁと思っちゃうんです。
自分でアプリ作る時も、そこらへんは結構気にしてます。
Firefoxではフォームのサイズが自由にいじれる、Resizeable Form Fieldsっていう拡張機能使ってるし。
それにwidth:540pxっていうのは、自分のディスプレイ環境を基準に合わせた訳じゃないですか。
他の人にどう見えてるか分かったもんじゃない。
まあテンプレート自体がpxでサイズ指定してるんで、今さら言っても仕方がないんですけどね。
ちなみにIEは「横のスクロールバーのみ表示」ということができないようなので、横が出ると必要のない縦のバーも出ます。
というか、スクロールバーの厚さが増えた分だけ<PRE>の枠を圧迫するので、スクロールバーが縦も横も必要になります。
その上見にくい……
設定できないかと考えた末、paddingをいじることに。
スクロールバーが増えた分だけ、下を+15px伸ばしてみた。
padding: 5px 5px 20px 5px;}
まあ、スクロールバーがある時の不恰好さを考えれば、このぐらいは我慢しよう。
そんなこんなで結局また妥協だらけだった気がするが、なんとか一つの形にはなった。
またブラウザ側の仕様変更や、いいアイデアがあれば新たに試してみようと思う。
最近の記事を見る
⇒ブログでのnofollowの使い方 後編 (2008/10/01) ⇒ブログでのnofollowの使い方 前編 (2008/09/30) ⇒GoogleChromeに潜む小悪魔 〜GoogleUpdate.exe〜 (2008/09/25) ⇒QLOOKの解析タグのカスタマイズを使いこなす (2008/09/19) ⇒メモリーカード変換アダプタ一覧 (2008/09/15) ⇒Buzzurlを導入してみた (2008/09/09) ⇒Firefox 3のブックマークを解析してみた (2008/09/03) ⇒Googleでの検索順位が一気に上昇・復活 (2008/08/29) ⇒CREATIVE ZEN その９（ZEN関連記事のまとめ） (2008/08/24) ⇒ブログやサイトにソースコードを乗せる時に便利なツール (2008/08/22)
テーマ:ＨＰ作成 - ジャンル:コンピュータ カテゴリ:ネット関連
|
