Skip to content

Commit 78fe69b

Browse files
tabatkinstabatkins
committed
[css-display] Rewrite run-in to match fantasai's proposal.
1 parent a56ae22 commit 78fe69b

2 files changed

Lines changed: 69 additions & 62 deletions

File tree

‎css-display/Overview.bs‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ Shortname: css-display
77
Group: csswg
88
Level: 3
99
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
10+
Editor: fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
1011
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, table row group box, formatting context
12+
Ignored Terms: show, display-model, display-role, table row group box, formatting context, inline-level box
1213
Link Defaults: css-lists-3 (property) counter-increment
1314
</pre>
1415

@@ -152,10 +153,10 @@ Interacting with Ancestors and Siblings: the 'display-outside' property</h3>
152153

153154
<dt><dfn>run-in</dfn>
154155
<dd>
155-
The element is a <a>run-in element</a>.
156+
The element generates a <a>run-in box</a>.
156157
Run-in elements act like inlines or blocks,
157158
depending on the surrounding elements.
158-
This is described more fully in a later section.
159+
See [[#run-in]] for details.
159160

160161
<dt><dfn>contents</dfn>
161162
<dd>
@@ -419,9 +420,8 @@ Controlling box generation: the 'box-suppress' property</h2>
419420
<h2 id='run-in'>
420421
Run-In Layout</h2>
421422

422-
A <dfn>run-in element</dfn> is an element with ''display-outside: run-in''.
423-
A <a>run-in element</a> acts differently based on whether its siblings are inlines or blocks;
424-
if it precedes a block, it <em>merges into</em> the block.
423+
A <dfn>run-in box</dfn> is a box that <em>merges into</em> a block that comes after it,
424+
inserting itself at the beginning of that block’s inline-level content.
425425
This is useful for formatting compact headlines, definitions, and other similar things,
426426
where the appropriate DOM structure is to have a headline preceding the following prose,
427427
but the desired display is an inline headline laying out with the text.
@@ -445,7 +445,6 @@ Run-In Layout</h2>
445445
display: run-in;
446446
}
447447
.dict > dt::after {
448-
display: run-in;
449448
content: ": "
450449
}
451450
&lt;/style>
@@ -463,32 +462,36 @@ Run-In Layout</h2>
463462
</pre>
464463
</div>
465464

466-
Whenever there is a sequence of one or more contiguous sibling <a>run-in elements</a>,
467-
if the sequence is followed by an element with ''display-inside: block'' and ''display-outside: block-level'',
468-
all of the elements in the sequence generate inline-level boxes inside the following block,
469-
as if they were ''display-outside: inline-level'',
470-
after its ''::marker'' pseudo-element's boxes (if any),
471-
but preceding any other boxes generates by the contents of the block
472-
(including the box generated by the ''::before'' pseudo-element, if any).
465+
A <a>run-in box</a> behaves exactly as an <a>inline-level box</a>, except:
473466

474-
Otherwise, the behavior depends on how many sibling <a>run-in elements</a> are in the sequence:
467+
<ul>
468+
<li>
469+
If a <a>run-in sequence</a> is immediately followed by a block box
470+
that does not establish a new <a>formatting context</a>,
471+
it is inserted as direct children of the block box
472+
after its ''::marker'' pseudo-element's boxes (if any),
473+
but preceding any other boxes generates by the contents of the block
474+
(including the box generated by the ''::before'' pseudo-element, if any).
475475

476-
<dl>
477-
<dt>only one
478-
<dd>
479-
The <a>run-in element</a> generates a block-level box,
480-
as if it were ''display-outside: block-level''.
476+
The reparented content is then formatted as if originally parented there.
477+
<span class='note'>Note that only layout is affected, not inheritance,
478+
because property inheritance for non-anonymous boxes is based only on the element tree.</span>
481479

482-
<dt>more than one
483-
<dd>
484-
Each <a>run-in element</a> generates an inline-level box,
485-
as if it were ''display-outside: inline-level''.
486-
An anonymous block box is generated around the entire sequence of boxes thus generated.
487-
</dl>
480+
<li>
481+
Otherwise,
482+
an anonymous block box is generated around the <a>run-in sequence</a>
483+
and all immediately following inline-level content
484+
(up to, but not including, the next <a>run-in sequence</a>, if any).
485+
486+
<li>
487+
A <a>run-in box</a> with ''display-inside: auto'' <a>inlinifies</a> its contents.
488+
</ul>
489+
490+
A <dfn>run-in sequence</dfn> is a maximal sequence of consecutive sibling <a>run-in boxes</a>
491+
and intervening white space and/or out-of-flow boxes.
488492

489-
Issue: Define handling of whitespace containing out-of-flow elements between run-ins,
490-
run-ins that contain block-level content (<a>inlinify</a> the contents recursively?),
491-
and anything else in bz's feedback.
493+
Issue: Should out-of-flow elements get reparented, left behind, or break apart the sequence?
494+
<a href="http://lists.w3.org/Archives/Public/www-style/2012Aug/0257.html">See thread.</a>
492495

493496
<h2 class=no-num id="acknowledgments">
494497
Acknowledgments</h2>

‎css-display/Overview.html‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,9 @@ <h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content
6262
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-display%5D%20feedback">www-style@w3.org</a>
6363
with subject line
6464
“<kbd>[css-display] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)
65-
<dt>Editor:
65+
<dt>Editors:
6666
<dd><dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
67+
<dd><dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>fantasai</a> (<span class="p-org org">Invited Expert</span>)
6768
</dl>
6869
</div>
6970
<div data-fill-with=warning></div>
@@ -266,10 +267,11 @@ <h3 class="heading settled" data-level=2.2 id=the-display-outside><span class=se
266267

