pre 要素のスタイル定義とマークアップ

CSS

1. はあまり好きではないけれど、バックスラッシュハックで対応。Macintosh 版 Internet Explorer は visible なのではみ出してすいません状態。でも内容が見えないよりは良いかな。3. は2006年の最初までほとんど気にしていなかったので、それまでは以下のようにしていた。

pre {
  width: 95%;
  overflow: visible;
  /*\*/
  overflow: scroll;
  /**/
  margin: 1.5em 0;
  padding: 0.5em 0.8em;
  border: 5px solid #ddd;
  background-color: #f4f4f4;
  font-size: 95%;
}

しかし 3. が気になりだしてからは、4. も一緒に気になりだし、現在の定義はこんな具合になっています。

pre {
  width: 95%;
  overflow: scroll;
  margin: 1.5em 0;
  padding: 0.5em 0.8em;
  font-size: 95%;
}

html>body pre {
  overflow: visible;
  /*\*/
  overflow: auto;
  /**/
}

ここで最終的な定義の説明をすると、3. が気になりだしたので、overflow プロパティの値を auto としたいのだけれど、Windows 版 Internet Explorer ではボックスモデルの解釈がおかしいのか、4. が気になりだしたので、Windows 版 Internet Explorer 5.5 以降で認識されない子セレクタを利用した分岐で Windows 版 Internet Explorer は overflow プロパティの値を scroll に、Windows 版 Internet Explorer 以外は auto になるように考えをまとめました。しかし、Macintosh 版 Internet Explorer では子セレクタを利用した分岐は認識されるので、バックスラッシュハックを利用し、Macintosh 版 Internet Explorer 以外は overflow プロパティの値を auto に Macintosh 版 Internet Explorer の場合は visible なるようにしています。

XHTML

XHTML のマークアップはシンプルに。現在は class 属性や id 属性は付けていません。

<pre><code>pre {
  width: 95%;
  overflow: scroll;
  margin: 1.5em 0;
  padding: 0.5em 0.8em;
  font-size: 95%;
}

html>body pre {
  overflow: visible;
  /*\*/
  overflow: auto;
  /**/
}</code></pre>

今は何も特別な事はやっていないけれど、code 要素などにスタイルを追加したり、class 属性の値で内容がどういった種類のコードなのか指定しつつ、CSS で各々の見た目を変えることもできますね。例えばこんな感じ。

<pre class="css"><code>pre {
  width: 95%;
  overflow: scroll;
  margin: 1.5em 0;
  padding: 0.5em 0.8em;
  font-size: 95%;
}

html>body pre {
  overflow: visible;
  /*\*/
  overflow: auto;
  /**/
}</code></pre>

<<<REPLACE-REGEXP-SELECTED
<
&lt;
<<<REPLACE-REGEXP-SELECTED
"
&quot;
<<<REPLACE-REGEXP-SELECTED
&
&amp;
<<<REPLACE-REGEXP-SELECTED
>
&gt;

あとマークアップに関して注意している事と言えば、タブ文字を使わないでしょうか。

We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.

本書は、整形済テキスト中で水平タブを用いることは避けるよう、強く要請する。なぜなら、編集の際にタブ区切り幅を8文字以外の値に設定することはよくあることだが、これが誤った配置の文書を生み出す元となるからである。

• Paragraphs, Lines, and Phrases - 9.3.4 Preformatted text: The PRE element - The horizontal tab character (HTML 4.01 Specification)より

期待した結果が得られない可能性があるという事で、Preformatted (整形済みテキスト) ではない。というのが理由のようです。この辺りの対策は、編集作業時にタブ文字を利用しないようにしているというのがあります。最近のエディタでは、タブ文字の代わりに空白文字の繰り返しでインデントするように設定できる物も多いですし、Vim の設定ファイルにも set expandtab と設定して空白文字でインデントするようにしています。

related bookmarks (del.icio.us)