-
Notifications
You must be signed in to change notification settings - Fork 0
/
rendering.html
2009 lines (1889 loc) · 261 KB
/
rendering.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML 5.1: Rendering</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="WD" name="w3c-status">
<link href="../default.css" rel="stylesheet" type="text/css">
<link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link href="https://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css">
<meta content="Bikeshed 1.0.0" name="generator">
<style>.highlight .hll { background-color: #ffffcc }
.highlight { background: #ffffff; }
.highlight .c { color: #708090 } /* Comment */
.highlight .k { color: #990055 } /* Keyword */
.highlight .l { color: #000000 } /* Literal */
.highlight .n { color: #0077aa } /* Name */
.highlight .o { color: #999999 } /* Operator */
.highlight .p { color: #999999 } /* Punctuation */
.highlight .cm { color: #708090 } /* Comment.Multiline */
.highlight .cp { color: #708090 } /* Comment.Preproc */
.highlight .c1 { color: #708090 } /* Comment.Single */
.highlight .cs { color: #708090 } /* Comment.Special */
.highlight .kc { color: #990055 } /* Keyword.Constant */
.highlight .kd { color: #990055 } /* Keyword.Declaration */
.highlight .kn { color: #990055 } /* Keyword.Namespace */
.highlight .kp { color: #990055 } /* Keyword.Pseudo */
.highlight .kr { color: #990055 } /* Keyword.Reserved */
.highlight .kt { color: #990055 } /* Keyword.Type */
.highlight .ld { color: #000000 } /* Literal.Date */
.highlight .m { color: #000000 } /* Literal.Number */
.highlight .s { color: #a67f59 } /* Literal.String */
.highlight .na { color: #0077aa } /* Name.Attribute */
.highlight .nc { color: #0077aa } /* Name.Class */
.highlight .no { color: #0077aa } /* Name.Constant */
.highlight .nd { color: #0077aa } /* Name.Decorator */
.highlight .ni { color: #0077aa } /* Name.Entity */
.highlight .ne { color: #0077aa } /* Name.Exception */
.highlight .nf { color: #0077aa } /* Name.Function */
.highlight .nl { color: #0077aa } /* Name.Label */
.highlight .nn { color: #0077aa } /* Name.Namespace */
.highlight .py { color: #0077aa } /* Name.Property */
.highlight .nt { color: #669900 } /* Name.Tag */
.highlight .nv { color: #0077aa } /* Name.Variable */
.highlight .ow { color: #999999 } /* Operator.Word */
.highlight .mb { color: #000000 } /* Literal.Number.Bin */
.highlight .mf { color: #000000 } /* Literal.Number.Float */
.highlight .mh { color: #000000 } /* Literal.Number.Hex */
.highlight .mi { color: #000000 } /* Literal.Number.Integer */
.highlight .mo { color: #000000 } /* Literal.Number.Oct */
.highlight .sb { color: #a67f59 } /* Literal.String.Backtick */
.highlight .sc { color: #a67f59 } /* Literal.String.Char */
.highlight .sd { color: #a67f59 } /* Literal.String.Doc */
.highlight .s2 { color: #a67f59 } /* Literal.String.Double */
.highlight .se { color: #a67f59 } /* Literal.String.Escape */
.highlight .sh { color: #a67f59 } /* Literal.String.Heredoc */
.highlight .si { color: #a67f59 } /* Literal.String.Interpol */
.highlight .sx { color: #a67f59 } /* Literal.String.Other */
.highlight .sr { color: #a67f59 } /* Literal.String.Regex */
.highlight .s1 { color: #a67f59 } /* Literal.String.Single */
.highlight .ss { color: #a67f59 } /* Literal.String.Symbol */
.highlight .vc { color: #0077aa } /* Name.Variable.Class */
.highlight .vg { color: #0077aa } /* Name.Variable.Global */
.highlight .vi { color: #0077aa } /* Name.Variable.Instance */
.highlight .il { color: #000000 } /* Literal.Number.Integer.Long */
.highlight { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
</style>
</head>
<body class="h-entry">
<div class="head">
<header>
<p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Working Draft, <time class="dt-updated" datetime="2016-01-20">20 January 2016</time></span></h2>
</header>
</div>
<nav class="prev_next"> — ← <a href="xhtml.html#xhtml"><span class="secno">9</span> <span class="content">The XHTML syntax</span></a> — <a href="index.html#contents">Table of contents</a> →<a href="obsolete.html#obsolete"><span class="secno">11</span> <span class="content">Obsolete features</span></a></nav><nav data-fill-with="table-of-contents" id="toc">
<h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
<ol class="toc" role="directory">
<li>
<a href="rendering.html#rendering"><span class="secno">10</span> <span class="content">Rendering</span></a>
<ol class="toc">
<li><a href="rendering.html#rendering-introduction"><span class="secno">10.1</span> <span class="content">Introduction</span></a>
</li><li><a href="rendering.html#the-css-user-agent-style-sheet-and-presentational-hints"><span class="secno">10.2</span> <span class="content">The CSS user agent style sheet and presentational hints</span></a>
</li><li>
<a href="rendering.html#non-replaced-elements"><span class="secno">10.3</span> <span class="content">Non-replaced elements</span></a>
<ol class="toc">
<li><a href="rendering.html#hidden-elements"><span class="secno">10.3.1</span> <span class="content">Hidden elements</span></a>
</li><li><a href="rendering.html#the-page"><span class="secno">10.3.2</span> <span class="content">The page</span></a>
</li><li><a href="rendering.html#non-replaced-elements-flow-content"><span class="secno">10.3.3</span> <span class="content">Flow content</span></a>
</li><li><a href="rendering.html#non-replaced-elements-phrasing-content"><span class="secno">10.3.4</span> <span class="content">Phrasing content</span></a>
</li><li><a href="rendering.html#bidirectional-text"><span class="secno">10.3.5</span> <span class="content">Bidirectional text</span></a>
</li><li><a href="rendering.html#quotes"><span class="secno">10.3.6</span> <span class="content">Quotes</span></a>
</li><li><a href="rendering.html#sections-and-headings"><span class="secno">10.3.7</span> <span class="content">Sections and headings</span></a>
</li><li><a href="rendering.html#lists"><span class="secno">10.3.8</span> <span class="content">Lists</span></a>
</li><li><a href="rendering.html#tables"><span class="secno">10.3.9</span> <span class="content">Tables</span></a>
</li><li><a href="rendering.html#margin-collapsing-quirks"><span class="secno">10.3.10</span> <span class="content">Margin collapsing quirks</span></a>
</li><li><a href="rendering.html#form-controls"><span class="secno">10.3.11</span> <span class="content">Form controls</span></a>
</li><li><a href="rendering.html#the-hr-element-rendering"><span class="secno">10.3.12</span> <span class="content">The <code><span>hr</span></code> element</span></a>
</li><li><a href="rendering.html#the-fieldset-and-legend-elements"><span class="secno">10.3.13</span> <span class="content">The <code>fieldset</code> and <code><span>legend</span></code> elements</span></a>
</li></ol>
</li><li>
<a href="rendering.html#replaced-elements"><span class="secno">10.4</span> <span class="content">Replaced elements</span></a>
<ol class="toc">
<li><a href="rendering.html#replaced-elements-embedded-content"><span class="secno">10.4.1</span> <span class="content">Embedded content</span></a>
</li><li><a href="rendering.html#replaced-elements-images"><span class="secno">10.4.2</span> <span class="content">Images</span></a>
</li><li><a href="rendering.html#attributes-for-embedded-content-and-images"><span class="secno">10.4.3</span> <span class="content">Attributes for embedded content and images</span></a>
</li><li><a href="rendering.html#replaced-elements-image-maps"><span class="secno">10.4.4</span> <span class="content">Image maps</span></a>
</li></ol>
</li><li>
<a href="rendering.html#bindings"><span class="secno">10.5</span> <span class="content">Bindings</span></a>
<ol class="toc">
<li><a href="rendering.html#bindings-introduction"><span class="secno">10.5.1</span> <span class="content">Introduction</span></a>
</li><li><a href="rendering.html#the-button-element-rendering"><span class="secno">10.5.2</span> <span class="content">The <code><span>button</span></code> element</span></a>
</li><li><a href="rendering.html#the-details-element-rendering"><span class="secno">10.5.3</span> <span class="content">The <code><span>details</span></code> element</span></a>
</li><li><a href="rendering.html#the-input-element-as-a-text-entry-widget"><span class="secno">10.5.4</span> <span class="content">The <code><span>input</span></code> element as a text entry widget</span></a>
</li><li><a href="rendering.html#the-input-element-as-domain-specific-widgets"><span class="secno">10.5.5</span> <span class="content">The <code><span>input</span></code> element as domain-specific widgets</span></a>
</li><li><a href="rendering.html#the-input-element-as-a-range-control"><span class="secno">10.5.6</span> <span class="content">The <code><span>input</span></code> element as a range control</span></a>
</li><li><a href="rendering.html#the-input-element-as-a-color-well"><span class="secno">10.5.7</span> <span class="content">The <code><span>input</span></code> element as a color well</span></a>
</li><li><a href="rendering.html#the-input-element-as-a-checkbox-and-radio-button-widgets"><span class="secno">10.5.8</span> <span class="content">The <code><span>input</span></code> element as a checkbox and radio button widgets</span></a>
</li><li><a href="rendering.html#the-input-element-as-a-file-upload-control"><span class="secno">10.5.9</span> <span class="content">The <code><span>input</span></code> element as a file upload control</span></a>
</li><li><a href="rendering.html#the-input-element-as-a-button"><span class="secno">10.5.10</span> <span class="content">The <code><span>input</span></code> element as a button</span></a>
</li><li><a href="rendering.html#the-marquee-element-rendering"><span class="secno">10.5.11</span> <span class="content">The <code><span>marquee</span></code> element</span></a>
</li><li><a href="rendering.html#the-meter-element-rendering"><span class="secno">10.5.12</span> <span class="content">The <code><span>meter</span></code> element</span></a>
</li><li><a href="rendering.html#the-progress-element-rendering"><span class="secno">10.5.13</span> <span class="content">The <code><span>progress</span></code> element</span></a>
</li><li><a href="rendering.html#the-select-element-rendering"><span class="secno">10.5.14</span> <span class="content">The <code><span>select</span></code> element</span></a>
</li><li><a href="rendering.html#the-textarea-element-rendering"><span class="secno">10.5.15</span> <span class="content">The <code><span>textarea</span></code> element</span></a>
</li><li><a href="rendering.html#the-keygen-element-rendering"><span class="secno">10.5.16</span> <span class="content">The <code><span>keygen</span></code> element</span></a>
</li></ol>
</li><li><a href="rendering.html#frames-and-framesets"><span class="secno">10.6</span> <span class="content">Frames and framesets</span></a>
</li><li>
<a href="rendering.html#interactive-media"><span class="secno">10.7</span> <span class="content">Interactive media</span></a>
<ol class="toc">
<li><a href="rendering.html#links-forms-and-navigation"><span class="secno">10.7.1</span> <span class="content">Links, forms, and navigation</span></a>
</li><li><a href="rendering.html#interactive-media-the-title-attribute"><span class="secno">10.7.2</span> <span class="content">The <code>title</code> attribute</span></a>
</li><li><a href="rendering.html#editing-hosts"><span class="secno">10.7.3</span> <span class="content">Editing hosts</span></a>
</li><li><a href="rendering.html#text-rendered-in-native-user-interfaces"><span class="secno">10.7.4</span> <span class="content">Text rendered in native user interfaces</span></a>
</li></ol>
</li><li><a href="rendering.html#print-media"><span class="secno">10.8</span> <span class="content">Print media</span></a>
</li><li><a href="rendering.html#unstyled-xml-documents"><span class="secno">10.9</span> <span class="content">Unstyled XML documents</span></a>
</li></ol>
</li></ol>
</nav>
<main>
<section>
<div class="impl">
<h2 class="heading settled" data-level="10" id="rendering"><span class="secno">10. </span><span class="content">Rendering</span><a class="self-link" href="rendering.html#rendering"></a></h2>
<p><i>User agents are not required to present HTML documents in any particular way. However, this
section provides a set of suggestions for rendering HTML documents that, if followed, are likely
to lead to a user experience that closely resembles the experience intended by the documents'
authors. So as to avoid confusion regarding the normativity of this section, RFC2119 terms have
not been used. Instead, the term "expected" is used to indicate behavior that will lead to this
experience. For the purposes of conformance for user agents designated as <a data-link-type="dfn" href="infrastructure.html#rendering-support-the-suggested-default-rendering">supporting the suggested default rendering</a>, the term "expected" in this
section has the same conformance implications as the RFC2119-defined term "must".</i></p>
<h3 class="heading settled" data-level="10.1" id="rendering-introduction"><span class="secno">10.1. </span><span class="content">Introduction</span><a class="self-link" href="rendering.html#rendering-introduction"></a></h3>
<p>In general, user agents are expected to support CSS, and many of the suggestions in this
section are expressed in CSS terms. User agents that use other presentation mechanisms can derive
their expected behavior by translating from the CSS rules given in this section.</p>
<p>In the absence of style-layer rules to the contrary (e.g. author style sheets), user agents are
expected to render an element so that it conveys to the user the meaning that the element <a data-link-type="dfn" href="dom.html#represent">represents</a>, as described by this specification.</p>
<p>The suggestions in this section generally assume a visual output medium with a resolution of
96dpi or greater, but HTML is intended to apply to multiple media (it is a <i>media-independent</i> language). User agent implementors are encouraged to adapt the
suggestions in this section to their target media.</p>
<hr>
<p>An element is <dfn data-dfn-type="dfn" data-noexport="" id="being-rendered">being rendered<a class="self-link" href="rendering.html#being-rendered"></a></dfn> if it has any associated CSS layout boxes, SVG layout
boxes, or some equivalent in other styling languages.</p>
<p class="note" role="note"> Just being off-screen does not mean the element is not <a data-link-type="dfn" href="rendering.html#being-rendered">being
rendered</a>. The presence of the <code>hidden</code> attribute normally
means the element is not <a data-link-type="dfn" href="rendering.html#being-rendered">being rendered</a>, though this might be overridden by the style
sheets. </p>
<hr>
<p>User agents that do not honor author-level CSS style sheets are nonetheless expected to act as
if they applied the CSS rules given in these sections in a manner consistent with this
specification and the relevant CSS and Unicode specifications. <a data-link-type="biblio" href="references.html#biblio-css-2015">[CSS-2015]</a> <a data-link-type="biblio" href="references.html#biblio-unicode">[UNICODE]</a> <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a></p>
<p class="note" role="note"> This is especially important for issues relating to the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">display</a>, <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi">unicode-bidi</a>,
and <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> properties. </p>
<h3 class="heading settled" data-level="10.2" id="the-css-user-agent-style-sheet-and-presentational-hints"><span class="secno">10.2. </span><span class="content">The CSS user agent style sheet and presentational hints</span><a class="self-link" href="rendering.html#the-css-user-agent-style-sheet-and-presentational-hints"></a></h3>
<p>The CSS rules given in these subsections are, except where otherwise specified, expected to be
used as part of the user-agent level style sheet defaults for all documents that contain <a data-link-type="dfn" href="infrastructure.html#html-element">html elements</a>.</p>
<p>Some rules are intended for the author-level zero-specificity presentational hints part of the
CSS cascade; these are explicitly called out as <dfn data-dfn-type="dfn" data-noexport="" id="presentational-hints">presentational hints<a class="self-link" href="rendering.html#presentational-hints"></a></dfn>.</p>
<p>Some of the rules regarding left and right margins are given here as appropriate for elements
whose <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property is <a class="css" data-link-type="maybe" href="http://www.w3.org/TR/css-writing-modes-3/#valdef-direction-ltr">ltr</a>, and are expected to be flipped around on elements whose <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property is <a class="css" data-link-type="maybe" href="http://www.w3.org/TR/css-writing-modes-3/#valdef-direction-rtl">rtl</a>. These are marked "<dfn data-dfn-type="dfn" data-noexport="" id="ltr-specific">LTR-specific<a class="self-link" href="rendering.html#ltr-specific"></a></dfn>".</p>
<p class="note" role="note"> These markings only affect the handling of attribute <em>values</em>, not
attribute names or element names. </p>
<hr>
<p>When the text below says that an attribute <var>attribute</var> on an element <var>element</var> <dfn data-dfn-type="dfn" data-noexport="" id="maps-to-the-pixel-length-property">maps to the pixel length property<a class="self-link" href="rendering.html#maps-to-the-pixel-length-property"></a></dfn> (or properties) <var>properties</var>, it means that if <var>element</var> has an attribute <var>attribute</var> set, and parsing that attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value">rules for parsing non-negative
integers</a> doesn’t generate an error, then the user agent is expected to use the parsed value
as a pixel length for a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> for <var>properties</var>.</p>
<p>When the text below says that an attribute <var>attribute</var> on an element <var>element</var> <dfn data-dfn-type="dfn" data-lt="as hints for the rendering|maps to the dimension properties|maps to the dimension property" data-noexport="" id="as-hints-for-the-rendering">maps to the dimension property<a class="self-link" href="rendering.html#as-hints-for-the-rendering"></a></dfn> (or properties) <var>properties</var>, it means that if <var>element</var> has an attribute <var>attribute</var> set, and parsing that attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-dimension-values">rules for parsing dimension values</a> doesn’t generate an error, then the user agent is expected to use the parsed dimension as the
value for a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> for <var>properties</var>, with the value given as a pixel length if the dimension was a length, and
with the value given as a percentage if the dimension was a percentage.</p>
<p>When the text below says that an attribute <var>attribute</var> on an element <var>element</var> <dfn data-dfn-type="dfn" data-lt="map to the dimension property (ignoring zero)|maps to the dimension property (ignoring zero)" data-noexport="" id="map-to-the-dimension-property-ignoring-zero">maps to the dimension property (ignoring zero)<a class="self-link" href="rendering.html#map-to-the-dimension-property-ignoring-zero"></a></dfn> (or properties) <var>properties</var>, it means that if <var>element</var> has an attribute <var>attribute</var> set, and parsing that attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-non-zero-dimension-values">rules for parsing non-zero dimension
values</a> doesn’t generate an error, then the user agent is expected to use the parsed
dimension as the value for a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> for <var>properties</var>, with the value given as a pixel length if the dimension was a length, and
with the value given as a percentage if the dimension was a percentage.</p>
<p>When a user agent is to <dfn data-dfn-type="dfn" data-noexport="" id="align-descendants">align descendants<a class="self-link" href="rendering.html#align-descendants"></a></dfn> of a node, the user agent is expected to
align only those descendants that have both their <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left">margin-left</a> and <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right">margin-right</a> properties
computing to a value other than <a class="css" data-link-type="value" href="http://www.w3.org/TR/CSS21/box.html#value-def-margin-width"><code>auto</code></a>, that are over-constrained and that have one of those two
margins with a used value forced to a greater value, and that do not themselves have an applicable <code>align</code> attribute. When multiple elements are to <a data-link-type="dfn" href="rendering.html#align-descendants">align</a> a particular descendant, the most deeply nested such
element is expected to override the others. Aligned elements are expected to be aligned by having
the used values of their left and right margins be set accordingly.</p>
<h3 class="heading settled" data-level="10.3" id="non-replaced-elements"><span class="secno">10.3. </span><span class="content">Non-replaced elements</span><a class="self-link" href="rendering.html#non-replaced-elements"></a></h3>
<h4 class="heading settled" data-level="10.3.1" id="hidden-elements"><span class="secno">10.3.1. </span><span class="content">Hidden elements</span><a class="self-link" href="rendering.html#hidden-elements"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">[hidden], area, base, basefont, datalist, head, link, menu[type=context i], meta,</span>
<span class="nt">noembed, noframes, param, rp, script, source, style, template, track, title </span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> none<span class="p">;</span>
<span class="p">}</span>
<span class="nt">embed[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> inline<span class="p">;</span> <span class="k">height</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">width</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">input[type=hidden i] </span><span class="p">{</span> display none ! important; }
@media (scripting) {
noscript { display: none !important; }
}</pre>
<h4 class="heading settled" data-level="10.3.2" id="the-page"><span class="secno">10.3.2. </span><span class="content">The page</span><a class="self-link" href="rendering.html#the-page"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">html, body </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> block<span class="p">;</span> <span class="p">}</span></pre>
<p>For each property in the table below, given a <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element, the first attribute
that exists <a data-link-type="dfn" href="rendering.html#maps-to-the-pixel-length-property">maps to the pixel length property</a> on the <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element. If
none of the attributes for a property are found, or if the value of the attribute that was found
cannot be parsed successfully, then, if the <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document">node document</a>’s <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a> does not have its <a data-link-type="dfn" href="semantics.html#seamless-browsing-context-flag">seamless browsing context flag</a> set, a
default value of 8px is expected to be used for that property instead.</p>
<table>
<thead>
<tr>
<th>Property
</th><th>Source
</th></tr></thead><tbody>
<tr>
<td rowspan="3"><a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-top">margin-top</a>
</td><td><code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <code>marginheight</code> attribute
</td></tr><tr>
<td>The <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <a data-link-type="dfn" href="rendering.html#container-frame-element">container frame element</a>’s <code>marginheight</code> attribute
</td></tr><tr>
<td><code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <code>topmargin</code> attribute
</td></tr></tbody><tbody>
<tr>
<td rowspan="3"><a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right">margin-right</a>
</td><td><code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <code>marginwidth</code> attribute
</td></tr><tr>
<td>The <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <a data-link-type="dfn" href="rendering.html#container-frame-element">container frame element</a>’s <code>marginwidth</code> attribute
</td></tr><tr>
<td><code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <code>rightmargin</code> attribute
</td></tr></tbody><tbody>
<tr>
<td rowspan="3"><a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom">margin-bottom</a>
</td><td><code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <code>marginheight</code> attribute
</td></tr><tr>
<td>The <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <a data-link-type="dfn" href="rendering.html#container-frame-element">container frame element</a>’s <code>marginheight</code> attribute
</td></tr><tr>
<td><code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <code>bottommargin</code> attribute
</td></tr></tbody><tbody>
<tr>
<td rowspan="3"><a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left">margin-left</a>
</td><td><code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <code>marginwidth</code> attribute
</td></tr><tr>
<td>The <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <a data-link-type="dfn" href="rendering.html#container-frame-element">container frame element</a>’s <code>marginwidth</code> attribute
</td></tr><tr>
<td><code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <code>leftmargin</code> attribute
</td></tr></tbody></table>
<p>If the <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document">node document</a>’s <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a> is a <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>, and the <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a> of that <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a> is a <code>frame</code> or <code><a data-link-type="element" href="semantics.html#elementdef-iframe">iframe</a></code> element, then
the <dfn data-dfn-type="dfn" data-noexport="" id="container-frame-element">container frame element<a class="self-link" href="rendering.html#container-frame-element"></a></dfn> of the <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element is that <code>frame</code> or <code><a data-link-type="element" href="semantics.html#elementdef-iframe">iframe</a></code> element. Otherwise, there is no <a data-link-type="dfn" href="rendering.html#container-frame-element">container frame element</a>.</p>
<p class="warning">The above requirements imply that a page can change the margins of another page
(including one from another <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-origin">origin</a>) using, for example, an <code><a data-link-type="element" href="semantics.html#elementdef-iframe">iframe</a></code>. This
is potentially a security risk, as it might in some cases allow an attack to contrive a situation
in which a page is rendered not as the author intended, possibly for the purposes of phishing or
otherwise misleading the user.</p>
<hr>
<p>If a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code> is in a <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>, it is expected to be
positioned and sized to fit inside the content box of its <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a>.
If a <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a> is not <a data-link-type="dfn" href="rendering.html#being-rendered">being rendered</a>, it is expected to have a
viewport with zero width and zero height.</p>
<p>If the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code> is in a <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>, and the <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a> of that <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a> is a <code><a data-link-type="element" href="obsolete.html#elementdef-frame">frame</a></code> or <code><a data-link-type="element" href="semantics.html#elementdef-iframe">iframe</a></code> element, and that element has a <code>scrolling</code> attribute, and that attribute’s value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive">ASCII
case-insensitive</a> match for the string "<code>off</code>", "<code>noscroll</code>", or "<code>no</code>", then the user agent is expected to
prevent any scroll bars from being shown for the viewport of the <<a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>, regardless of the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-overflow-3/#overflow">overflow</a> property that applies to that viewport.</p>
<hr>
<p>When a <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element has a <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-common-background">background</a></code> attribute set to a non-empty value, the new value is expected to be <a data-link-type="dfn" href="infrastructure.html#re-resolved">resolved</a> relative to the element, and if this is successful, the user agent is
expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-background/#background-image">background-image</a> property to the <a data-link-type="dfn" href="infrastructure.html#resulting-absolute-url">resulting absolute URL</a>.</p>
<p>When a <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element has a <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-body-bgcolor">bgcolor</a></code> attribute
set, the new value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color
value</a>, and if that does not return an error, the user agent is expected to treat the
attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-background/#background-color">background-color</a> property to the resulting color.</p>
<p>When a <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element has a <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-body-text">text</a></code> attribute, its
value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color value</a>, and
if that does not return an error, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-color/#color0">color</a> property to
the resulting color.</p>
<p>When a <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element has a <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-body-link">link</a></code> attribute, its
value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color value</a>, and
if that does not return an error, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> setting the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-color/#color0">color</a> property of any
element in the <code>Document</code> matching the ':link' pseudo-class to the resulting color.</p>
<p>When a <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element has a <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-body-vlink">vlink</a></code> attribute,
its value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color value</a>,
and if that does not return an error, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> setting the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-color/#color0">color</a> property of any
element in the <code>Document</code> matching the ':visited' pseudo-class to the resulting
color.</p>
<p>When a <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element has an <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-body-alink">alink</a></code> attribute,
its value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color value</a>,
and if that does not return an error, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> setting the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-color/#color0">color</a> property of any
element in the <code>Document</code> matching the ':active' pseudo-class and either the ':link'
pseudo-class or the ':visited' pseudo-class to the resulting color.</p>
<h4 class="heading settled" data-level="10.3.3" id="non-replaced-elements-flow-content"><span class="secno">10.3.3. </span><span class="content">Flow content</span><a class="self-link" href="rendering.html#non-replaced-elements-flow-content"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">address, blockquote, center, div, figure, figcaption, footer, form, header, hr,</span>
<span class="nt">legend, listing, main, p, plaintext, pre, summary, xmp </span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> block<span class="p">;</span>
<span class="p">}</span>
<span class="nt">blockquote, figure, listing, p, plaintext, pre, xmp </span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span> <span class="k">margin-bottom</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">blockquote, figure </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> <span class="m">40</span><span class="l">px</span><span class="p">;</span> <span class="k">margin-right</span><span class="p">:</span> <span class="m">40</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">address </span><span class="p">{</span> <span class="k">font-style</span><span class="p">:</span> italic<span class="p">;</span> <span class="p">}</span>
<span class="nt">listing, plaintext, pre, xmp </span><span class="p">{</span>
<span class="k">font-family</span><span class="p">:</span> monospace<span class="p">;</span> <span class="k">white-space</span><span class="p">:</span> pre<span class="p">;</span>
<span class="p">}</span>
<span class="nt">dialog:not([open]) </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> none<span class="p">;</span> <span class="p">}</span>
<span class="nt">dialog </span><span class="p">{</span>
<span class="k">position</span><span class="p">:</span> absolute<span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> fit-content<span class="p">;</span>
<span class="k">height</span><span class="p">:</span> fit-content<span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> auto<span class="p">;</span>
<span class="k">border</span><span class="p">:</span> solid<span class="p">;</span>
<span class="k">padding</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span>
<span class="k">background</span><span class="p">:</span> white<span class="p">;</span>
<span class="k">color</span><span class="p">:</span> black<span class="p">;</span>
<span class="p">}</span>
<span class="nt">dialog::backdrop </span><span class="p">{</span>
<span class="k">position</span><span class="p">:</span> fixed<span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="k">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span>.1);
}
/* for small devices, modal dialogs go full-screen */
@media screen and (max-width: 540px) {
dialog:modal {
top: 0;
width: auto;
margin: 1em;
}
}</pre>
<p>The following rules are also expected to apply, as <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">pre[wrap] </span><span class="p">{</span> <span class="k">white-space</span><span class="p">:</span> pre-wrap<span class="p">;</span> <span class="p">}</span></pre>
<p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode">quirks mode</a>, the following rules are also expected to apply:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">form </span><span class="p">{</span> <span class="k">margin-bottom</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span> <span class="p">}</span></pre>
<hr>
<p>The <code><a data-link-type="element" href="obsolete.html#elementdef-center">center</a></code> element, and the <code><a data-link-type="element" href="semantics.html#elementdef-div">div</a></code> element when it has an <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-div-align">align</a></code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive">ASCII
case-insensitive</a> match for either the string "<code>center</code>" or the string
"<code>middle</code>", are expected to center text within themselves, as if they had
their <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <span class="css">center</span> in a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants">align descendants</a> to the center.</p>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-div">div</a></code> element, when it has an <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-div-align">align</a></code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code>left</code>", is expected to left-align text within itself, as if it had its <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-left">left</a> in a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational
hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants">align descendants</a> to the left.</p>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-div">div</a></code> element, when it has an <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-div-align">align</a></code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code>right</code>", is expected to right-align text within itself, as if it had its <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-right">right</a> in a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational
hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants">align descendants</a> to the right.</p>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-div">div</a></code> element, when it has an <code><a data-link-type="element-attr" href="obsolete.html#element-attrdef-div-align">align</a></code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code>justify</code>", is expected to full-justify text within itself, as if it had its <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-justify">justify</a> in a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational
hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants">align descendants</a> to the left.</p>
<h4 class="heading settled" data-level="10.3.4" id="non-replaced-elements-phrasing-content"><span class="secno">10.3.4. </span><span class="content">Phrasing content</span><a class="self-link" href="rendering.html#non-replaced-elements-phrasing-content"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">cite, dfn, em, i, var </span><span class="p">{</span> <span class="k">font-style</span><span class="p">:</span> italic<span class="p">;</span> <span class="p">}</span>
<span class="nt">b, strong </span><span class="p">{</span> <span class="k">font-weight</span><span class="p">:</span> bolder<span class="p">;</span> <span class="p">}</span>
<span class="nt">code, kbd, samp, tt </span><span class="p">{</span> <span class="k">font-family</span><span class="p">:</span> monospace<span class="p">;</span> <span class="p">}</span>
<span class="nt">big </span><span class="p">{</span> <span class="k">font-size</span><span class="p">:</span> larger<span class="p">;</span> <span class="p">}</span>
<span class="nt">small </span><span class="p">{</span> <span class="k">font-size</span><span class="p">:</span> smaller<span class="p">;</span> <span class="p">}</span>
<span class="nt">sub </span><span class="p">{</span> <span class="k">vertical-align</span><span class="p">:</span> sub<span class="p">;</span> <span class="p">}</span>
<span class="nt">sup </span><span class="p">{</span> <span class="k">vertical-align</span><span class="p">:</span> super<span class="p">;</span> <span class="p">}</span>
<span class="nt">sub, sup </span><span class="p">{</span> <span class="k">line-height</span><span class="p">:</span> normal<span class="p">;</span> <span class="k">font-size</span><span class="p">:</span> smaller<span class="p">;</span> <span class="p">}</span>
<span class="nt">ruby </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> ruby<span class="p">;</span> <span class="p">}</span>
<span class="nt">rb </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> ruby-base<span class="p">;</span> <span class="k">white-space</span><span class="p">:</span> nowrap<span class="p">;</span> <span class="p">}</span>
<span class="nt">rt </span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> ruby-text<span class="p">;</span>
<span class="k">white-space</span><span class="p">:</span> nowrap<span class="p">;</span>
<span class="k">font-size</span><span class="p">:</span> <span class="m">5</span><span class="l">0</span>%;
font-variant-east-asian: ruby;
text-emphasis: none;
}
rbc { display: ruby-base-container; }
rtc { display: ruby-text-container; }
ruby, rb, rt, rbc, rtc { unicode-bidi: isolate; }
:link { color: #0000EE; }
:visited { color: #551A8B; }
:link:active, :visited:active { color: #FF0000; }
:link, :visited { text-decoration: underline; cursor: pointer; }
a:link[rel~=help], a:visited[rel~=help],
area:link[rel~=help], area:visited[rel~=help] { cursor: help; }
:focus { outline: auto; }
mark { background: yellow; color: black; } /* this color is just a suggestion and can be changed based on implementation feedback */
abbr[title], acronym[title] { text-decoration: dotted underline; }
ins, u { text-decoration: underline; }
del, s, strike { text-decoration: line-through; }
blink { text-decoration: blink; }
q::before { content: open-quote; }
q::after { content: close-quote; }
br { display-outside: newline; } /* this also has bidi implications */
nobr { white-space: nowrap; }
wbr { display-outside: break-opportunity; } /* this also has bidi implications */
nobr wbr { white-space: normal; }</pre>
<p>The following rules are also expected to apply, as <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">br[clear=left i] </span><span class="p">{</span> <span class="k">clear</span><span class="p">:</span> left<span class="p">;</span> <span class="p">}</span>
<span class="nt">br[clear=right i] </span><span class="p">{</span> <span class="k">clear</span><span class="p">:</span> right<span class="p">;</span> <span class="p">}</span>
<span class="nt">br[clear=all i], br[clear=both i] </span><span class="p">{</span> <span class="k">clear</span><span class="p">:</span> both<span class="p">;</span> <span class="p">}</span></pre>
<p>User agents that do not support correct ruby rendering are expected to render parentheses
around the text of <code><a data-link-type="element" href="semantics.html#elementdef-rt">rt</a></code> elements in the absence of <code><a data-link-type="element" href="semantics.html#elementdef-rp">rp</a></code> elements. <a data-link-type="biblio" href="references.html#biblio-css3-ruby">[CSS3-RUBY]</a></p>
<hr>
<p>User agents are expected to support the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear">clear</a> property on inline elements (in order to render <code><a data-link-type="element" href="semantics.html#elementdef-br">br</a></code> elements with <code>clear</code> attributes) in the manner
described in the non-normative note to this effect in CSS2.1.</p>
<p>The initial value for the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-color/#color0">color</a> property is expected to be black. The initial value for the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-background/#background-color">background-color</a> property is expected to be <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-transparent">transparent</a>. The canvas' background is expected to
be white.</p>
<hr>
<p>When a <code><a data-link-type="element" href="obsolete.html#elementdef-font">font</a></code> element has a <code>color</code> attribute, its value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value">rules for parsing a legacy color
value</a>, and if that does not return an error, the user agent is expected to treat the
attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> setting the
element’s <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-color/#color0">color</a> property to the resulting color.</p>
<p>The <code><a data-link-type="element" href="obsolete.html#elementdef-font">font</a></code> element is expected to
override the color of any text decoration that spans the text of the element to the used value of
the element’s <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-color/#color0">color</a> property.</p>
<p>When a <code><a data-link-type="element" href="obsolete.html#elementdef-font">font</a></code> element has a <code>face</code> attribute, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-fonts-3/#propdef-font-family">font-family</a> property to the attribute’s
value.</p>
<p>When a <code><a data-link-type="element" href="obsolete.html#elementdef-font">font</a></code> element has a <code>size</code> attribute, the user agent is expected to use the following steps, known as the <dfn data-dfn-type="dfn" data-noexport="" id="rules-for-parsing-a-legacy-font-size">rules for
parsing a legacy font size<a class="self-link" href="rendering.html#rules-for-parsing-a-legacy-font-size"></a></dfn>, to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-fonts-3/#propdef-font-size">font-size</a> property:</p>
<ol>
<li>Let <var>input</var> be the attribute’s value.
</li><li>Let <var>position</var> be a pointer into <var>input</var>, initially pointing at the
start of the string.
</li><li><a data-link-type="dfn" href="infrastructure.html#skip-whitespace">Skip whitespace</a>.
</li><li>If <var>position</var> is past the end of <var>input</var>, there is no <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a>. Abort these steps.
</li><li>If the character at <var>position</var> is a U+002B PLUS SIGN character (+), then let <var>mode</var> be <i>relative-plus</i>, and advance <var>position</var> to the next character.
Otherwise, if the character at <var>position</var> is a U+002D HYPHEN-MINUS character (-), then
let <var>mode</var> be <i>relative-minus</i>, and advance <var>position</var> to the next
character. Otherwise, let <var>mode</var> be <i>absolute</i>.
</li><li><a data-link-type="dfn" href="infrastructure.html#collect-a-sequence-of-characters">Collect a sequence of characters</a> that are <a data-link-type="dfn" href="infrastructure.html#ascii-digits">ASCII digits</a>, and let
the resulting sequence be <var>digits</var>.
</li><li>If <var>digits</var> is the empty string, there is no <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hint</a>. Abort these steps.
</li><li>Interpret <var>digits</var> as a base-ten integer. Let <var>value</var> be the resulting
number.
</li><li>
<p>If <var>mode</var> is <i>relative-plus</i>, then increment <var>value</var> by 3. If <var>mode</var> is <i>relative-minus</i>, then let <var>value</var> be the result of subtracting <var>value</var> from 3.</p>
</li><li>If <var>value</var> is greater than 7, let it be 7.
</li><li>If <var>value</var> is less than 1, let it be 1.
</li><li>
<p>Set <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-fonts-3/#propdef-font-size">font-size</a> to the keyword corresponding to the value of <var>value</var> according to
the following table:</p>
<table>
<thead>
<tr>
<th><var>value</var>
</th><th><a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-fonts-3/#propdef-font-size">font-size</a> keyword
</th><th>Notes
</th></tr></thead><tbody>
<tr>
<td>1
</td><td>x-small
</td><td>
</td></tr><tr>
<td>2
</td><td>small
</td><td>
</td></tr><tr>
<td>3
</td><td>medium
</td><td>
</td></tr><tr>
<td>4
</td><td>large
</td><td>
</td></tr><tr>
<td>5
</td><td>x-large
</td><td>
</td></tr><tr>
<td>6
</td><td>xx-large
</td><td>
</td></tr><tr>
<td>7
</td><td>xxx-large
</td><td><i>see below</i>
</td></tr></tbody></table>
<p><small>The "xxx-large" value is a non-CSS value used here to
indicate a font size 50% larger than "xx-large".</small></p>
</li></ol>
<h4 class="heading settled" data-level="10.3.5" id="bidirectional-text"><span class="secno">10.3.5. </span><span class="content">Bidirectional text</span><a class="self-link" href="rendering.html#bidirectional-text"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">[dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) </span><span class="p">{</span> <span class="k">direction</span><span class="p">:</span> ltr<span class="p">;</span> <span class="p">}</span>
<span class="nt">[dir]:dir(rtl), bdi:dir(rtl) </span><span class="p">{</span> <span class="k">direction</span><span class="p">:</span> rtl<span class="p">;</span> <span class="p">}</span>
<span class="nt">address, blockquote, center, div, figure, figcaption, footer, form, header, hr,</span>
<span class="nt">legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,</span>
<span class="nt">h3, h4, h5, h6, nav, section, table, caption, colgroup, col, thead,</span>
<span class="nt">tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,</span>
<span class="nt">[dir=ltr i], [dir=rtl i], [dir=auto i] </span><span class="p">{</span>
<span class="k">unicode-bidi</span><span class="p">:</span> isolate<span class="p">;</span>
<span class="p">}</span>
<span class="nt">bdo, bdo[dir] </span><span class="p">{</span> <span class="k">unicode-bidi</span><span class="p">:</span> isolate-override<span class="p">;</span> <span class="p">}</span>
<span class="nt">input[dir=auto i]:matches([type=search i], [type=tel i], [type=url i],</span>
<span class="nt">[type=email i]), textarea[dir=auto i], pre[dir=auto i] </span><span class="p">{</span>
<span class="k">unicode-bidi</span><span class="p">:</span> plaintext<span class="p">;</span>
<span class="p">}</span>
<span class="c">/* see prose for input elements whose type attribute is in the Text state */</span>
<span class="c">/* the rules setting the 'content' property on br and wbr elements also has bidi implications */</span></pre>
<p>When an <code><a data-link-type="element" href="semantics.html#elementdef-input">input</a></code> element’s <code>dir</code> attribute is in the <a data-link-type="state" href="dom.html#statedef-dir-auto">auto</a> state and its <code>type</code> attribute is in the <a data-link-type="dfn" href="dom.html#text">Text</a> state, then the user agent is
expected to act as if it had a user-agent-level style sheet rule setting the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi">unicode-bidi</a> property to <a class="css" data-link-type="maybe" href="http://www.w3.org/TR/css-writing-modes-3/#valdef-unicode-bidi-plaintext">plaintext</a>.</p>
<p>Input fields (i.e. <code><a data-link-type="element" href="semantics.html#elementdef-textarea">textarea</a></code> elements, and <code><a data-link-type="element" href="semantics.html#elementdef-input">input</a></code> elements when their <code>type</code> attribute is in the <a data-link-type="element-state" href="semantics.html#element-statedef-input-text">Text</a>, <a data-link-type="element-state" href="semantics.html#element-statedef-input-search">Search</a>, <a data-link-type="element-state" href="semantics.html#element-statedef-input-telephone">Telephone</a>, <a data-link-type="element-state" href="semantics.html#element-statedef-input-url">URL</a>,
or <a data-link-type="element-state" href="semantics.html#element-statedef-input-e-mail">E-mail</a> state) are expected to present an editing
user interface with a directionality that matches the element’s <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property.</p>
<p>When the document’s character encoding is ISO-8859-8, the following rules are additionally
expected to apply, following those above: <a data-link-type="biblio" href="references.html#biblio-encoding">[ENCODING]</a></p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">address, blockquote, center, div, figure, figcaption, footer, form, header, hr,</span>
<span class="nt">legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,</span>
<span class="nt">h3, h4, h5, h6, nav, section, table, caption, colgroup, col, thead,</span>
<span class="nt">tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, [dir=ltr i],</span>
<span class="nt">[dir=rtl i], [dir=auto i], *|* </span><span class="p">{</span>
<span class="k">unicode-bidi</span><span class="p">:</span> bidi-override<span class="p">;</span>
<span class="p">}</span>
<span class="nt">input:not([type=submit i]):not([type=reset i]):not([type=button i]),</span>
<span class="nt">textarea, keygen </span><span class="p">{</span>
<span class="k">unicode-bidi</span><span class="p">:</span> normal<span class="p">;</span>
<span class="p">}</span></pre>
<h4 class="heading settled" data-level="10.3.6" id="quotes"><span class="secno">10.3.6. </span><span class="content">Quotes</span><a class="self-link" href="rendering.html#quotes"></a></h4>
<p>This block is automatically generated from the Unicode Common Locale Data Repository. <a data-link-type="biblio" href="references.html#biblio-cldr">[CLDR]</a></p>
<p>User agents are expected to use either the block below (which will be regularly updated) or to
automatically generate their own copy directly from the source material. The language codes are
derived from the CLDR file names. The quotes are derived from the <code>delimiter</code> blocks, with fallback handled as specified in the CLDR documentation.</p>
<p>@namespace url(http://www.w3.org/1999/xhtml);</p>
<p>:root { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(af), :not(:lang(af)) > :lang(af) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(agq), :not(:lang(agq)) > :lang(agq) { quotes: '\201e' '\201d' '\201a' '\2019' } /* „ ” ‚ ’ */
:root:lang(ak), :not(:lang(ak)) > :lang(ak) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(am), :not(:lang(am)) > :lang(am) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(ar), :not(:lang(ar)) > :lang(ar) { quotes: '\201d' '\201c' '\2019' '\2018' } /* ” “ ’ ‘ */
:root:lang(asa), :not(:lang(asa)) > :lang(asa) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(az-Cyrl), :not(:lang(az-Cyrl)) > :lang(az-Cyrl) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(bas), :not(:lang(bas)) > :lang(bas) { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
:root:lang(bem), :not(:lang(bem)) > :lang(bem) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(bez), :not(:lang(bez)) > :lang(bez) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(bg), :not(:lang(bg)) > :lang(bg) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(bm), :not(:lang(bm)) > :lang(bm) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(bn), :not(:lang(bn)) > :lang(bn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(br), :not(:lang(br)) > :lang(br) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(brx), :not(:lang(brx)) > :lang(brx) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(bs-Cyrl), :not(:lang(bs-Cyrl)) > :lang(bs-Cyrl) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(ca), :not(:lang(ca)) > :lang(ca) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */
:root:lang(cgg), :not(:lang(cgg)) > :lang(cgg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(chr), :not(:lang(chr)) > :lang(chr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(cs), :not(:lang(cs)) > :lang(cs) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(da), :not(:lang(da)) > :lang(da) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(dav), :not(:lang(dav)) > :lang(dav) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(de), :not(:lang(de)) > :lang(de) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(de-CH), :not(:lang(de-CH)) > :lang(de-CH) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(dje), :not(:lang(dje)) > :lang(dje) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(dua), :not(:lang(dua)) > :lang(dua) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
:root:lang(dyo), :not(:lang(dyo)) > :lang(dyo) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(dz), :not(:lang(dz)) > :lang(dz) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ebu), :not(:lang(ebu)) > :lang(ebu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ee), :not(:lang(ee)) > :lang(ee) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(el), :not(:lang(el)) > :lang(el) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(en), :not(:lang(en)) > :lang(en) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(es), :not(:lang(es)) > :lang(es) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */
:root:lang(et), :not(:lang(et)) > :lang(et) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(eu), :not(:lang(eu)) > :lang(eu) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */
:root:lang(ewo), :not(:lang(ewo)) > :lang(ewo) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(fa), :not(:lang(fa)) > :lang(fa) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(ff), :not(:lang(ff)) > :lang(ff) { quotes: '\201e' '\201d' '\201a' '\2019' } /* „ ” ‚ ’ */
:root:lang(fi), :not(:lang(fi)) > :lang(fi) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
:root:lang(fr), :not(:lang(fr)) > :lang(fr) { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
:root:lang(fr-CA), :not(:lang(fr-CA)) > :lang(fr-CA) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(fr-CH), :not(:lang(fr-CH)) > :lang(fr-CH) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(gsw), :not(:lang(gsw)) > :lang(gsw) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(gu), :not(:lang(gu)) > :lang(gu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(guz), :not(:lang(guz)) > :lang(guz) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ha), :not(:lang(ha)) > :lang(ha) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(he), :not(:lang(he)) > :lang(he) { quotes: '\0022' '\0022' '\0027' '\0027' } /* " " ' ' */
:root:lang(hi), :not(:lang(hi)) > :lang(hi) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(hr), :not(:lang(hr)) > :lang(hr) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(hu), :not(:lang(hu)) > :lang(hu) { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* „ ” » « */
:root:lang(id), :not(:lang(id)) > :lang(id) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ig), :not(:lang(ig)) > :lang(ig) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(it), :not(:lang(it)) > :lang(it) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(ja), :not(:lang(ja)) > :lang(ja) { quotes: '\300c' '\300d' '\300e' '\300f' } /* 「 」 『 』 */
:root:lang(jgo), :not(:lang(jgo)) > :lang(jgo) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(jmc), :not(:lang(jmc)) > :lang(jmc) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kab), :not(:lang(kab)) > :lang(kab) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(kam), :not(:lang(kam)) > :lang(kam) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kde), :not(:lang(kde)) > :lang(kde) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kea), :not(:lang(kea)) > :lang(kea) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(khq), :not(:lang(khq)) > :lang(khq) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ki), :not(:lang(ki)) > :lang(ki) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kkj), :not(:lang(kkj)) > :lang(kkj) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(kln), :not(:lang(kln)) > :lang(kln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(km), :not(:lang(km)) > :lang(km) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kn), :not(:lang(kn)) > :lang(kn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ko), :not(:lang(ko)) > :lang(ko) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ksb), :not(:lang(ksb)) > :lang(ksb) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ksf), :not(:lang(ksf)) > :lang(ksf) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
:root:lang(lag), :not(:lang(lag)) > :lang(lag) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
:root:lang(lg), :not(:lang(lg)) > :lang(lg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ln), :not(:lang(ln)) > :lang(ln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(lo), :not(:lang(lo)) > :lang(lo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(lt), :not(:lang(lt)) > :lang(lt) { quotes: '\201e' '\201c' '\201e' '\201c' } /* „ “ „ “ */
:root:lang(lu), :not(:lang(lu)) > :lang(lu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(luo), :not(:lang(luo)) > :lang(luo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(luy), :not(:lang(luy)) > :lang(luy) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(lv), :not(:lang(lv)) > :lang(lv) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mas), :not(:lang(mas)) > :lang(mas) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mer), :not(:lang(mer)) > :lang(mer) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mfe), :not(:lang(mfe)) > :lang(mfe) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mg), :not(:lang(mg)) > :lang(mg) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(mgo), :not(:lang(mgo)) > :lang(mgo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mk), :not(:lang(mk)) > :lang(mk) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(ml), :not(:lang(ml)) > :lang(ml) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mr), :not(:lang(mr)) > :lang(mr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ms), :not(:lang(ms)) > :lang(ms) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mua), :not(:lang(mua)) > :lang(mua) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(my), :not(:lang(my)) > :lang(my) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(naq), :not(:lang(naq)) > :lang(naq) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(nb), :not(:lang(nb)) > :lang(nb) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
:root:lang(nd), :not(:lang(nd)) > :lang(nd) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(nl), :not(:lang(nl)) > :lang(nl) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(nmg), :not(:lang(nmg)) > :lang(nmg) { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
:root:lang(nn), :not(:lang(nn)) > :lang(nn) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
:root:lang(nnh), :not(:lang(nnh)) > :lang(nnh) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(nus), :not(:lang(nus)) > :lang(nus) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(nyn), :not(:lang(nyn)) > :lang(nyn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(pl), :not(:lang(pl)) > :lang(pl) { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
:root:lang(pt), :not(:lang(pt)) > :lang(pt) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(pt-PT), :not(:lang(pt-PT)) > :lang(pt-PT) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(rn), :not(:lang(rn)) > :lang(rn) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
:root:lang(ro), :not(:lang(ro)) > :lang(ro) { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
:root:lang(rof), :not(:lang(rof)) > :lang(rof) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ru), :not(:lang(ru)) > :lang(ru) { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
:root:lang(rw), :not(:lang(rw)) > :lang(rw) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
:root:lang(rwk), :not(:lang(rwk)) > :lang(rwk) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(saq), :not(:lang(saq)) > :lang(saq) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(sbp), :not(:lang(sbp)) > :lang(sbp) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(seh), :not(:lang(seh)) > :lang(seh) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ses), :not(:lang(ses)) > :lang(ses) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(sg), :not(:lang(sg)) > :lang(sg) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(shi), :not(:lang(shi)) > :lang(shi) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
:root:lang(shi-Latn), :not(:lang(shi-Latn)) > :lang(shi-Latn) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
:root:lang(si), :not(:lang(si)) > :lang(si) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(sk), :not(:lang(sk)) > :lang(sk) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(sl), :not(:lang(sl)) > :lang(sl) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(sn), :not(:lang(sn)) > :lang(sn) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
:root:lang(so), :not(:lang(so)) > :lang(so) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(sq), :not(:lang(sq)) > :lang(sq) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(sr), :not(:lang(sr)) > :lang(sr) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(sr-Latn), :not(:lang(sr-Latn)) > :lang(sr-Latn) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(sv), :not(:lang(sv)) > :lang(sv) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
:root:lang(sw), :not(:lang(sw)) > :lang(sw) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(swc), :not(:lang(swc)) > :lang(swc) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ta), :not(:lang(ta)) > :lang(ta) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(te), :not(:lang(te)) > :lang(te) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(teo), :not(:lang(teo)) > :lang(teo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(th), :not(:lang(th)) > :lang(th) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ti-ER), :not(:lang(ti-ER)) > :lang(ti-ER) { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */
:root:lang(to), :not(:lang(to)) > :lang(to) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(tr), :not(:lang(tr)) > :lang(tr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(twq), :not(:lang(twq)) > :lang(twq) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(tzm), :not(:lang(tzm)) > :lang(tzm) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(uk), :not(:lang(uk)) > :lang(uk) { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
:root:lang(ur), :not(:lang(ur)) > :lang(ur) { quotes: '\201d' '\201c' '\2019' '\2018' } /* ” “ ’ ‘ */
:root:lang(vai), :not(:lang(vai)) > :lang(vai) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(vai-Latn), :not(:lang(vai-Latn)) > :lang(vai-Latn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(vi), :not(:lang(vi)) > :lang(vi) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(vun), :not(:lang(vun)) > :lang(vun) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(xh), :not(:lang(xh)) > :lang(xh) { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */
:root:lang(xog), :not(:lang(xog)) > :lang(xog) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(yav), :not(:lang(yav)) > :lang(yav) { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
:root:lang(yo), :not(:lang(yo)) > :lang(yo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(zh), :not(:lang(zh)) > :lang(zh) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(zh-Hant), :not(:lang(zh-Hant)) > :lang(zh-Hant) { quotes: '\300c' '\300d' '\300e' '\300f' } /* 「 」 『 』 */
:root:lang(zu), :not(:lang(zu)) > :lang(zu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */</p>
<h4 class="heading settled" data-level="10.3.7" id="sections-and-headings"><span class="secno">10.3.7. </span><span class="content">Sections and headings</span><a class="self-link" href="rendering.html#sections-and-headings"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">article, aside, h1, h2, h3, h4, h5, h6, nav, section </span><span class="p">{</span>
<span class="k">display</span><span class="p">:</span> block<span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1 </span><span class="p">{</span> <span class="k">margin-top</span><span class="p">:</span> <span class="m">0</span>.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
h3 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }</pre>
<p>In the following CSS block, <var>x</var> is shorthand for the following selector: <code>:matches(article, aside, nav, section)</code></p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">x h1 </span><span class="p">{</span> <span class="k">margin-top</span><span class="p">:</span> <span class="m">0</span>.83em; margin-bottom: 0.83em; font-size: 1.50em; }
x x h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
x x x h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }</pre>
<p class="note" role="note"> The shorthand is used to keep this block at least mildly readable. </p>
<h4 class="heading settled" data-level="10.3.8" id="lists"><span class="secno">10.3.8. </span><span class="content">Lists</span><a class="self-link" href="rendering.html#lists"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">dir, dd, dl, dt, menu, ol, ul </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> block<span class="p">;</span> <span class="p">}</span>
<span class="nt">li </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> list-item<span class="p">;</span> <span class="p">}</span>
<span class="nt">dir, dl, menu, ol, ul </span><span class="p">{</span> <span class="k">margin-top</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span> <span class="k">margin-bottom</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">:matches(dir, dl, menu, ol, ul) :matches(dir, dl, menu, ol, ul) </span><span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">margin-bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">dd </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> <span class="m">40</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* LTR-specific: use 'margin-right' for rtl elements */</span>
<span class="nt">dir, menu, ol, ul </span><span class="p">{</span> <span class="k">padding-left</span><span class="p">:</span> <span class="m">40</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* LTR-specific: use 'padding-right' for rtl elements */</span>
<span class="nt">ol </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> decimal<span class="p">;</span> <span class="p">}</span>
<span class="nt">dir, menu, ul </span><span class="p">{</span>
<span class="k">list-style-type</span><span class="p">:</span> disc<span class="p">;</span>
<span class="p">}</span>
<span class="nt">:matches(dir, menu, ol, ul) :matches(dir, menu, ul) </span><span class="p">{</span>
<span class="k">list-style-type</span><span class="p">:</span> circle<span class="p">;</span>
<span class="p">}</span>
<span class="nt">:matches(dir, menu, ol, ul) :matches(dir, menu, ol, ul) :matches(dir, menu, ul) </span><span class="p">{</span>
<span class="k">list-style-type</span><span class="p">:</span> square<span class="p">;</span>
<span class="p">}</span></pre>
<p>The following rules are also expected to apply, as <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational
hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">ol[type=1], li[type=1] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> decimal<span class="p">;</span> <span class="p">}</span>
<span class="nt">ol[type=a], li[type=a] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> lower-alpha<span class="p">;</span> <span class="p">}</span>
<span class="nt">ol[type=A], li[type=A] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> upper-alpha<span class="p">;</span> <span class="p">}</span>
<span class="nt">ol[type=i], li[type=i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> lower-roman<span class="p">;</span> <span class="p">}</span>
<span class="nt">ol[type=I], li[type=I] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> upper-roman<span class="p">;</span> <span class="p">}</span>
<span class="nt">ul[type=none i], li[type=none i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> none<span class="p">;</span> <span class="p">}</span>
<span class="nt">ul[type=disc i], li[type=disc i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> disc<span class="p">;</span> <span class="p">}</span>
<span class="nt">ul[type=circle i], li[type=circle i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> circle<span class="p">;</span> <span class="p">}</span>
<span class="nt">ul[type=square i], li[type=square i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> square<span class="p">;</span> <span class="p">}</span></pre>
<p>In the above stylesheet, the attribute selectors for the <code>ol</code> and <code><a data-link-type="element" href="semantics.html#elementdef-li">li</a></code> elements are expected to be treated as <a data-link-type="dfn" href="infrastructure.html#case-sensitive">case-sensitive</a>.</p>
<p>When rendering <code><a data-link-type="element" href="semantics.html#elementdef-li">li</a></code> elements, non-CSS user agents are expected to use the <a data-link-type="dfn" href="semantics.html#ordinal-value">ordinal value</a> of the <code><a data-link-type="element" href="semantics.html#elementdef-li">li</a></code> element to render the counter in the list item
marker.</p>
<p class="critical">This specification does not yet define the
CSS-specific rules for rendering <code><a data-link-type="element" href="semantics.html#elementdef-li">li</a></code> elements, because CSS doesn’t yet provide
sufficient hooks for this purpose. </p>
<h4 class="heading settled" data-level="10.3.9" id="tables"><span class="secno">10.3.9. </span><span class="content">Tables</span><a class="self-link" href="rendering.html#tables"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">table </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table<span class="p">;</span> <span class="p">}</span>
<span class="nt">caption </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-caption<span class="p">;</span> <span class="p">}</span>
<span class="nt">colgroup, colgroup[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-column-group<span class="p">;</span> <span class="p">}</span>
<span class="nt">col, col[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-column<span class="p">;</span> <span class="p">}</span>
<span class="nt">thead, thead[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-header-group<span class="p">;</span> <span class="p">}</span>
<span class="nt">tbody, tbody[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-row-group<span class="p">;</span> <span class="p">}</span>
<span class="nt">tfoot, tfoot[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-footer-group<span class="p">;</span> <span class="p">}</span>
<span class="nt">tr, tr[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-row<span class="p">;</span> <span class="p">}</span>
<span class="nt">td, th, td[hidden], th[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-cell<span class="p">;</span> <span class="p">}</span>
<span class="nt">colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],</span>
<span class="nt">tfoot[hidden], tr[hidden], td[hidden], th[hidden] </span><span class="p">{</span>
<span class="k">visibility</span><span class="p">:</span> collapse<span class="p">;</span>
<span class="p">}</span>
<span class="nt">table </span><span class="p">{</span>
<span class="k">box-sizing</span><span class="p">:</span> border-box<span class="p">;</span>
<span class="k">border-spacing</span><span class="p">:</span> <span class="m">2</span><span class="l">px</span><span class="p">;</span>
<span class="k">border-collapse</span><span class="p">:</span> separate<span class="p">;</span>
<span class="k">text-indent</span><span class="p">:</span> initial<span class="p">;</span>
<span class="p">}</span>
<span class="nt">td, th </span><span class="p">{</span> <span class="k">padding</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">th </span><span class="p">{</span> <span class="k">font-weight</span><span class="p">:</span> bold<span class="p">;</span> <span class="p">}</span>
<span class="nt">thead, tbody, tfoot, table > tr </span><span class="p">{</span> <span class="k">vertical-align</span><span class="p">:</span> middle<span class="p">;</span> <span class="p">}</span>
<span class="nt">tr, td, th </span><span class="p">{</span> <span class="k">vertical-align</span><span class="p">:</span> inherit<span class="p">;</span> <span class="p">}</span>
<span class="nt">table, td, th </span><span class="p">{</span> <span class="k">border-color</span><span class="p">:</span> gray<span class="p">;</span> <span class="p">}</span>
<span class="nt">thead, tbody, tfoot, tr </span><span class="p">{</span> <span class="k">border-color</span><span class="p">:</span> inherit<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[rules=none i], table[rules=groups i], table[rules=rows i],</span>
<span class="nt">table[rules=cols i], table[rules=all i], table[frame=void i],</span>
<span class="nt">table[frame=above i], table[frame=below i], table[frame=hsides i],</span>
<span class="nt">table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],</span>
<span class="nt">table[frame=box i], table[frame=border i],</span>
<span class="nt">table[rules=none i] > tr > td, table[rules=none i] > tr > th,</span>
<span class="nt">table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,</span>
<span class="nt">table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,</span>
<span class="nt">table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,</span>
<span class="nt">table[rules=all i] > tr > td, table[rules=all i] > tr > th,</span>
<span class="nt">table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,</span>
<span class="nt">table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,</span>
<span class="nt">table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,</span>
<span class="nt">table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,</span>
<span class="nt">table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,</span>
<span class="nt">table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,</span>
<span class="nt">table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,</span>
<span class="nt">table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,</span>
<span class="nt">table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,</span>
<span class="nt">table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,</span>
<span class="nt">table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,</span>
<span class="nt">table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,</span>
<span class="nt">table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,</span>
<span class="nt">table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,</span>
<span class="nt">table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th </span><span class="p">{</span>
<span class="k">border-color</span><span class="p">:</span> black<span class="p">;</span>
<span class="p">}</span></pre>
<p>The following rules are also expected to apply, as <a data-link-type="dfn" href="rendering.html#presentational-hints">presentational hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">table[align=left i] </span><span class="p">{</span> <span class="k">float</span><span class="p">:</span> left<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[align=right i] </span><span class="p">{</span> <span class="k">float</span><span class="p">:</span> right<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[align=center i] </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> auto<span class="p">;</span> <span class="k">margin-right</span><span class="p">:</span> auto<span class="p">;</span> <span class="p">}</span>
<span class="nt">thead[align=absmiddle i], tbody[align=absmiddle i], tfoot[align=absmiddle i],</span>
<span class="nt">tr[align=absmiddle i], td[align=absmiddle i], th[align=absmiddle i] </span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> center<span class="p">;</span>
<span class="p">}</span>
<span class="nt">caption[align=bottom i] </span><span class="p">{</span> <span class="k">caption-side</span><span class="p">:</span> bottom<span class="p">;</span> <span class="p">}</span>
<span class="nt">p[align=left i], h1[align=left i], h2[align=left i], h3[align=left i],</span>
<span class="nt">h4[align=left i], h5[align=left i], h6[align=left i] </span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> left<span class="p">;</span>
<span class="p">}</span>
<span class="nt">p[align=right i], h1[align=right i], h2[align=right i], h3[align=right i],</span>
<span class="nt">h4[align=right i], h5[align=right i], h6[align=right i] </span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> right<span class="p">;</span>
<span class="p">}</span>
<span class="nt">p[align=center i], h1[align=center i], h2[align=center i], h3[align=center i],</span>
<span class="nt">h4[align=center i], h5[align=center i], h6[align=center i] </span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> center<span class="p">;</span>
<span class="p">}</span>
<span class="nt">p[align=justify i], h1[align=justify i], h2[align=justify i], h3[align=justify i],</span>
<span class="nt">h4[align=justify i], h5[align=justify i], h6[align=justify i] </span><span class="p">{</span>
<span class="k">text-align</span><span class="p">:</span> justify<span class="p">;</span>
<span class="p">}</span>
<span class="nt">thead[valign=top i], tbody[valign=top i], tfoot[valign=top i],</span>
<span class="nt">tr[valign=top i], td[valign=top i], th[valign=top i] </span><span class="p">{</span>
<span class="k">vertical-align</span><span class="p">:</span> top<span class="p">;</span>
<span class="p">}</span>
<span class="nt">thead[valign=middle i], tbody[valign=middle i], tfoot[valign=middle i],</span>
<span class="nt">tr[valign=middle i], td[valign=middle i], th[valign=middle i] </span><span class="p">{</span>
<span class="k">vertical-align</span><span class="p">:</span> middle<span class="p">;</span>
<span class="p">}</span>
<span class="nt">thead[valign=bottom i], tbody[valign=bottom i], tfoot[valign=bottom i],</span>
<span class="nt">tr[valign=bottom i], td[valign=bottom i], th[valign=bottom i] </span><span class="p">{</span>
<span class="k">vertical-align</span><span class="p">:</span> bottom<span class="p">;</span>
<span class="p">}</span>
<span class="nt">thead[valign=baseline i], tbody[valign=baseline i], tfoot[valign=baseline i],</span>
<span class="nt">tr[valign=baseline i], td[valign=baseline i], th[valign=baseline i] </span><span class="p">{</span>
<span class="k">vertical-align</span><span class="p">:</span> baseline<span class="p">;</span>
<span class="p">}</span>
<span class="nt">td[nowrap], th[nowrap] </span><span class="p">{</span> <span class="k">white-space</span><span class="p">:</span> nowrap<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[rules=none i], table[rules=groups i], table[rules=rows i],</span>
<span class="nt">table[rules=cols i], table[rules=all i] </span><span class="p">{</span>
<span class="k">border-style</span><span class="p">:</span> hidden<span class="p">;</span>
<span class="k">border-collapse</span><span class="p">:</span> collapse<span class="p">;</span>
<span class="p">}</span>
<span class="nt">table[border] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> outset<span class="p">;</span> <span class="p">}</span> <span class="c">/* only if border is not equivalent to zero */</span>
<span class="nt">table[frame=void i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=above i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> outset hidden hidden hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=below i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden hidden outset hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=hsides i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> outset hidden outset hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=lhs i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden hidden hidden outset<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=rhs i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden outset hidden hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=vsides i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden outset<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=box i], table[frame=border i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> outset<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[border] > tr > td, table[border] > tr > th,</span>
<span class="nt">table[border] > thead > tr > td, table[border] > thead > tr > th,</span>
<span class="nt">table[border] > tbody > tr > td, table[border] > tbody > tr > th,</span>
<span class="nt">table[border] > tfoot > tr > td, table[border] > tfoot > tr > th </span><span class="p">{</span>
<span class="p">/</span>* only if border is not equivalent to zero */
border-width: 1px;
border-style: inset;
}
table[rules=none i] > tr > td, table[rules=none i] > tr > th,
table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th {
border-width: 1px;
border-style: none;
}
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th {
border-width: 1px;
border-style: none solid;
}
table[rules=all i] > tr > td, table[rules=all i] > tr > th,
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
border-width: 1px;
border-style: solid;
}
table[rules=groups i] > colgroup {
border-left-width: 1px;
border-left-style: solid;
border-right-width: 1px;
border-right-style: solid;
}
table[rules=groups i] > thead,
table[rules=groups i] > tbody,
table[rules=groups i] > tfoot {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}
table[rules=rows i] > tr, table[rules=rows i] > thead > tr,
table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}</pre>
<p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode">quirks mode</a>, the following rules are also expected to apply:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">table </span><span class="p">{</span>
<span class="k">font-weight</span><span class="p">:</span> initial<span class="p">;</span>
<span class="k">font-style</span><span class="p">:</span> initial<span class="p">;</span>
<span class="k">font-variant</span><span class="p">:</span> initial<span class="p">;</span>
<span class="k">font-size</span><span class="p">:</span> initial<span class="p">;</span>
<span class="k">line-height</span><span class="p">:</span> initial<span class="p">;</span>
<span class="k">white-space</span><span class="p">:</span> initial<span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> initial<span class="p">;</span>
<span class="p">}</span></pre>
<hr>
<p>For the purposes of the CSS table model, the <code><a data-link-type="element" href="semantics.html#elementdef-col">col</a></code> element is expected to be treated
as if it was present as many times as its <code>span</code> attribute <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value">specifies</a>.</p>
<p>For the purposes of the CSS table model, the <code><a data-link-type="element" href="semantics.html#elementdef-colgroup">colgroup</a></code> element, if it contains no <code><a data-link-type="element" href="semantics.html#elementdef-col">col</a></code> element, is expected to be treated as if it had as many such children as its <code>span</code> attribute <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value">specifies</a>.</p>
<p>For the purposes of the CSS table model, the <code>colspan</code> and <code>rowspan</code> attributes on <code><a data-link-type="element" href="semantics.html#elementdef-td">td</a></code> and <code><a data-link-type="element" href="semantics.html#elementdef-th">th</a></code> elements are expected to <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value">provide</a> the <i>special knowledge</i> regarding cells spanning rows and columns.</p>
<p>In <a data-link-type="dfn" href="infrastructure.html#html-document">HTML documents</a>, the following rules are also expected to apply:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>
<span class="nt">:matches(table, thead, tbody, tfoot, tr) > form </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> none !important; }</pre>
<hr>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-table">table</a></code> element’s <code>cellspacing</code> attribute <a data-link-type="dfn" href="rendering.html#maps-to-the-pixel-length-property">maps to the pixel length property</a> <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing">border-spacing</a> on the element.</p>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-table">table</a></code> element’s <code>cellpadding</code> attribute <a data-link-type="dfn" href="rendering.html#maps-to-the-pixel-length-property">maps to the pixel length
properties</a> <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-top">padding-top</a>, <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-right">padding-right</a>, <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-bottom">padding-bottom</a>, and <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-left">padding-left</a> of any <code>td</code> and <code><a data-link-type="element" href="semantics.html#elementdef-th">th</a></code> elements that have corresponding <a data-link-type="dfn" href="semantics.html#cell">cells</a> in the <a data-link-type="dfn" href="semantics.html#table">table</a> corresponding to
the <code><a data-link-type="element" href="semantics.html#elementdef-table">table</a></code> element.</p>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-table">table</a></code> element’s <code>hspace</code> attribute <a data-link-type="dfn" href="rendering.html#as-hints-for-the-rendering">maps to the dimension properties</a> <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left">margin-left</a> and <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right">margin-right</a> on the <code><a data-link-type="element" href="semantics.html#elementdef-table">table</a></code> element.</p>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-table">table</a></code> element’s <code>vspace</code> attribute <a data-link-type="dfn" href="rendering.html#as-hints-for-the-rendering">maps to the dimension properties</a> <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-top">margin-top</a> and <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom">margin-bottom</a> on the <code><a data-link-type="element" href="semantics.html#elementdef-table">table</a></code> element.</p>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-table">table</a></code> element’s <code>height</code> attribute <a data-link-type="dfn" href="rendering.html#map-to-the-dimension-property-ignoring-zero">maps to the dimension property (ignoring zero)</a> <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> on the <code>table</code> element.</p>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-table">table</a></code> element’s <code>width</code> attribute <a data-link-type="dfn" href="rendering.html#map-to-the-dimension-property-ignoring-zero">maps to the dimension property (ignoring zero)</a> <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> on the <code>table</code> element.</p>
<p>The <code><a data-link-type="element" href="semantics.html#elementdef-col">col</a></code> element’s <code>width</code> attribute <a data-link-type="dfn" href="rendering.html#map-to-the-dimension-property-ignoring-zero">maps