8000 [css-display] Reworking headings · w3c/csswg-drafts@a8da023 · GitHub
Skip to content

Commit a8da023

Browse files
tabatkinstabatkins
committed
[css-display] Reworking headings
1 parent d62e90b commit a8da023

2 files changed

Lines changed: 32 additions & 26 deletions

File tree

‎css-display/Overview.bs‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,15 @@ Values</h3>
6060
as their property value. For readability it has not been repeated explicitly.
6161

6262
<h2 id='the-display-properties'>
63-
The Display Properties</h2>
63+
Controlling Layout Modes</h2>
6464

6565
The 'display' shorthand and its associated family of properties control the layout mode of elements
6666
(how the element determines the sizes and positions of itself and its descendants),
6767
and what boxes they and their descendants generate.
6868

6969

7070
<h3 id='the-display-inside'>
71-
Setting the layout mode: the 'display-inside' property</h3>
71+
Telling Contents How to Lay Out: the 'display-inside' property</h3>
7272

7373
<pre class="propdef">
7474
Name: display-inside
@@ -114,7 +114,7 @@ Setting the layout mode: the 'display-inside' property</h3>
114114

115115

116116
<h3 id='the-display-outside'>
117-
Interacting with the layout mode: the 'display-outside' property</h3>
117+
Interacting with Ancestors and Siblings: the 'display-outside' property</h3>
118118

119119
<pre class="propdef">
120120
Name: display-outside
@@ -141,6 +141,13 @@ Interacting with the layout mode: the 'display-outside' property</h3>
141141
The element is inline-level,
142142
and participates in an inline formatting context. [[!CSS21]]
143143

144+
<dt><dfn>run-in</dfn>
145+
<dd>
146+
The element is a <a>run-in element</a>.
147+
Run-in elements act like inlines or blocks,
148+
depending on the surrounding elements.
149+
This is described more fully in a later section.
150+
144151
<dt><dfn>contents</dfn>
145152
<dd>
146153
The element itself does not generate any boxes,
@@ -174,13 +181,6 @@ Interacting with the layout mode: the 'display-outside' property</h3>
174181
The element is an <dfn>internal ruby element</dfn>,
175182
and participates in a ruby layout context. [[!CSS3RUBY]]
176183
These values are all <a>layout-specific display roles</a>.
177-
178-
<dt><dfn>run-in</dfn>
179-
<dd>
180-
The element is a <a>run-in element</a>.
181-
Run-in elements act like inlines or blocks,
182-
depending on the surrounding elements.
183-
This is described more fully in a later section.
184184
</dl>
185185

186186
Some values of 'display-outside' are specialized for particular formatting contexts,
@@ -192,7 +192,7 @@ Interacting with the layout mode: the 'display-outside' property</h3>
192192
the details of this are specified by each layout mode.
193193

194194
<h3 id='display-list'>
195-
Creating a list item: the 'display-list' property</h3>
195+
Creating List Markers: the 'display-list' property</h3>
196196

197197
<pre class="propdef">
198198
Name: display-list
@@ -291,6 +291,9 @@ The 'display' shorthand property</h3>
291 77EC 291
</dl>
292292

293293

294+
295+
296+
294297
<h2 id='box-suppress'>
295298
Controlling box generation: the 'box-suppress' property</h2>
296299

‎css-display/Overview.html‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -116,11 +116,11 @@ <h2 class="no-num no-toc no-ref heading settled" id=contents><span class=content
116116
<ul class=toc>
117117
<li><a href=#placement><span class=secno>1.1</span> Module interactions</a>
118118
<li><a href=#values><span class=secno>1.2</span> Values</a></ul>
119-
<li><a href=#the-display-properties><span class=secno>2</span> The Display Properties</a>
119+
<li><a href=#the-display-properties><span class=secno>2</span> Controlling Layout Modes</a>
120120
<ul class=toc>
121-
<li><a href=#the-display-inside><span class=secno>2.1</span> Setting the layout mode: the <span class=property data-link-type=propdesc title=display-inside>display-inside</span> property</a>
122-
<li><a href=#the-display-outside><span class=secno>2.2</span> Interacting with the layout mode: the <span class=property data-link-type=propdesc title=display-outside>display-outside</span> property</a>
123-
<li><a href=#display-list><span class=secno>2.3</span> Creating a list item: the <span class=property data-link-type=propdesc title=display-list>display-list</span> property</a>
121+
<li><a href=#the-display-inside><span class=secno>2.1</span> Telling Contents How to Lay Out: the <span class=property data-link-type=propdesc title=display-inside>display-inside</span> property</a>
122+
<li><a href=#the-display-outside><span class=secno>2.2</span> Interacting with Ancestors and Siblings: the <span class=property data-link-type=propdesc title=display-outside>display-outside</span> property</a>
123+
<li><a href=#display-list><span class=secno>2.3</span> Creating List Markers: the <span class=property data-link-type=propdesc title=display-list>display-list</span> property</a>
124124
<li><a href=#the-display><span class=secno>2.4</span> The <span class=property data-link-type=propdesc title=display>display</span> shorthand property</a></ul>
125125
<li><a href=#box-suppress><span class=secno>3</span> Controlling box generation: the <span class=property data-link-type=propdesc title=box-suppress>box-suppress</span> property</a>
126126
<li><a href=#run-in><span class=secno>4</span> Run-In Layout</a>
@@ -191,15 +191,15 @@ <h3 class="heading settled" data-level=1.2 id=values><span class=secno>1.2 </spa
191191
as their property value. For readability it has not been repeated explicitly.</p>
192192

