8000 [css-display] First draft of run-in. · w3c/csswg-drafts@e080856 · GitHub
Skip to content

Commit e080856

Browse files
tabatkinstabatkins
committed
[css-display] First draft of run-in.
--HG-- extra : rebase_source : bce4edd185c1f2f17d2e11b65d1d9edf78aae52b
1 parent 2d125e9 commit e080856

2 files changed

Lines changed: 152 additions & 3 deletions

File tree

‎css-display/Overview.bs‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,13 @@ Interacting with the layout mode: the 'display-outside' property</h3>
162162
The element is an <dfn>internal ruby element</dfn>,
163163
and participates in a ruby layout context. [[!CSS3RUBY]]
164164
These values are all <a>layout-specific display roles</a>.
165+
166+
<dt><dfn>run-in</dfn>
167+
<dd>
168+
The element is a <a>run-in element</a>.
169+
Run-in elements act like inlines or blocks,
170+
depending on the surrounding elements.
171+
This is described more fully in a later section.
165172
</dl>
166173

167174
Some values of 'display-outside' are specialized for particular formatting contexts,
@@ -329,6 +336,75 @@ Controlling box generation: the 'display-box' property</h2>
329336
Is this what we want?
330337

331338

339+
<h2 id='run-in'>
340+
Run-In Layout</h2>
341+
342+
A <dfn>run-in element</dfn> is an element with ''display-outside: run-in''.
343+
A <a>run-in element</a> acts differently based on whether its siblings are inlines or blocks;
344+
if it precedes a block, it <em>merges into</em> the block.
345+
This is useful for formatting compact headlines, definitions, and other similar things,
346+
where the appropriate DOM structure is to have a headline preceding the following prose,
347+
but the desired display is an inline headline laying out with the text.
348+
349+
<div class="example">
350+
For example, dictionary definitions are often formatted so that the word is inline with the definition:
351+
352+
<pre>
353+
&lt;dl class='dict'>
354+
&lt;dt>dictionary
355+
&lt;dd>a book that lists the words of a language in alphabetical
356+
order and gives their meaning, or that gives the equivalent
357+
words in a different language.
358+
&lt;dt>glossary
359+
&lt;dd>an alphabetical list of terms or words found in or relating
360+
to a specific subject, text, or dialect, with explanations; a
361+
brief dictionary.
362+
&lt;/dl>
363+
&lt;style>
364+
.dict > dt {
365+
display: run-in;
366+
}
367+
.dict > dt::after {
368+
display: run-in;
369+
content: ": "
370+
}
371+
&lt;/style>
372+
</pre>
373+
374+
Which is formatted as:
375+
376+
<pre>
377+
<b>dictionary:</b> a book that lists the words of a language
378+
in alphabetical order and explains their meaning.
379+
380+
<b>glossary:</b> an alphabetical list of terms or words found
381+
in or relating to a specific subject, text, or dialect,
382+
with explanations; a brief dictionary.
383+
</pre>
384+
</div>
385+
386+
Whenever there is a sequence of one or more contiguous sibling <a>run-in elements</a>,
387+
if the sequence is followed by an element with ''display-inside: block'' and ''display-outside: block-level'',
388+
all of the elements in the sequence generate inline-level boxes inside the following block,
389+
as if they were ''display-outside: inline-level'',
390+
after its ''::marker'' pseudo-element's boxes (if any),
391+
but preceding any other boxes generates by the contents of the block
392+
(including the box generated by the ''::before'' pseudo-element, if any).
393+
394+
Otherwise, the behavior depends on how many sibling <a>run-in elements</a> are in the sequence:
395+
396+
<dl>
397+
<dt>only one
398+
<dd>
399+
The <a>run-in element</a> generates a block-level box,
400+
as if it were ''display-outside: block-level''.
401+
402+
<dt>more than one
403+
<dd>
404+
Each <a>run-in element</a> generates an inline-level box,
405+
as if it were ''display-outside: inline-level''.
406+
An anonymous block box is generated around the entire sequence of boxes thus generated.
407+
</dl>
332408

333409

334410
<h2 class=no-num id="acknowledgments">

‎css-display/Overview.html‎

Lines changed: 76 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>CSS Display Module Level 3</h1>
5656
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20140307>7 March 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140308>8 March 2014</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-display>http://dev.w3.org/csswg/css-display</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-display>http://dev.w3.org/csswg/css-display</a>
5959
<dt>Feedback:</dt>
6060
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-display%5D%20feedback">www-style@w3.org</a>
@@ -117,6 +117,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
117117
<li><a href=#the-display-extras><span class=secno>2.3</span> Additional stuff: the <span class=property data-link-type=propdesc title=display-extras>display-extras</span> property</a>
118118
<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>
119119
<li><a href=#the-display-box><span class=secno>3</span> Controlling box generation: the <span class=property data-link-type=propdesc title=display-box>display-box</span> property</a>
120+
<li><a href=#run-in><span class=secno>4</span> Run-In Layout</a>
120121
<li><a href=#acknowledgments><span class=secno></span> Acknowledgments</a>
121122
<li><a href=#conformance><span class=secno></span> Conformance</a>
122123
<ul class=toc>
@@ -267,6 +268,13 @@ <h3 class="heading settled heading" data-level=2.2 id=the-display-outside><span
267268
The element is an <dfn class=css-code data-dfn-for=display-outside data-dfn-type=value data-export="" id=valuedef-internal-ruby-element>internal ruby element<a class=self-link href=#valuedef-internal-ruby-element></a></dfn>,
268269
and participates in a ruby layout context. <a data-biblio-type=normative data-link-type=biblio href=#css3ruby title=css3ruby>[CSS3RUBY]</a>
269270
These values are all <a data-link-type=dfn href=#layout-specific-display-role title="layout-specific display roles">layout-specific display roles</a>.
271+
272+
<dt><dfn class=css-code data-dfn-for=display-outside data-dfn-type=value data-export="" id=valuedef-run-in>run-in<a class=self-link href=#valuedef-run-in></a></dfn>
273+
<dd>
274+
The element is a <a data-link-type=dfn href=#run-in-element title="run-in element">run-in element</a>.
275+
Run-in elements act like inlines or blocks,
276+
depending on the surrounding elements.
277+
This is described more fully in a later section.
270278
</dl>
271279