267268
<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>
268269
<dd>
269-
The element is a <a data-link-type=dfn href=#run-in-element title="run-in element">run-in element</a>.
270+
The element generates a <a data-link-type=dfn href=#run-in-box title="run-in box">run-in box</a>.
270271
Run-in elements act like inlines or blocks,
271272
depending on the surrounding elements.
272-
This is described more fully in a later section.
273+
See <a data-section="" href=#run-in>§4
274+
Run-In Layout</a> for details.
273275

274276
<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>
275277
<dd>
@@ -506,9 +508,8 @@ <h2 class="heading settled" data-level=3 id=box-suppress><span class=secno>3 </s
506508
<h2 class="heading settled" data-level=4 id=run-in><span class=secno>4 </span><span class=content>
507509
Run-In Layout</span><a class=self-link href=#run-in></a></h2>
508510

509-
<p>A <dfn data-dfn-type=dfn data-noexport="" id=run-in-element>run-in element<a class=self-link href=#run-in-element></a></dfn> is an element with <a class=css data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside: run-in</a>.
510-
A <a data-link-type=dfn href=#run-in-element title="run-in element">run-in element</a> acts differently based on whether its siblings are inlines or blocks;
511-
if it precedes a block, it <em>merges into</em> the block.
511+
<p>A <dfn data-dfn-type=dfn data-noexport="" id=run-in-box>run-in box<a class=self-link href=#run-in-box></a></dfn> is a box that <em>merges into</em> a block that comes after it,
512+
inserting itself at the beginning of that block’s inline-level content.
512513
This is useful for formatting compact headlines, definitions, and other similar things,
513514
where the appropriate DOM structure is to have a headline preceding the following prose,
514515
but the desired display is an inline headline laying out with the text.</p>
@@ -531,7 +532,6 @@ <h2 class="heading settled" data-level=4 id=run-in><span class=secno>4 </span><s
531532
display: run-in;
532533
}
533534
.dict &gt; dt::after {
534-
display: run-in;
535535
content: ": "
536536
}
537537
&lt;/style&gt;
@@ -547,32 +547,36 @@ <h2 class="heading settled" data-level=4 id=run-in><span class=secno>4 </span><s
547547
</pre>
548548
</div>
549549

550-
<p>Whenever there is a sequence of one or more contiguous sibling <a data-link-type=dfn href=#run-in-element title="run-in elements">run-in elements</a>,
551-
if the sequence is followed by an element with <a class=css data-link-type=propdesc href=#propdef-display-inside title=display-inside>display-inside: block</a> and <a class=css data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside: block-level</a>,
552-
all of the elements in the sequence generate inline-level boxes inside the following block,
553-
as if they were <a class=css data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside: inline-level</a>,
554-
after its <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-lists-3/#selectordef-marker title=::marker>::marker</a> pseudo-element’s boxes (if any),
555-
but preceding any other boxes generates by the contents of the block
556-
(including the box generated by the <span class=css>::before</span> pseudo-element, if any).</p>
550+
<p>A <a data-link-type=dfn href=#run-in-box title="run-in box">run-in box</a> behaves exactly as an <a data-link-type=dfn title="inline-level box">inline-level box</a>, except:</p>
557551

558-
<p>Otherwise, the behavior depends on how many sibling <a data-link-type=dfn href=#run-in-element title="run-in elements">run-in elements</a> are in the sequence:</p>
552+
<ul>
553+
<li>
554+
If a <a data-link-type=dfn href=#run-in-sequence title="run-in sequence">run-in sequence</a> is immediately followed by a block box
555+
that does not establish a new <a data-link-type=dfn title="formatting context">formatting context</a>,
556+
it is inserted as direct children of the block box
557+
after its <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-lists-3/#selectordef-marker title=::marker>::marker</a> pseudo-element’s boxes (if any),
558+
but preceding any other boxes generates by the contents of the block
559+
(including the box generated by the <span class=css>::before</span> pseudo-element, if any).
559560

