8000 [css-display] Split 'layout-specific display type' inot 'layout-speci… · w3c/csswg-drafts@db43489 · GitHub
Skip to content

Commit db43489

Browse files
tabatkinstabatkins
committed
[css-display] Split 'layout-specific display type' inot 'layout-specific leaf type' and 'layout-specific internal type'. Tweak markup.
1 parent 1ca45b8 commit db43489

2 files changed

Lines changed: 80 additions & 44 deletions

File tree

‎css-display/Overview.bs‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Group: csswg
88
Level: 3
99
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
1010
Abstract: This module contains the features of CSS relating to the 'display' property and other box-generation details.
11-
Ignored Terms: show, display-model, display-role
11+
Ignored Terms: show, display-model, display-role, table row group box
1212
Link Defaults: css-lists-3 (property) counter-increment
1313
</pre>
1414

@@ -87,7 +87,7 @@ Telling Contents How to Lay Out: the 'display-inside' property</h3>
8787
If the element's computed 'display-outside' value is ''inline-level'',
8888
the element is an inline element,
8989
and lays out its contents using inline layout. [[!CSS21]]
90-
If the element's computed 'display-outside' value is an <a>layout-specific display role</a>,
90+
If the element's computed 'display-outside' value is an <a>layout-specific internal type</a>,
9191
this elements acts as normal for its given 'display-outside' value.
9292
Otherwise, this value computes to ''display-inside/block''.
9393

@@ -154,10 +154,10 @@ Interacting with Ancestors and Siblings: the 'display-outside' property</h3>
154154
but its children and pseudo-elements still generate boxes as normal.
155155
For the purposes of box generation and layout,
156156
the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.
157-
<p class='issue'>
158-
''display-outside/contents'' currently only has an effect on box generation and layout.
159-
Other things that care about the document tree are unaffected, like counter scopes.
160-
Is this what we want?
157+
158+
Issue: ''display-outside/contents'' currently only has an effect on box generation and layout.
159+
Other things that care about the document tree are unaffected, like counter scopes.
160+
Is this what we want?
161161

162162
<dt><dfn>none</dfn>
163163
<dd>
@@ -166,30 +166,49 @@ Interacting with Ancestors and Siblings: the 'display-outside' property</h3>
166166

167167
Note: This value exists for legacy reasons,
168168
and interacts with the separate 'box-suppress' property.
169-
It is recommended that 'box-suppress' be used to suppress an element,
169+
170+
Advisement: It is recommended that 'box-suppress' be used instead of ''display: none'',
170171
so that the element's display type is automatically preserved
171172
for when it's no longer suppressed.
172173

173174
<dt><dfn>table-row-group</dfn>, <dfn>table-header-group</dfn>, <dfn>table-footer-group</dfn>, <dfn>table-row</dfn>, <dfn>table-cell</dfn>, <dfn>table-column-group</dfn>, <dfn>table-column</dfn>, <dfn>table-caption</dfn>
174175
<dd>
175-
The element is an <dfn>internal table element</dfn>,
176+
The element is an <dfn dfn>internal table element</dfn>,
176177
and participates in a table layout context. [[!CSS21]]
177-
These values are all <a>layout-specific display roles</a>.
178+
179+
''display-outside/table-cell'' and ''display-outside/table-caption'' are <a>layout-specific leaf types</a>;
180+
the rest are <a>layout-specific internal types</a>.
178181

179182
<dt><dfn>ruby-base</dfn>, <dfn>ruby-text</dfn>, <dfn>ruby-base-container</dfn>, <dfn>ruby-text-container</dfn>
180183
<dd>
181-
The element is an <dfn>internal ruby element</dfn>,
184+
The element is an <dfn dfn>internal ruby element</dfn>,
182185
and participates in a ruby layout context. [[!CSS3RUBY]]
183-
These values are all <a>layout-specific display roles</a>.
186+
187+
''ruby-base'' and ''ruby-text'' are <a>layout-specific leaf types</a>;
188+
''ruby-base-container'' and ''ruby-text-container'' are <a>layout-specific internal types</a>.
184189
</dl>
185190