272280
<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,
@@ -404,6 +412,71 @@ <h2 class="heading settled heading" data-level=3 id=the-display-box><span class=
404412
Is this what we want?
405413

406414

415+
<h2 class="heading settled heading" data-level=4 id=run-in><span class=secno>4 </span><span class=content>
416+
Run-In Layout</span><a class=self-link href=#run-in></a></h2>
417+
418+
<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>.
419+
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;
420+
if it precedes a block, it <em>merges into</em> the block.
421+
This is useful for formatting compact headlines, definitions, and other similar things,
422+
where the appropriate DOM structure is to have a headline preceding the following prose,
423+
but the desired display is an inline headline laying out with the text.
424+
425+
<div class=example>
426+
For example, dictionary definitions are often formatted so that the word is inline with the definition:
427+
428+
<pre>&lt;dl class='dict'&gt;
429+
&lt;dt&gt;dictionary
430+
&lt;dd&gt;a book that lists the words of a language in alphabetical
431+
order and gives their meaning, or that gives the equivalent
432+
words in a different language.
433+
&lt;dt&gt;glossary
434+
&lt;dd&gt;an alphabetical list of terms or words found in or relating
435+
to a specific subject, text, or dialect, with explanations; a
436+
brief dictionary.
437+
&lt;/dl&gt;
438+
&lt;style&gt;
439+
.dict &gt; dt {
440+
display: run-in;
441+
}
442+
.dict &gt; dt::after {
443+
display: run-in;
444+
content: ": "
445+
}
446+
&lt;/style&gt;
447+
</pre>
448+
<p> Which is formatted as:
449+
450+
<pre><b>dictionary:</b> a book that lists the words of a language
451+
in alphabetical order and explains their meaning.
452+
453+
<b>glossary:</b> an alphabetical list of terms or words found
454+
in or relating to a specific subject, text, or dialect,
455+
with explanations; a brief dictionary.
456+
</pre> </div>
457+
458+
<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>,
459+
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>,
460+
all of the elements in the sequence generate inline-level boxes inside the following block,
461+
as if they were <a class=css data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside: inline-level</a>,
462+
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),
463+
but preceding any other boxes generates by the contents of the block
464+
(including the box generated by the <span class=css data-link-type=maybe title=::before>::before</span> pseudo-element, if any).
465+
466+
<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:
467+
468+
<dl>
469+
<dt>only one
470+
<dd>
471+
The <a data-link-type=dfn href=#run-in-element title="run-in element">run-in element</a> generates a block-level box,
472+
as if it were <a class=css data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside: block-level</a>.
473+
474+
<dt>more than one
475+
<dd>
476+
Each <a data-link-type=dfn href=#run-in-element title="run-in element">run-in element</a> generates an inline-level box,
477+
as if it were <a class=css data-link-type=propdesc href=#propdef-display-outside title=display-outside>display-outside: inline-level</a>.
478+
An anonymous block box is generated around the entire sequence of boxes thus generated.
479+
</dl>
407480

408481

409482
<h2 class="no-num heading settled heading" id=acknowledgments><span class=content>
@@ -584,6 +657,8 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
584657
<li>ruby-base-container, <a href=#valuedef-ruby-base-container title="section 2.2">2.2</a>
585658
<li>ruby-text, <a href=#valuedef-ruby-text title="section 2.2">2.2</a>
586659
<li>ruby-text-container, <a href=#valuedef-ruby-text-container title="section 2.2">2.2</a>
660+
<li>run-in, <a href=#valuedef-run-in title="section 2.2">2.2</a>
661+
<li>run-in element, <a href=#run-in-element title="section 4">4</a>
587662
<li>table<ul><li>value for display-inside, <a href=#valuedef-table0 title="section 2.1">2.1</a>
588663
<li>value for display, <a href=#valuedef-table title="section 2.4">2.4</a>
589664
</ul><li>table-caption<ul><li>value for display-outside, <a href=#valuedef-table-caption0 title="section 2.2">2.2</a>
@@ -630,6 +705,4 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
630705
Is this what we want?
631706

632707

633-
634-
635708
<a href=#issue-b8422544> ↵ </a></div></div>

0 commit comments

Comments
 (0)