E84D [css-display-3] Lay down more text. Still not quite at a complete fi… · w3c/csswg-drafts@3941e3c · GitHub
Skip to content

Commit 3941e3c

Browse files
tabatkinstabatkins
committed
[css-display-3] Lay down more text. Still not quite at a complete first draft.
1 parent 0094575 commit 3941e3c

2 files changed

Lines changed: 212 additions & 33 deletions

File tree

‎css-display-3/Overview.html‎

Lines changed: 148 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -255,12 +255,12 @@ <h3 id=the-display-inside><span class=secno>2.1. </span> Setting the layout
255255
<tr>
256256
<th>Value:
257257

258-
<td>block-inside | text | table | table-inside | flex | grid
258+
<td>block-inside | inline-inside | table | table-inside | flex | grid
259259

260260
<tr>
261261
<th>Initial:
262262

263-
<td>inline
263+
<td>inline-inside
264264

265265
<tr>
266266
<th>Applies To:
@@ -283,16 +283,66 @@ <h3 id=the-display-inside><span class=secno>2.1. </span> Setting the layout
283283
<td>a keyword
284284
</table>
285285

286-
<p class=issue> Not super happy with the names ‘<code
287-
class=css>block-inside</code>’ and ‘<code class=css>text</code>’,
288-
but I need ‘<a href="#display-inside"><code
286+
<p class=issue> Not super happy with the name ‘<a
287+
href="#display-inside:block-inside"><code
288+
class=css>block-inside</code></a>’, because it doesn't match the
289+
behavior of the other ‘<code class=css>*-inside</code>’ values, but I
290+
need ‘<a href="#display-inside"><code
289291
class=property>display-inside</code></a>’ and ‘<a
290292
href="#display-outside"><code class=property>display-outside</code></a>’
291293
to have unique sets of values.
292294

293-
<dl></dl>
294-
295-
<p> ...
295+
<dl>
296+
<dt><dfn id="display-inside:block-inside">block-inside</dfn>
297+
298+
<dd> The element lays out its contents using block layout. <a
299+
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
300+
301+
<dt><dfn id="display-inside:inline-inside">inline-inside</dfn>
302+
303+
<dd> If the element's computed ‘<a href="#display-outside"><code
304+
class=property>display-outside</code></a>’ value is ‘<a
305+
href="#display:inline"><code class=css>inline</code></a>’, then it lays
306+
out its contents using inline layout. <a href="#CSS21"
307+
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Otherwise, this value
308+
computes to ‘<a href="#display-inside:block-inside"><code
309+
class=css>block-inside</code></a>’.
310+
311+
<dt><dfn id="display-inside:table">table</dfn>
312+
313+
<dd> The element lays out its contents using table layout. <a
314+
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
315+
316+
<dt><dfn id="display-inside:table-inside">table-inside</dfn>
317+
318+
<dd> If the element's computed ‘<a href="#display-outside"><code
319+
class=property>display-outside</code></a>’ value is ‘<a
320+
href="#display:table-row-group"><code
321+
class=css>table-row-group</code></a>’, ‘<a
322+
href="#display:table-header-group"><code
323+
class=css>table-header-group</code></a>’, ‘<a
324+
href="#display:table-footer-group"><code
325+
class=css>table-footer-group</code></a>’, ‘<a
326+
href="#display:table-row"><code class=css>table-row</code></a>’, ‘<a
327+
href="#display:table-column-group"><code
328+
class=css>table-column-group</code></a>’, or ‘<a
329+
href="#display:table-column"><code class=css>table-column</code></a>’,
330+
this elements acts as normal for its given ‘<a
331+
href="#display-outside"><code
332+
class=property>display-outside</code></a>’ value. Otherwise, this value
333+
computes to ‘<a href="#display-inside:block-inside"><code
334+
class=css>block-inside</code></a>’.
335+
336+
<dt><dfn id="display-inside:flex">flex</dfn>
337+
338+
<dd> The element lays out its contents using flex layout. <a
339+
href="#CSS3-FLEXBOX"
340+
rel=biblioentry>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a>
341+
342+
<dt><dfn id="display-inside:grid">grid</dfn>
343+
344+
<dd> The element lays out its contents using grid layout. [[!CSS3-GRID]]
345+
</dl>
296346

297347
<h3 id=the-display-outside><span class=secno>2.2. </span> Interacting with
298348
the layout mode: the ‘<a href="#display-outside"><code
@@ -338,6 +388,10 @@ <h3 id=the-display-outside><span class=secno>2.2. </span> Interacting with
338388
<td>as specified
339389
</table>
340390