193193
<h2 class="heading settled" data-level=2 id=the-display-properties><span class=secno>2 </span><span class=content>
194-
The Display Properties</span><a class=self-link href=#the-display-properties></a></h2>
194+
Controlling Layout Modes</span><a class=self-link href=#the-display-properties></a></h2>
195195

196196
<p>The <a class=property data-link-type=propdesc href=#propdef-display title=display>display</a> shorthand and its associated family of properties control the layout mode of elements
197197
(how the element determines the sizes and positions of itself and its descendants),
198198
and what boxes they and their descendants generate.</p>
199199

200200

201201
<h3 class="heading settled" data-level=2.1 id=the-display-inside><span class=secno>2.1 </span><span class=content>
202-
Setting the layout mode: the <a class=property data-link-type=propdesc href=#propdef-display-inside title=display-inside>display-inside</a> property</span><a class=self-link href=#the-display-inside></a></h3>
202+
Telling Contents How to Lay Out: the <a class=property data-link-type=propdesc href=#propdef-display-inside title=display-inside>display-inside</a> property</span><a class=self-link href=#the-display-inside></a></h3>
203203

204204
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-display-inside>display-inside<a class=self-link href=#propdef-display-inside></a></dfn><tr><th>Value:<td class=prod>auto <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> block <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> table <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> flex <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> grid <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> ruby<tr><th>Initial:<td>auto<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>a keyword<tr><th>Percentages:<td>n/a</table>
205205

@@ -236,7 +236,7 @@ <h3 class="heading settled" data-level=2.1 id=the-display-inside><span class=sec
236236

237237

238238
<h3 class="heading settled" data-level=2.2 id=the-display-outside><span class=secno>2.2 </span><span class=content>
239-
Interacting with the layout mode: the <a class=property data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside</a> property</span><a class=self-link href=#the-display-outside></a></h3>
239+
Interacting with Ancestors and Siblings: the <a class=property data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside</a> property</span><a class=self-link href=#the-display-outside></a></h3>
240240

241241
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-display-outside>display-outside<a class=self-link href=#propdef-display-outside></a></dfn><tr><th>Value:<td class=prod>block-level <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> inline-level <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> run-in <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> contents <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> none <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> table-row-group <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> table-header-group <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> table-footer-group <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> table-row <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> table-cell <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> table-column-group <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> table-column <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> table-caption <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> ruby-base <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> ruby-text <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> ruby-base-container <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> ruby-text-container<tr><th>Initial:<td>inline-level<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>as specified<tr><th>Percentages:<td>n/a</table>
242242

@@ -254,6 +254,13 @@ <h3 class="heading settled" data-level=2.2 id=the-display-outside><span class=se
254254
The element is inline-level,
255255
and participates in an inline formatting context. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>
256256

257+
<dt><dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-run-in>run-in<a class=self-link href=#valdef-display-outside-run-in></a></dfn>
258+
<dd>
259+
The element is a <a data-link-type=dfn href=#run-in-element title="run-in element">run-in element</a>.
260+
Run-in elements act like inlines or blocks,
261+
depending on the surrounding elements.
262+
This is described more fully in a later section.
263+
257264
<dt><dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-contents>contents<a class=self-link href=#valdef-display-outside-contents></a></dfn>
258265
<dd>
259266
The element itself does not generate any boxes,
@@ -287,13 +294,6 @@ <h3 class="heading settled" data-level=2.2 id=the-display-outside><span class=se
287294
The element is an <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-internal-ruby-element>internal ruby element<a class=self-link href=#valdef-display-outside-internal-ruby-element></a></dfn>,
288295
and participates in a ruby layout context. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3ruby title=biblio-CSS3RUBY>[CSS3RUBY]</a>
289296
These values are all <a data-link-type=dfn href=#layout-specific-display-role title="layout-specific display roles">layout-specific display roles</a>.
290-
291-
<dt><dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-run-in>run-in<a class=self-link href=#valdef-display-outside-run-in></a></dfn>
292-
<dd>
293-
The element is a <a data-link-type=dfn href=#run-in-element title="run-in element">run-in element</a>.
294-
Run-in elements act like inlines or blocks,
295-
depending on the surrounding elements.
296-
This is described more fully in a later section.
297297
</dl>
298298

299299
<p>Some values of <a class=property data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside</a> are specialized for particular formatting contexts,
@@ -305,7 +305,7 @@ <h3 class="heading settled" data-level=2.2 id=the-display-outside><span class=se
305305
the details of this are specified by each layout mode.</p>
306306

307307
<h3 class="heading settled" data-level=2.3 id=display-list><span class=secno>2.3 </span><span class=content>
308-
Creating a list item: the <a class=property data-link-type=propdesc href=#propdef-display-list title=display-list>display-list</a> property</span><a class=self-link href=#display-list></a></h3>
308+
Creating List Markers: the <a class=property data-link-type=propdesc href=#propdef-display-list title=display-list>display-list</a> property</span><a class=self-link href=#display-list></a></h3>
309309

310310
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-display-list>display-list<a class=self-link href=#propdef-display-list></a></dfn><tr><th>Value:<td class=prod>none <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> list-item<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>as specified<tr><th>Percentages:<td>n/a</table>
311311

@@ -386,6 +386,9 @@ <h3 class="heading settled" data-level=2.4 id=the-display><span class=secno>2.4
386386
</dl>
387387

388388

389+
390+
391+
389392
<h2 class="heading settled" data-level=3 id=box-suppress><span class=secno>3 </span><span class=content>
390393
Controlling box generation: the <a class=property data-link-type=propdesc href=#propdef-box-suppress title=box-suppress>box-suppress</a> property</span><a class=self-link href=#box-suppress></a></h2>
391394

0 commit comments

Comments
 (0)