Edit

Page

Page title:

Page body:

[72] 本項では [[HTML]] の[[レンダリング]]について触れます。

* 仕様書

[REFS[
- [70] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2012-06-23 00:59:02 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#rendering>
- [92] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2014-08-06 00:09:58 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#signal-a-type-change>
]REFS]

* レンダリングのタイミング

[90] [[navigate]] における[[レンダリング]]の更新については、
[[HTMLのレンダリングの開始]]を参照してください。

[91] [[イベントループ]]と[[レンダリング]]の関係については、
[[イベントループ]]や[[レンダリングの更新]]を参照してください。

[93] [CODE(HTMLe)@en[[[input]]]] [[要素]]の [CODE(HTMLa)@en[[[type]]]]
[[属性]]が変更された時、[[レンダリング]]が更新されます [SRC[>>92]]。

[9] [CODE(DOMm)@en[[[requestAnimationFrame]]]]

[18] [[事前レンダリング]]

[19] [[FOUC]] も参照。

* レンダリング処理モデル

[17] [[レンダリング]]の方法は色々あります。
[FIG(short list)[
- [[CSS]]
- [[SVG]]
- [[MathML]]
-- [[現在レンダリング環境]]
- [CODE(HTMLe)@en[[[canvas]]]] [CODE(HTML)@en[[[2d]]]]
- [[WebGL]]
- [[フレーム]]
- [[unstyled document]]
- [[navigate]] の[[非文書表示]]
- 各[[画像形式]]
- [[画像写像]]
- [[媒体要素]]
- 各[[動画形式]]
- [[アニメーション][アニメーション (Web)]]
- [[WebVTT]]
- [[プラグイン]]
- [[bidi]]
- [[TrueType]]
- [[フォーム制御子]]
- [CODE(HTMLe)@en[[[meter]]]]
- [CODE(HTMLe)@en[[[progress]]]]
- [[ダイアログ]]
- [CODE(HTMLe)@en[[[menu]]]]
- [[PDF]]
- [[Flash]]
]FIG]

* 利用者エージェント・スタイル・シート

[71] [[HTML]] [[文書]]の[[レンダリング]]について用いられることが[[期待される]][[利用者エージェント・スタイル・シート]]が
[[HTML Living Standard]] で規定されています [SRC[>>70]]。

** 歴史

*** CSS 仕様書

[68] [[CSS]] 仕様書には、[[参考]]として [[HTML]] [[文書]]用の[[利用者エージェント・スタイル・シート]]例が示されています。

[10]
<IW:CSS1:"#appendix-a">

@@ [67] [[CSS2]]

- [69] [CITE@en[CSS Color Module Level 3]] ([TIME[2011-06-07 21:54:38 +09:00]] 版) <http://www.w3.org/TR/2011/REC-css3-color-20110607/#sample>

** 実装

*** WebKit

[1]
[CITE[/trunk/WebCore/css/html4.css - WebKit - Trac]] <http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/css/html4.css>

[14] [CITE[]] ([TIME[2008-10-03 09:43:39 +09:00]] 版) <http://svn.webkit.org/repository/webkit/trunk/WebCore/css/html4.css>

[2]
[CITE[/trunk/WebCore/css/quirks.css - WebKit - Trac]] <http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/css/quirks.css>

*** KHTML

[4]
[CITE[KDE Repository - log - SVN: branches/KDE/3.5/kdelibs/khtml/css/html4.css]] <http://websvn.kde.org/branches/KDE/3.5/kdelibs/khtml/css/html4.css>
([[名無しさん]])

[5]
[CITE[KDE Repository - log - SVN: branches/KDE/3.5/kdelibs/khtml/css/quirks.css]] <http://websvn.kde.org/branches/KDE/3.5/kdelibs/khtml/css/quirks.css?rev=597669&view=log>
([[名無しさん]])