391+
<dl>
392+
<dt><dfn id="display-outside:block"> </dfn>
393+
</dl>
394+
341395
<h3 id=the-display-box><span class=secno>2.3. </span> Controlling box
342396
generation: the ‘<a href="#display-box"><code
343397
class=property>display-box</code></a>’ property</h3>
@@ -393,15 +447,20 @@ <h3 id=the-display-box><span class=secno>2.3. </span> Controlling box
393447
<dt><dfn id="display-box:contents">contents</dfn>
394448

395449
<dd> The element itself does not generate any boxes, but its children and
396-
pseudo-elements still generate boxes as normal, as if the set of children
397-
and psuedo-elements completely replaced the element itself in the
398-
document.
450+
pseudo-elements still generate boxes as normal. For the purposes of box
451+
generation and layout, the element must be treated as if it had been
452+
replaced with its children and pseudo-elements in the document tree.
399453
</dl>
400454

401455
<p class=issue> Is there a need for a value that suppresses box generation
402456
for layout purposes, but still generates them for the purposes of
403457
animations/counters/etc.?
404458

459+
<p class=issue> ‘<a href="#display-box:contents"><code
460+
class=css>contents</code></a>’ currently only has an effect on box
461+
generation and layout. Other things that care about the document tree are
462+
unaffected, like counter scopes. Is this what we want?
463+
405464
<h3 id=the-display-extras><span class=secno>2.4. </span> Additional stuff:
406465
the ‘<a href="#display-extras"><code
407466
class=property>display-extras</code></a>’ property</h3>
@@ -465,10 +524,11 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
465524
<tr>
466525
<th>Value:
467526

