pre 要素 (HTML)

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

仕様書

[33] HTML Standard (2016-04-24 23:36:04 +09:00 版) https://html.spec.whatwg.org/#htmlelement

[9] 仕様書:

HTML 2.0: RFC 1866 5.5.2. Preformatted Text: PRE
SI 4281:1998
- 6.1.1.2 Pre-formatted segments http://www.qsm.co.il/Hebrew/si4281e.htm
HTML 4
XHTML 1.0: IW:XHTML1.0:"#prohibitions"

必須

必須

(%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
`width`	`NUMBER`	(自動)	幅	[HTML 2.0], [HTML 4] 非推奨
`wrap`				非標準
`xmlns`	`http://www.w3.org/1999/xhtml`		W3C 勧告	XHTML 1

内容模型

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

img *
object *
applet
big *
small *
sub *
sup *
font
basefont

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

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タブでレンダリングされます。

http://www.w3.org/TR/CSS21/text.html#white-space-model

例

[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, 2023-01-03T03:25:42.000Z, 2023-04-08T06:03:46.250Z http://ziphil.com/other/other/10.html#pre

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

[46] HTML要素概説

要素名: pre
借用先: WML 1.3

歴史

`pre` 要素の誕生

[55] 1992-11-21付 www-talk の Jim Whitescarver による投稿によると、 ScreenMode w3 interface の prerelease version が公開されました。 >>54

[56] また、同グループは manual page reader (おそらく man を HTML にして返すゲートウェイサーバー) や HTML を WYSIWYG に編集できる Microsoft Word マクロを開発しました。 >>54

[57] 両機能のために必要であり、 Al Leurck が pre 要素 (と Microsoft Word マクロ) を開発しました。 >>54

[58] pre は ScreenMode s3 interface と Microsoft Word マクロが実装していた他に、 tkWWW X interface にも追加作業中でした。 >>54

[59] それまでも plaintext や xmp があったものの、ハイパーリンクが使えなかったので新たに pre が必要とされました。

[61] NCSA Mosaic の開発者 Marc Andreessen は直ちにこれに反応して pre は良い考えであり HTML 仕様に追加できないかと発言しています。 >>60

[62] MidasWWW の開発者 Tony Johnson は MidasWWW は設定ファイルの変更だけで対応可能だと方法を示しています。 >>63

[69] これらに対して他の人々は基本アイデアには賛同しつつ、要素名や構文に別案を出し始めます。 Tim Berners-Lee は fixed という名前がいいかもしれないといい >>64、別構文案を踏まえて挙動が違う pre, fixed の共存案も提出します >>67 が、 Dan Connolly は挙動が違う fixed に難色を示します >>68。

[71] 1992-12-01に公開された Dan Connolly 版の HTMLの仕様書は typewriter 要素(だけ)を含んでいました。 >>70, >>67, >>68 この要素名がどこから出てきたものかはよくわかりませんが、このとき限りで、以後のものでは pre になっています。

[47] fixed 要素は西暦1992年頃の HTML の DTD に載っていました。

[51] >>47 これはどの DTD のことなのか確認できず。 2024-08-30T08:46:18.400Z

[48] また WorldWideWeb にも実装されていました。

[53] >>48 どうやら中途半端だったらしい >>50。あるいはちゃんと実装されていた版もあるのだろうか?

[50] Inside the Code — WorldWideWeb NeXT Application, CERN, 2020-12-14T20:30:11.000Z, 2024-08-30T08:30:02.969Z https://worldwideweb.cern.ch/code/

Our version of WorldWideWeb was missing code to apply styles to H4, H5, or H6, however by the time of Nexus, that code had been added. Likewise, PRE and FIXED appeared like normal text in WorldWideWeb but were correctly styled in Nexus. (FIXED was in the source code but the tag wasn't parsed—it was only associated with styling.)

[75] WorldWideWeb/NextStep/Implementation/ParseHTML.h at master · cynthia/WorldWideWeb · GitHub, 2024-08-30T15:24:01.000Z https://github.com/cynthia/WorldWideWeb/blob/master/NextStep/Implementation/ParseHTML.h

[49] のちの pre 要素である。

[52] >>49 というのは間違いではないがちょっとニュアンスが違うっぽい。

[72] HTML要素概説

要素名

pre

日付

1992-11-21

説明