[6]
[CITE[KDE Repository - log - SVN: trunk/KDE/kdelibs/khtml/css/html4.css]] <http://websvn.kde.org/trunk/KDE/kdelibs/khtml/css/html4.css>
([[名無しさん]])

[7]
[CITE[KDE Repository - log - SVN: trunk/KDE/kdelibs/khtml/css/quirks.css]] <http://websvn.kde.org/trunk/KDE/kdelibs/khtml/css/quirks.css>

** メモ

[8]
[CITE@ja[デフォルトスタイルの差異を無くすCSS]] ([[3ping.org]] 著, [CODE[2007-01-18 09:33:28 +09:00]] 版) <http://3ping.org/2006/04/09/0747>
([[名無しさん]] [WEAK[2007-01-18 05:26:10 +00:00]])

* 表現的ヒント

[73] [[HTML]] 仕様では[[表現的]]な[[要素]]や[[属性]]についての[[期待される]][[レンダリング]]が[[表現的ヒント]]として規定されています [SRC[>>70]]。

* 概念

[FIG(short list)[
- [[画布]]
- [[viewport]]
- [[物理形]]
- [[Fullscreen]]
- [[レンダリングエンジン]]
- [[スクリーンショット (Web)]]
- [CODE[SVG ][SVG-in-OpenType]]

]FIG]

* 試験例

- [66] ''XHTML compatibility tests'' <http://frank.ellermann.bei.t-online.de/strikedel.htm>: 物理要素・論理要素のブラウザ既定スタイルでのレンダリングについて

* 歴史

[21] 
[CITE[The Base Stylesheet]], [TIME[2022-07-08T06:34:25.000Z]], [TIME[1999-02-22T08:26:12.821Z]] <https://web.archive.org/web/19990222082453/http://www.verso.com/agitprop/corestyle/base.html>

[76] [[文書]]中の[[情報]]が[[表現]]される動作。この表現はその環境に置いて最も適当な形態 (例: [[聴覚的]], [[視覚的]], [[印刷]]) で行われる。 <http://www.w3.org/TR/xhtml1/#general>

[11]
[CITE@en[RE: '''['''CSS21''']''' Why are browser default style values different from    Appendix D]] ([[Saloni Mira Rai]] 著, [CODE[2008-05-01 06:52:49 +09:00]] 版) <http://lists.w3.org/Archives/Public/www-style/2008Apr/0518.html>

[12]
[CITE@en[CSS2.1 User Agent Style Sheet Defaults]] ([TIME[2008-05-05 21:26:08 +09:00]] 版) <http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm>

[15] [CITE@en[Re: Default (informal) Style Sheet]] ([[Ian Hickson]] 著, [TIME[2009-02-10 19:52:32 +09:00]] 版) <http://lists.w3.org/Archives/Public/public-html/2009Feb/0198.html>

[74] [CITE[CSS Print Profile]]
( ([TIME[2013-03-14 20:50:03 +09:00]] 版))
<http://www.w3.org/TR/2013/NOTE-css-print-20130314/#s.8.5.1>