< 5550 /div>
468-
<td>inline | block | list-item | inline-block | table | inline-table |
469-
table-row-group | table-header-group | table-footer-group | table-row |
470-
table-column-group | table-column | table-cell | table-caption | none |
471-
[ &lt;‘<a href="#display-inside"><code
527+
<td>inline | block | list-item | inline-list-item | inline-block | table
528+
| inline-table | table-row-group | table-header-group |
529+
table-footer-group | table-row | table-column-group | table-column |
530+
table-cell | table-caption | flex | inline-flex | grid | inline-grid |
531+
none | [ &lt;‘<a href="#display-inside"><code
472532
class=property>display-inside</code></a>’> || &lt;‘<a
473533
href="#display-outside"><code
474534
class=property>display-outside</code></a>’> || &lt;‘<a
@@ -509,7 +569,8 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
509569
<dl>
510570
<dt><dfn id="display:inline">inline</dfn>
511571

512-
<dd> Expands identically to ‘<code class=css>inline text</code>’.
572+
<dd> Expands identically to ‘<code class=css>inline
573+
inline-inside</code>’.
513574

514575
<dt><dfn id="display:block">block</dfn>
515576

@@ -521,6 +582,11 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
521582
<dd> Expands identically to ‘<code class=css>block block-inside
522583
list-item</code>’.
523584

585+
<dt><dfn id="display:inline-list-item">inline-list-item</dfn>
586+
587+
<dd> Expands identically to ‘<code class=css>inline block-inside
588+
list-item</code>’.
589+
524590
<dt><dfn id="display:inline-block">inline-block</dfn>
525591

526592
<dd> Expands identically to ‘<code class=css>inline
@@ -554,9 +620,26 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
554620
<dd> Expands identically to ‘<code class=css>table-cell
555621
block-inside</code>’.
556622

623+
<dt><dfn id="display:flex">flex</dfn>
624+
625+
<dd> Expands identically to ‘<code class=css>block flex</code>’.
626+
627+
<dt><dfn id="display:inline-flex">inline-flex</dfn>
628+
629+
<dd> Expands identically to ‘<code class=css>inline flex</code>’.
630+
631+
<dt><dfn id="display:grid">grid</dfn>
632+
633+
<dd> Expands identically to ‘<code class=css>block grid</code>’.
634+
635+
<dt><dfn id="display:inline-grid">inline-grid</dfn>
636+
637+
<dd> Expands identically to ‘<code class=css>inline grid</code>’.
638+
557639
<dt><dfn id="display:none">none</dfn>
558640

559-
<dd> Expands identically to ‘<code class=css>inline text none</code>’.
641+
<dd> Expands identically to ‘<code class=css>inline inline-inside
642+
none</code>’.
560643
</dl>
561644
<!--
562645
@@ -796,6 +879,16 @@ <h3 class=no-num id=normative-references> Normative references</h3>
796879
</dd>
797880
<!---->
798881

882+
<dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX]
883+
884+
<dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a
885+
href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/"><cite>CSS
886+
Flexible Box Layout Module.</cite></a> 12 June 2012. W3C Working Draft.
887+
(Work in progress.) URL: <a
888+
href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a>
889+
</dd>
890+
<!---->
891+
799892
<dt id=RFC2119>[RFC2119]
800893

801894
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
@@ -830,11 +923,16 @@ <h2 class=no-num id=index> Index</h2>
830923
<!--begin-index-->
831924

832925
<ul class=indexlist>
926+
<li>, <a href="#display-outside:block" title=""><strong>2.2.</strong></a>
927+
833928
<li>authoring tool, <a href="#authoring-tool"
834929
title="authoring tool"><strong>3.2.</strong></a>
835930

836931
<li>block, <a href="#display:block" title=block><strong>2.5.</strong></a>
837932

933+
<li>block-inside, <a href="#display-inside:block-inside"
934+
title=block-inside><strong>2.1.</strong></a>
935+
838936
<li>contents, <a href="#display-box:contents"
839937
title=contents><strong>2.3.</strong></a>
840938

@@ -852,12 +950,32 @@ <h2 class=no-num id=index> Index</h2>
852950
<li>display-outside, <a href="#display-outside"
853951
title=display-outside><strong>2.2.</strong></a>
854952

953+
<li>flex, <a href="#display-inside:flex"
954+
title=flex><strong>2.1.</strong></a>, <a href="#display:flex"
955+
title=flex><strong>2.5.</strong></a>
956+
957+
<li>grid, <a href="#display-inside:grid"
958+
title=grid><strong>2.1.</strong></a>, <a href="#display:grid"
959+
title=grid><strong>2.5.</strong></a>
960+
855961
<li>inline, <a href="#display:inline"
856962
title=inline><strong>2.5.</strong></a>
857963

858964
<li>inline-block, <a href="#display:inline-block"
859965
title=inline-block><strong>2.5.</strong></a>
860966

967+
<li>inline-flex, <a href="#display:inline-flex"
968+
title=inline-flex><strong>2.5.</strong></a>
969+
970+
<li>inline-grid, <a href="#display:inline-grid"
971+
title=inline-grid><strong>2.5.</strong></a>
972+
973+
<li>inline-inside, <a href="#display-inside:inline-inside"
974+
title=inline-inside><strong>2.1.</strong></a>
975+
976+
<li>inline-list-item, <a href="#display:inline-list-item"
977+
title=inline-list-item><strong>2.5.</strong></a>
978+
861979
<li>inline-table, <a href="#display:inline-table"
862980
title=inline-table><strong>2.5.</strong></a>
863981

@@ -880,7 +998,9 @@ <h2 class=no-num id=index> Index</h2>
880998
title="style sheet, as conformance class"><strong>3.2.</strong></a>
881999
</ul>
8821000

883-
<li>table, <a href="#display:table" title=table><strong>2.5.</strong></a>
1001+
<li>table, <a href="#display-inside:table"
1002+
title=table><strong>2.1.</strong></a>, <a href="#display:table"
1003+
title=table><strong>2.5.</strong></a>
8841004

8851005
<li>table-caption, <a href="#display:table-caption"
8861006
title=table-caption><strong>2.5.</strong></a>
@@ -900,6 +1020,9 @@ <h2 class=no-num id=index> Index</h2>
9001020
<li>table-header-group, <a href="#display:table-header-group"
9011021
title=table-header-group><strong>2.5.</strong></a>
9021022

1023+
<li>table-inside, <a href="#display-inside:table-inside"
1024+
title=table-inside><strong>2.1.</strong></a>
1025+
9031026
<li>table-row, <a href="#display:table-row"
9041027
title=table-row><strong>2.5.</strong></a>
9051028

@@ -962,9 +1085,9 @@ <h2 class=no-num id=property-index> Property index</h2>
9621085
<tr>
9631086
<th><a class=property href="#display-inside">display-inside</a>
9641087

965-
<td>block-inside | text | table | table-inside | flex | grid
1088+
<td>block-inside | inline-inside | table | table-inside | flex | grid
9661089

967-
<td>inline
1090+
<td>inline-inside
9681091

9691092
<td>all elements
9701093

@@ -994,10 +1117,11 @@ <h2 class=no-num id=property-index> Property index</h2>
9941117
<tr>
9951118
<th><a class=property href="#display">display</a>
9961119

997-
<td>inline | block | list-item | inline-block | table | inline-table |
998-
table-row-group | table-header-group | table-footer-group | table-row |
999-
table-column-group | table-column | table-cell | table-caption | none |
1000-
[ &lt;‘display-inside’> || &lt;‘display-outside’> ||
1120+
<td>inline | block | list-item | inline-list-item | inline-block | table
1121+
| inline-table | table-row-group | table-header-group |
1122+
table-footer-group | table-row | table-column-group | table-column |
1123+
table-cell | table-caption | flex | inline-flex | grid | inline-grid |
1124+
none | [ &lt;‘display-inside’> || &lt;‘display-outside’> ||
10011125
&lt;‘display-box’> || &lt;‘display-extras’> ]
10021126

10031127
<td>inline

0 commit comments

Comments
 (0)