560-
<dl>
561-
<dt>only one
562-
<dd>
563-
The <a data-link-type=dfn href=#run-in-element title="run-in element">run-in element</a> generates a block-level box,
564-
as if it were <a class=css data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside: block-level</a>.
561+
<p>The reparented content is then formatted as if originally parented there.
562+
<span class=note>Note that only layout is affected, not inheritance,
563+
because property inheritance for non-anonymous boxes is based only on the element tree.</span></p>
565564

566-
<dt>more than one
567-
<dd>
568-
Each <a data-link-type=dfn href=#run-in-element title="run-in element">run-in element</a> generates an inline-level box,
569-
as if it were <a class=css data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside: inline-level</a>.
570-
An anonymous block box is generated around the entire sequence of boxes thus generated.
571-
</dl>
565+
<li>
566+
Otherwise,
567+
an anonymous block box is generated around the <a data-link-type=dfn href=#run-in-sequence title="run-in sequence">run-in sequence</a>
568+
and all immediately following inline-level content
569+
(up to, but not including, the next <a data-link-type=dfn href=#run-in-sequence title="run-in sequence">run-in sequence</a>, if any).
570+
571+
<li>
572+
A <a data-link-type=dfn href=#run-in-box title="run-in box">run-in box</a> with <a class=css data-link-type=propdesc href=#propdef-display-inside title=display-inside>display-inside: auto</a> <a data-link-type=dfn href=#inlinify title=inlinifies>inlinifies</a> its contents.
573+
</ul>
574+
575+
<p>A <dfn data-dfn-type=dfn data-noexport="" id=run-in-sequence>run-in sequence<a class=self-link href=#run-in-sequence></a></dfn> is a maximal sequence of consecutive sibling <a data-link-type=dfn href=#run-in-box title="run-in boxes">run-in boxes</a>
576+
and intervening white space and/or out-of-flow boxes.</p>
572577

573-
<p class=issue id=issue-803bbb08><a class=self-link href=#issue-803bbb08></a>Define handling of whitespace containing out-of-flow elements between run-ins,
574-
run-ins that contain block-level content (<a data-link-type=dfn href=#inlinify title=inlinify>inlinify</a> the contents recursively?),
575-
and anything else in bz’s feedback.</p>
578+
<p class=issue id=issue-0c2c54c6><a class=self-link href=#issue-0c2c54c6></a>Should out-of-flow elements get reparented, left behind, or break apart the sequence?
579+
<a href=http://lists.w3.org/Archives/Public/www-style/2012Aug/0257.html>See thread.</a></p>
576580

577581
<h2 class="no-num heading settled" id=acknowledgments><span class=content>
578582
Acknowledgments</span><a class=self-link href=#acknowledgments></a></h2>
@@ -780,7 +784,8 @@ <h2 class="no-num no-ref heading settled" id=index><span class=content>
780784
<li>ruby-text, <a href=#valdef-display-outside-ruby-text title="section 2.2">2.2</a>
781785
<li>ruby-text-container, <a href=#valdef-display-outside-ruby-text-container title="section 2.2">2.2</a>
782786
<li>run-in, <a href=#valdef-display-outside-run-in title="section 2.2">2.2</a>
783-
<li>run-in element, <a href=#run-in-element title="section 4">4</a>
787+
<li>run-in box, <a href=#run-in-box title="section 4">4</a>
788+
<li>run-in sequence, <a href=#run-in-sequence title="section 4">4</a>
784789
<li>show, <a href=#valdef-box-suppress-show title="section 3">3</a>
785790
<li>table<ul><li>value for display-inside, <a href=#valdef-display-inside-table title="section 2.1">2.1</a>
786791
<li>value for display, <a href=#valdef-display-table title="section 2.4">2.4</a>
@@ -808,6 +813,5 @@ <h2 class="no-num no-ref heading settled" id=property-index><span class=content>
808813

809814
<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.
810815
Other things that care about the document tree are unaffected, like counter scopes.
811-
Is this what we want?<a href=#issue-1cacf007> ↵ </a></div><div class=issue>Define handling of whitespace containing out-of-flow elements between run-ins,
812-
run-ins that contain block-level content (<a data-link-type=dfn href=#inlinify title=inlinify>inlinify</a> the contents recursively?),
813-
and anything else in bz’s feedback.<a href=#issue-803bbb08> ↵ </a></div></div>
816+
Is this what we want?<a href=#issue-1cacf007> ↵ </a></div><div class=issue>Should out-of-flow elements get reparented, left behind, or break apart the sequence?
817+
<a href=http://lists.w3.org/Archives/Public/www-style/2012Aug/0257.html>See thread.</a><a href=#issue-0c2c54c6> ↵ </a></div></div>

0 commit comments

Comments
 (0)