[75] [CITE@en[Bug 21403 – HTML 5 spec should address how alt text is copied to a plain text pasteboard]]
( ([TIME[2013-04-29 22:47:05 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=21403>

[77] Web 関連規格, たとえば [[HTML]]
や [[XML]] は特定の[[装置]]による表現から一定の距離を置く方針を採っています。
[Q[レンダリング]], [Q[rendering]], [Q[render]] という語は、
[Q[display]] のような視覚的意味が強い語の代替として選ばれているようなきらいがあります。
(そうはいっても、 [Q[render]] も >>3 のように視覚的印象が強いことは否めませんが・・・。)

[78] '''W3C におけるレンダリング''':
W3C の仕様では [Q[rendering]] という語はよく使われますが、
用語として [Q[rendering]] を定義した仕様はないようです。

[[CSS]] は[Q[視覚レンダリング・モデル]]を規定していますし、
[[SVG]] も[Q[レンダリング・モデル]]を規定しています。
しかしいずれも [Q[rendering]] という語そのものは定義していません。
なお、 CSS の仕様書には[Q[[RUBYB[音声レンダリング] [aural rendering]]]]という用語も登場します
(が、こちらも未定義語です)。
[WEAK[なお、一般には [Q[speech rendering]] という語も使われているようです。]]

[79] >>76 [[XHTML 1.0]] で定義されていました。
ちゃんと検索してから >>76 を書いたのに[AA[orz]]

[80] 
>
:[DFN[[RUBYB[レンダリング]@en[rendering]]]]:
レンダリングとは、[[文書]]の[[情報]]を提示する行為です。
この提示は[[環境]]でもっとも適切な形
(例えば音声的、視覚的、[[印刷]]) で行います。

[REFS[
- [81] [[XHTML 1.0]]
-- [CITE[2.2. General Terms]]
<http://www.w3.org/TR/xhtml1#general>
]REFS]

[82] [CITE[最速チュパカブラ研究会]] ([TIME[2007-06-14 19:06:14 +09:00]] 版) <http://d.hatena.ne.jp/gyuque/20070327#1175005196>
([[名無しさん]] [WEAK[2007-06-15 13:03:46 +00:00]])

[20] 
[CITE@en[''''''[''''''Paint Performance'''''']'''''' - Exposing paint rects to the DOM]]
( ([[Patrick Meenan]] 著, [TIME[2013-08-14 02:14:17 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-web-perf/2013Aug/0040.html>

[83] [CITE@en[Servo/StyleUpdateOnDOMChange - MozillaWiki]]
( ([TIME[2013-08-10 14:11:55 +09:00]] 版))
<https://wiki.mozilla.org/Servo/StyleUpdateOnDOMChange>

[84] [CITE[Incremental flow tree construction · mozilla/servo Wiki]]
( ([TIME[2013-09-18 09:50:22 +09:00]] 版))
<https://github.com/mozilla/servo/wiki/Incremental-flow-tree-construction>

[85] [CITE@en-US-x-hixie[HTML Standard]]
( ([TIME[2013-11-08 00:23:32 +09:00]] 版))
<http://www.whatwg.org/specs/web-apps/current-work/#semantics-0>

[86] [CITE[Rendering and compositing out of process iframes - The Chromium Projects]]
( ([TIME[2013-11-15 23:46:41 +09:00]] 版))
<http://www.chromium.org/developers/design-documents/oop-iframes/oop-iframes-rendering>

[87] [CITE[Surfin' Safari - Blog Archive » WebCore Rendering I – The Basics]]
( ([TIME[2013-11-16 16:26:45 +09:00]] 版))
<https://www.webkit.org/blog/114/webcore-rendering-i-the-basics/>

[88] [CITE@en[Re: Beginning of a spec on style batching/flushing?]]
( ([[Boris Zbarsky]] 著, [TIME[2013-12-11 14:06:42 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2013Dec/0214.html>

[89] [CITE[JavaScript Grid with One Million Records | JavaScript UI - w2ui]]
( ([TIME[2014-03-24 03:49:00 +09:00]] 版))
<http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records>

[3] [CITE@en-US[Introduction to Layout in Mozilla | MDN]]
([TIME[2014-03-26 01:30:23 +09:00]] 版)
<https://developer.mozilla.org/en-US/docs/Introduction_to_Layout_in_Mozilla>

[13] [CITE@en[28954 – Clarify that suggested default rendering CSS is overridable unless stated otherwise]]
([TIME[2015-08-31 23:03:06 +09:00]] 版)
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=28954>

[16] [CITE@en[Add "i" flag to selectors in rendering section]]
( ([[shvaikalesh]]著, [TIME[2016-06-03 18:36:19 +09:00]]))
<https://github.com/whatwg/html/commit/f352200eb1265b228f66e2ebc8a10b977a3f68fd>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)