186191
Some values of 'display-outside' are specialized for particular formatting contexts,
187-
and don't have meaning outside of those specific contexts.
188-
These values are called <dfn title="layout-specific display role">layout-specific display roles</dfn>.
189-
Generally, a <a>layout-specific display role</a> will generate wrapper boxes around itself
190-
to ensure that it ends up in the correct formatting context,
191-
if it's not placed in an appropriate formatting context;
192-
the details of this are specified by each layout mode.
192+
and don't have meaning outside of those specific contexts:
193+
194+
<dl>
195+
<dt><dfn>layout-specific internal types</dfn>
196+
<dd>
197+
These display types require their parent and children to be of particular display types.
198+
For example, a ''table-row'' box requires its parent to be a <a>table row group box</a>
199+
and its children to be ''display-outside/table-cell'' boxes.
200+
201+
<dt><dfn>layout-specific leaf types</dfn>
202+
<dd>
203+
These display types require their parent to be of a particular display type,
204+
but can accept any 'display-inside' value.
205+
For example, a ''display-outside/table-caption'' box must have a ''display-inside/table'' parent,
206+
but can establish any kind of formatting context for its children.
207+
</dl>
208+
209+
Boxes with layout-specific types generate wrapper boxes around themselves
210+
when placed in an incompatible parent,
211+
as defined by their respective specifications.
193212

194213
<h3 id='display-list'>
195214
Creating List Markers: th 12C8 e 'display-list' property</h3>

‎css-display/Overview.html‎

Lines changed: 44 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ <h3 class="heading settled" data-level=2.1 id=the-display-inside><span class=sec
210210
If the element’s computed <a class=property data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside</a> value is <a class=css data-link-type=maybe href=#valdef-display-outside-inline-level title=inline-level>inline-level</a>,
211211
the element is an inline element,
212212
and lays out its contents using inline layout. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>
213-
If the element’s computed <a class=property data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside</a> value is an <a data-link-type=dfn href=#layout-specific-display-role title="layout-specific display role">layout-specific display role</a>,
213+
If the element’s computed <a class=property data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside</a> value is an <a data-link-type=dfn href=#layout-specific-internal-types title="layout-specific internal type">layout-specific internal type</a>,
214214
this elements acts as normal for its given <a class=property data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside</a> value.
215215
Otherwise, this value computes to <a class=css data-link-for=display-inside data-link-type=maybe href=#valdef-display-inside-block title=block>block</a>.
216216

@@ -268,42 +268,61 @@ <h3 class="heading settled" data-level=2.2 id=the-display-outside><span class=se
268268
but its children and pseudo-elements still generate boxes as normal.
269269
For the purposes of box generation and layout,
270270
the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.
271-
<p class=issue id=issue-70648825><a class=self-link href=#issue-70648825></a>
272-
<a class=css data-link-for=display-outside data-link-type=maybe href=#valdef-display-outside-contents title=contents>contents</a> currently only has an effect on box generation and layout.
273-
Other things that care about the document tree are unaffected, like counter scopes.
274-
Is this what we want?
271+
272+
<p class=issue id=issue-1cacf007><a class=self-link href=#issue-1cacf007></a><a class=css data-link-for=display-outside data-link-type=maybe href=#valdef-display-outside-contents title=contents>contents</a> currently only has an effect on box generation and layout.
273+
Other things that care about the document tree are unaffected, like counter scopes.
274+
Is this what we want?</p>
275275

276276
<dt><dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-none>none<a class=self-link href=#valdef-display-outside-none></a></dfn>
277277
<dd>
278278
The element generates no boxes,
279279
and does not participate in any formatting context.
280280

281281
<p class=note>Note: This value exists for legacy reasons,
282-
and interacts with the separate <a class=property data-link-type=propdesc href=#propdef-box-suppress title=box-suppress>box-suppress</a> property.
283-
It is recommended that <a class=property data-link-type=propdesc href=#propdef-box-suppress title=box-suppress>box-suppress</a> be used to suppress an element,
282+
and interacts with the separate <a class=property data-link-type=propdesc href=#propdef-box-suppress title=box-suppress>box-suppress</a> property.</p>
283+
284+
<strong class=advisement>It is recommended that <a class=property data-link-type=propdesc href=#propdef-box-suppress title=box-suppress>box-suppress</a> be used instead of <a class=css data-link-type=propdesc href=#propdef-display title=display>display: none</a>,
284285
so that the element’s display type is automatically preserved
285< 12C8 span class="diff-text-marker">-
for when it’s no longer suppressed.</p>
286+
for when it’s no longer suppressed.</strong>
286287

