white-space:pre

pre 要素 (HTML)

[1] HTMLpre 要素は、 囲まれた文が 整形済み (preformatted) であることを視覚UA に伝えます。

仕様書

[9] 仕様書:

[2]

開始タグ
必須
終了タグ
必須
内容模型
(%inline;)* -(除外要素型)
出現できる文脈
%block; な文脈 (歴史的変遷 https://suika.suikawiki.org/www/2004/html/content-pre)
属性
属性名属性値既定値説明出典
align揃え[HTML4] 非推奨
autohilite非標準Microsoft
class[HTML4] %coreattr
cols非標準
dir書字方向[HTML4] %i18n
id一意識別子[HTML4] %coreattr
lang自然言語[HTML4] %i18n
xml:lang自然言語[XHTML1]
onclick[HTML4] %events
ondblclick[HTML4] %events
onkeydown[HTML4] %events
onkeypress[HTML4] %events
onkeyup[HTML4] %events
onmousedown[HTML4] %events
onmouseout[HTML4] %events
onmouseover[HTML4] %events
onmouseup[HTML4] %events
_moz_quote非標準Mozilla
styleスタイル情報[HTML4] %coreattr
title注釈的題[HTML4] %coreattr
widthNUMBER(自動)[HTML 2.0], [HTML 4] 非推奨
wrap非標準
xmlnshttp://www.w3.org/1999/xhtmlW3C 勧告XHTML 1

内容模型

[4] 内容としては、基本的に行内要素を持つことができますが、

は除外されています (子孫要素とできません)。

HTML 4 によれば、この規定は HTML 3.2 と同じで、 固定幅フォントでレンダリングしたときに行の高さと文字の進み幅が一定になるようにするための制約なのだそうです。

XHTML 1.0 にもこの制約は受け継がれています XHTML 1.0 http://www.w3.org/TR/xhtml1/#prohibitions。 ただし、 * をつけた要素にしか言及されていません。 残りの移行用要素型はどうでもいいってことですか。 (XHTML 1.0 にも Transitional DTD はあるのにねぇ。)

[5] >>4 の目的の達成のためには、 >>3 の bidi についての規定が邪魔に思えるのですけどねぇ。

[13] pre の内容には各種の行内要素が使えますが、 UA の性能によっては、正しくレンダリングされないことがあります。 RFC 1866 5.5.2.

太字でレンダリングした部分で文字幅の計算がずれてまわりと字が重なるとか、 そんなような状況を想定しているのだと思われます。

レンダリング

[3] HTML 4 によれば、

  • 視覚 UA は、
    • 空白に手をつけなくてよい (may)
    • 固定幅フォントで文をレンダリングしてもよい (may)
    • 自動語折り返し (word wrap) を無効化してもよい (may)
    • bidi 処理を無効化してはならない (must not)
  • 非視覚 UA は、余分な空白を尊重する必要はない (not required)

[6] >>4 の除外要素があるのは、 固定幅フォントで表示したときに行の高さや文字の幅が一定になるようにするためです。 この動作を著者がスタイルシートで変えてしまうことは非推奨 (discourage) です。

[10] RFC 1866 では、 pre 要素は固定幅フォントで整形された文章に適当な要素型であると紹介していました。 RFC 1866 には明記こそされていませんが、 固定幅フォントでの表示が適当であると言っていることは自明です。

[11] UA は width 属性値を参考にして適当な文字の大きさと字下げの量を決めることができます。 RFC 1866 5.5.2. 幅が広ければ左余白を削減するようなことを想定しているようです。

[16] pre の意味は整形済み文であって、固定幅ではありませんが、 歴史的事情を考慮すれば、非固定幅な整形済み文に使用するのは好ましくないでしょう。 (しかしそうなると、非固定幅な整形済み文に使用するべき要素型がなくなってしまいますが・・・。)

[19] pre 要素のスタイル定義とマークアップ - 2xup http://2xup.org/log/2006/09/07-0056 (名無しさん 2006-09-07 00:02:14 +00:00)

改行

[12] pre 内では、改行を改行 (次の行の先頭への移動) として扱います。 (表示領域の先頭ではなく、 余白を考慮した行の先頭です。) RFC 1866 5.5.2.

[14] 古い文書は pre の中で p タグを使っています。 UA はこれを改行と同じように扱うことが推奨 (encourage) されていました。 ただし、 p の後に改行が続く時には、 まとめて一つ分の改行とみなすべきとされていました。 RFC 1866 5.5.2.

[17] Bidi: bidi に関しては、ごとに bidi 算法を適用して各文字の表示位置を決定します SI 4281 6.1.1.2

水平タブ

[8] かつて、水平タブ文字 (0/9, HORIZONTAL TAB, HTAB) を pre 内で使用することは避けるべきとされていました。

[22] HTML 2.0 (RFC 1866) では含めるべきではない (should not) 、 HTML 4 では強く非推奨 (strongly discouraged) ISO-HTML では使用不能 (強制的に SP に変換) と、時代が下るにつれ強い表現になっていました。

[23] UA はタブを8の倍数の文字位置までの分の間隔として解釈しなければなりません。 しかし実装は一貫していません。 RFC 1866 5.5.2.

[24] 多くの視覚 UA は、8文字を一タブ幅としています。 ところが、 editor でタブ幅を好きな幅にすることはよく行われています。 だから、変てこな文書を作ってしまうことになります。 HTML 4

[9] 多くのブラウザが8タブを採用しているのは事実で、 ブラウザに限らずとも8文字が優勢ですが、そうでなかったり、 設定で変えられる処理系も多々あります。 水平タブ文字は、数ある C0 制御文字のうちでは、文字自体はかなり安全に (ほとんど必ず) 伝達してもらえるわずかな文字の一つではありますが、 意図した通りに表示してもらえる確率はかなり低くなりますから、 この判断は妥当だとも思われました。

[25] HTML5 ではこの種のレンダリングに関わる制約はなくなり、CSS などレンダリング・モデルに解釈を委ねています。 pre 要素の既定のレンダリングで適用される white-space: pre は、 CSS 2.1 によると、8タブレンダリングされます。

[15] 整形済み文の例 RFC 1866 5.5.2.

<PRE>
Line 1.
       Line 2 is to the right of line 1.     <a href="abc">abc</a>
       Line 3 aligns with line 2.            <a href="def">def</a>
</PRE>

[7] Shelly の『To a Skylark』 HTML 4

<PRE>
       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</PRE>

レンダリング例:

       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.

HTMLPreElement インターフェイス

[31] HTMLPreElement インターフェイスは、 pre, listing, xmp要素要素インターフェイスです >>33

[32] HTMLPreElement インターフェイスは、 HTMLElement インターフェイス継承しています。

white-space: pre

[26] 'white-space' 特性の値 'pre' は・・・

派生

[41] サイト生成用 XML の仕様 — Avendia, , http://ziphil.com/other/other/10.html#pre

pre 要素の箇所にソースコードを別行立てで表示する。 各 pre 要素の直後に samp 要素を置くと、 それはソースコードを実行したときの出力を意味する。 どちらも HTML を生成する際にインデントは削除されるので、 XML の構造に従って小要素のテキストをインデントすることができる。

歴史

誕生

[18] libwwwは1992年12月11日の1.1版で、当時のHTML仕様に追加されたばかりのpreを実装しました。

[20] EMail Msg <9212141318.AA03936@www3.cern.ch> (2007-07-02 21:30:38 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1992.messages/453.html

[28] WWWLibrary_1.1 ( ( 版)) http://lists.w3.org/Archives/Public/www-talk/1992NovDec/0206.html

00年代

[21] コードは<pre>でマークアップするべき ...か? - Archiva ( 版) http://archiva.jp/web/html-css/sorce_pre_code.html

[35] XHTML2コード用の blockcode 要素を提案していました。 (後に HTML5pre 要素code 要素を併用するべきであると決着しました。)

[36] pre 要素の「空白をそのまま表示する」という機能は表示目的であり、 意味を記述するべき HTML には不適切である、と主張する過激派もいました。

HTML Standard

[27] Web Applications 1.0 r5670 Update <br>'s bidi behavior to match WebKit and IE rather than Gecko and Opera.Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10828 ( ( 版)) http://html5.org/tools/web-apps-tracker?from=5669&to=5670

[29] IRC logs: freenode / #whatwg / 20141022 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20141022#l-606

[30] Use HTMLPreElement for xmp and listing · whatwg/html@ca31ca2 ( 版) https://github.com/whatwg/html/commit/ca31ca2fa10f6205d65db7e81db122237036a736

[34] Don't serialize an extra LF in <pre>, <textarea>, <listing> (zcorpan著, ) https://github.com/whatwg/html/commit/2aa0000433f8c34263d29cee31bc95b1efdfef46

[37] Editorial: mark up code blocks with their language and <code> (Zirro著, ) https://github.com/whatwg/html/commit/a6e54621c0491ef633b0f3c4bd1f71fe72a722d8

[38] Put class=js on all <pre> elements in the spec that are JavaScript code examples · Issue #3753 · whatwg/html () https://github.com/whatwg/html/issues/3753

[39] Use <code> element inside the <pre> elements with code examples · Issue #3764 · whatwg/html () https://github.com/whatwg/html/issues/3764

[40] Add <code> element inside applicable <pre> elements by Zirro · Pull Request #3768 · whatwg/html () https://github.com/whatwg/html/pull/3768