記事本文
pre 要素の内容を CSS で折り返すということ
preで折り返す設定 - HsbtDiary (2005-12-07) 、およびそこからリンクされている ◆2 CSS: 「折り返す」pre - ただのにっき (2005-09-22) に、 pre 要素の内容を CSS で折り返す方法が書かれていました。
CSS 3 で定義されている値を用いていたり、各ブラウザの独自の値や独自のプロパティを用いていたりと、手法としてもあまり積極的に薦められるものではないのですが、この「 pre 要素の内容を折り返す」という目的自体も、仕様のみを判断基準とするならば、あまり薦められるものではないと思います。
The PRE element tells visual user agents that the enclosed text is "preformatted". When handling preformatted text, visual user agents:
- May leave white space intact.
- May render text with a fixed-pitch font.
- May disable automatic word wrap.
- Must not disable bidirectional processing.
と書かれており、また CSS 2 の仕様でも
Conforming user agents may ignore the 'white-space' property in author and user style sheets but must specify a value for it in the default style sheet.
と書かれているため、 CSS で折り返しを指定していても、 UA はそれを無視しても良いということになっているようです。
また、当然ですが CSS に対応していない UA であれば折り返しの指定は無効になります。
( CSS を用いて pre 要素を折り返す手法なので、「 CSS に対応していない UA であれば～」という指摘はお門違いかもしれませんが。 )
あまりユーザビリティの高くない代替案
pre 要素への CSS を用いての折り返し指定がよろしくない、あるいは UA に無視される可能性があるというならどうすれば良いのか ? pre 要素内に文字数の多い行があった場合は、そのまま折り返しをせずに表示させるべきなのか ? と思われるかもしれません。 それならば、 pre 要素に対する CSS の指定を次のようにしてはどうでしょう。
pre {
width: 100%;
overflow: auto;
}
こうすることにより、 CSS 対応のブラウザであれば、内部のテキストの長さが pre 要素の幅を超える場合は横スクロールバーを出してその幅に収めるようになります。
( この width は指定しなくても良いのですが、指定しなかった場合は IE にてスクロールバーが出ず、 pre 要素の幅をはみ出して表示されます。
あるいは、
overflow: auto;
ではなく
overflow: scroll;
と指定するという手法もあります。 )
なお、 MacIE では overflow プロパティに visible 以外の値が指定された要素が表示されないというバグがありますので、 MacIE をターゲットに含める場合は、この指定を回避するような記述をした方が良いかもしれません。
( 例えば、用途別CSSハック一覧表のバックスラッシュハックなど。 )
この手法であれば、 CSS による折り返しをせずに、かつ閲覧領域を突き破ることなく表示できます。 ( hxxk.jp ではこちらの方式を採用しています。 )
ただし、仕様ではなくユーザビリティを判断基準とするならば、横方向のスクロールバーが出てしまうということでお勧めできないのですが。 仕様を優先する ( 未勧告の値やブラウザ独自の値を用いない ) か、ユーザビリティを優先するかの判断が難しいところです。
作成者が気にする必要は無いと思います
うーん、preは投稿する時に適当に改行をいれて折り返すべきか、CSSでは見やすく改行されるから、RSSリーダーの読者には我慢してもらうべきか。
これは困った。
という点については、読者の方にお任せする方針で良いのではないでしょうか。
製作者スタイルシートにおいて折り返しを設定しているのですから、どうしても見辛ければ製作者スタイルシートが適用される方で見れば良いのです。
もしくは RSS リーダ側にユーザスタイルシートを設定するか。
全てのリーダでユーザスタイルシートが使えるかどうかは分かりませんが。
( Bloglines や FEEDBRINGER やはてなRSS などの、ブラウザを使用するタイプは比較的容易にユーザスタイルシートが使えると思います、 )
そして、
投稿する時に適当に改行をいれて折り返す
というのは本末転倒である、というのも読者任せにすべきである理由です。
pre 要素は整形済テキストをマークアップするものであり、改行自体もその整形というものに含まれます。
そこで折り返しという目的のために改行を入れるというのは、本来整形されるべき結果と異なってしまうと言えるでしょう。
また、適当な ( 適切な ) 改行を入れたつもりであっても、読者が設定しているブラウザ、あるいは RSS リーダの閲覧領域の幅は千差万別であり、適切な改行を行える可能性は低いと思います。
トラックバック送信先
- preで折り返す設定 - HsbtDiary (2005-12-07)
-
適当な改行を入れるよりも、適宜ユーザスタイルシートを使ってもらうか、あるいは製作者スタイルシートが適用された状態で見てもらうというように、読者にお任せする方針の方が良いと思います。