287288
<dt><dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-table-row-group>table-row-group<a class=self-link href=#valdef-display-outside-table-row-group></a></dfn>, <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-table-header-group>table-header-group<a class=self-link href=#valdef-display-outside-table-header-group></a></dfn>, <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-table-footer-group>table-footer-group<a class=self-link href=#valdef-display-outside-table-footer-group></a></dfn>, <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-table-row>table-row<a class=self-link href=#valdef-display-outside-table-row></a></dfn>, <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-table-cell>table-cell<a class=self-link href=#valdef-display-outside-table-cell></a></dfn>, <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-table-column-group>table-column-group<a class=self-link href=#valdef-display-outside-table-column-group></a></dfn>, <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-table-column>table-column<a class=self-link href=#valdef-display-outside-table-column></a></dfn>, <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-table-caption>table-caption<a class=self-link href=#valdef-display-outside-table-caption></a></dfn>
288289
<dd>
289-
The element is an <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-internal-table-element>internal table element<a class=self-link href=#valdef-display-outside-internal-table-element></a></dfn>,
290+
The element is an <dfn data-dfn-type=dfn data-noexport="" id=internal-table-element>internal table element<a class=self-link href=#internal-table-element></a></dfn>,
290291
and participates in a table layout context. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>
291-
These values are all <a data-link-type=dfn href=#layout-specific-display-role title="layout-specific display roles">layout-specific display roles</a>.
292+
293+
<p><a class=css data-link-for=display-outside data-link-type=maybe href=#valdef-display-outside-table-cell title=table-cell>table-cell</a> and <a class=css data-link-for=display-outside data-link-type=maybe href=#valdef-display-outside-table-caption title=table-caption>table-caption</a> are <a data-link-type=dfn href=#layout-specific-leaf-types title="layout-specific leaf types">layout-specific leaf types</a>;
294+
the rest are <a data-link-type=dfn href=#layout-specific-internal-types title="layout-specific internal types">layout-specific internal types</a>.</p>
292295

293296
<dt><dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-ruby-base>ruby-base<a class=self-link href=#valdef-display-outside-ruby-base></a></dfn>, <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-ruby-text>ruby-text<a class=self-link href=#valdef-display-outside-ruby-text></a></dfn>, <dfn class=css data-dfn-for=display-outside data-dfn-type=value data-export="" id=valdef-display-outside-ruby-base-container>ruby-base-container<a class=self-link href=#valdef-display-outside-ruby-base-container></a></dfn>, <dfn class=css data-dfn-for=display-outside 9DFA data-dfn-type=value data-export="" id=valdef-display-outside-ruby-text-container>ruby-text-container<a class=self-link href=#valdef-display-outside-ruby-text-container></a></dfn>
294297
<dd>
295-
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>,
298+
The element is an <dfn data-dfn-type=dfn data-noexport="" id=internal-ruby-element>internal ruby element<a class=self-link href=#internal-ruby-element></a></dfn>,
296299
and participates in a ruby layout context. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3ruby title=biblio-CSS3RUBY>[CSS3RUBY]</a>
297-
These values are all <a data-link-type=dfn href=#layout-specific-display-role title="layout-specific display roles">layout-specific display roles</a>.
300+
301+
<p><a class=css data-link-type=maybe href=#valdef-display-outside-ruby-base title=ruby-base>ruby-base</a> and <a class=css data-link-type=maybe href=#valdef-display-outside-ruby-text title=ruby-text>ruby-text</a> are <a data-link-type=dfn href=#layout-specific-leaf-types title="layout-specific leaf types">layout-specific leaf types</a>;
302+
<a class=css data-link-type=maybe href=#valdef-display-outside-ruby-base-container title=ruby-base-container>ruby-base-container</a> and <a class=css data-link-type=maybe href=#valdef-display-outside-ruby-text-container title=ruby-text-container>ruby-text-container</a> are <a data-link-type=dfn href=#layout-specific-internal-types title="layout-specific internal types">layout-specific internal types</a>.</p>
298303
</dl>
299304

300305
<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,
301-
and don’t have meaning outside of those specific contexts.
302-
These values are called <dfn data-dfn-type=dfn data-noexport="" id=layout-specific-display-role title="layout-specific display role">layout-specific display roles<a class=self-link href=#layout-specific-display-role></a></dfn>.
303-
Generally, a <a data-link-type=dfn href=#layout-specific-display-role title="layout-specific display role">layout-specific display role</a> will generate wrapper boxes around itself
304-
to ensure that it ends up in the correct formatting context,
305-
if it’s not placed in an appropriate formatting context;
306-
the details of this are specified by each layout mode.</p>
306+
and don’t have meaning outside of those specific contexts:</p>
307+
308+
<dl>
309+
<dt><dfn data-dfn-type=dfn data-noexport="" id=layout-specific-internal-types>layout-specific internal types<a class=self-link href=#layout-specific-internal-types></a></dfn>
310+
<dd>
311+
These display types require their parent and children to be of particular display types.
312+
For example, a <a class=css data-link-type=maybe href=#valdef-display-outside-table-row title=table-row>table-row</a> box requires its parent to be a <a data-link-type=dfn title="table row group box">table row group box</a>
313+
and its children to be <a class=css data-link-for=display-outside data-link-type=maybe href=#valdef-display-outside-table-cell title=table-cell>table-cell</a> boxes.
314+
315+
<dt><dfn data-dfn-type=dfn data-noexport="" id=layout-specific-leaf-types>layout-specific leaf types<a class=self-link href=#layout-specific-leaf-types></a></dfn>
316+
<dd>
317+
These display types require their parent to be of a particular display type,
318+
but can accept any <a class=property data-link-type=propdesc href=#propdef-display-inside title=display-inside>display-inside</a> value.
319+
For example, a <a class=css data-link-for=display-outside data-link-type=maybe href=#valdef-display-outside-table-caption title=table-caption>table-caption</a> box must have a <a class=css data-link-for=display-inside data-link-type=maybe href=#valdef-display-inside-table title=table>table</a> parent,
320+
but can establish any kind of formatting context for its children.
321+
</dl>
322+
323+
<p>Boxes with layout-specific types generate wrapper boxes around themselves
324+
when placed in an incompatible parent,
325+
as defined by their respective specifications.</p>
307326

308327
<h3 class="heading settled" data-level=2.3 id 8096 =display-list><span class=secno>2.3 </span><span class=content>
309328
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>
@@ -728,9 +747,10 @@ <h2 class="no-num no-ref heading settled" id=index><span class=content>
728747
<li>inline-table, <a href=#valdef-display-inline-table title="section 2.4">2.4</a>
729748
<li>inlinification, <a href=#inlinify title="section 2.5">2.5</a>
730749
<li>inlinify, <a href=#inlinify title="section 2.5">2.5</a>
731-
<li>internal ruby element, <a href=#valdef-display-outside-internal-ruby-element title="section 2.2">2.2</a>
732-
<li>internal table element, <a href=#valdef-display-outside-internal-table-element title="section 2.2">2.2</a>
733-
<li>layout-specific display role, <a href=#layout-specific-display-role title="section 2.2">2.2</a>
750+
<li>internal ruby element, <a href=#internal-ruby-element title="section 2.2">2.2</a>
751+
<li>internal table element, <a href=#internal-table-element title="section 2.2">2.2</a>
752+
<li>layout-specific internal types, <a href=#layout-specific-internal-types title="section 2.2">2.2</a>
753+
<li>layout-specific leaf types, <a href=#layout-specific-leaf-types title="section 2.2">2.2</a>
734754
<li>list-item<ul><li>value for display-list, <a href=#valdef-display-list-list-item title="section 2.3">2.3</a>
735755
<li>value for display, <a href=#valdef-display-list-item title="section 2.4">2.4</a>
736756
</ul><li>none<ul><li>value for display-outside, <a href=#valdef-display-outside-none title="section 2.2">2.2</a>
@@ -768,9 +788,6 @@ <h2 class="no-num no-ref heading settled" id=property-index><span class=content>
768788
<tr><th scope=row><a class=css data-link-type=property href=#propdef-box-suppress title=box-suppress>box-suppress</a><td>show | discard | hide<td>normal<td>all elements<td>no<td>n/a<td>all<td><td>see prose</table></div>
769789

770790

771-
<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue>
772-
<a class=css data-link-for=display-outside data-link-type=maybe href=#valdef-display-outside-contents title=contents>contents</a> currently only has an effect on box generation and layout.
773-
Other things that care about the document tree are unaffected, like counter scopes.
774-
Is this what we want?
775-
776-
<a href=#issue-70648825> ↵ </a></div></div>
791+
<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue><a class=css data-link-for=display-outside data-link-type=maybe href=#valdef-display-outside-contents title=contents>contents</a> currently only has an effect on box generation and layout.
792+
Other things that care about the document tree are unaffected, like counter scopes.
793+
Is this what we want?<a href=#issue-1cacf007> ↵ </a></div></div>

0 commit comments

Comments
 (0)