-
Notifications
You must be signed in to change notification settings - Fork 791
Expand file tree
/
Copy pathOverview.src.html
More file actions
executable file
·1802 lines (1505 loc) · 72.3 KB
/
Overview.src.html
File metadata and controls
executable file
·1802 lines (1505 loc) · 72.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html public '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html dir="ltr" lang="en">
<head profile="http://www.w3.org/2006/03/hcard">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Regions Module</title>
<link href="http://dev.w3.org/csswg/default.css" rel="stylesheet" type="text/css" />
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div class="head">
<!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48 src="http://www.w3.org/Icons/w3c_home" width=72></a>
<!--end-logo-->
<h1>CSS Regions Module</h1>
<h2 class="no-num no-toc" id="longstatus-date">Editor's Draft [DATE]</h2>
<dl>
<dt>This version:</dt>
<dd><a href="[VERSION]">
http://www.w3.org/csswg/css3-regions</a>
<dt>Latest version:</dt>
<dd><a href="http://www.w3.org/TR/css3-regions">
http://www.w3.org/csswg/css3-regions</a>
<dt>Previous version:</dt>
<dd>none</a>
<dt>Editors:</dt>
<dd class="vcard"><span class="fn">Alexandru Chiculita</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">achicu@adobe.com</span></dd>
<dd class="vcard"><span class="fn">Andrei Bucur</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">abucur@adobe.com</span></dd>
<dd class="vcard"><span class="fn">Mihnea Ovidenie</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">mihnea@adobe.com</span></dd>
<dd class="vcard"><span class="fn">Peter Sorotokin</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">psorotok@adobe.com</span></dd>
<dd class="vcard"><span class="fn">Virgil Palanciuc</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">virgilp@adobe.com</span></dd>
<dd class="vcard"><span class="fn">Arno Gourdol</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">agourdol@adobe.com</span></dd>
</dl>
<!--begin-copyright-->
<!--end-copyright-->
<hr title="Separator for header" />
</div>
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
<p>This document defines a set of features intended to provide rich layout capabilities to CSS, including the ability to define containers using a CSS-based syntax (slots), flow text across multiple containers (regions), and specify areas of these containers that should be avoided for the purpose of text layout (exclusions).</p>
<p><em>
These three key concepts (slots, regions and exclusions), could be considered independently of each other. For example, exclusions could be applied to other elements, such as the Grid Cells of the css-grid-align proposal. Likewise, slots could be used for purposes other than to flow text into. We would welcome editorial feedback regarding the disposition of these proposals, whether they should be made into distinct modules, integrated into existing modules, or kept together as one module, which is the approach we have followed for now.
</em></p>
<h2 class="no-num no-toc" id="status">Status of this document</h2>
<!--begin-status-->
<p><em>This section describes the status of this document at the time of
its publication. Other documents may supersede this document. A list of
current W3C publications and the latest revision of this technical report
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
index at http://www.w3.org/TR/.</a></em>
<p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don't cite this document other than as work in progress.</p>
<p>The archived public mailing list www-style@w3.org is preferred for discussion of this specification. When sending e-mail, please put the text "css3-regions" in the subject, preferably like this: "[css3-regions] …summary of comment…"</p>
<p>This draft is related to the drafts about Grid Layout <a href='#CSS3GRID'>[CSS3GRID]</a>, Flexible Box Layout <a href='#CSS3FLEXBOX'>[CSS3FLEXBOX]</a>, Multi-column Layout <a hreg='#CSSMULTICOL'>[CSSMULTICOL]</a> and Template Layout <a href='#CSSTEMPLATELAYOUT'>[CSSTEMPLATELAYOUT]</a>.</p>
<!--end-status-->
<h2 class="no-num no-toc" id="contents">Table of contents</h2>
<!--begin-toc-->
<!--end-toc-->
<h2 id="slot-abstract">Slots: Introduction</h2>
<p>The following sections define a way to create display elements using only CSS stylesheets. The feature is intended to be used with other layout modules like Grid Layout <a href='#CSS3GRID'>[CSS3GRID]</a>, Template Layout <a href='#CSSTEMPLATELAYOUT'>[CSSTEMPLATELAYOUT]</a> or Flexible Box Layout <a href='#CSS3FLEXBOX'>[CSS3FLEXBOX]</a> and helps keep the separation between presentation and structural markup.</p>
<p>The new concept is designed to integrate with the regions that are introduced later. Regions allow any block element to become a container that will be filled with text and for text to flow from one column of text to another. With slots, CSS rules can be used to create new regions without corresponding HTML markup. When slots are combined with media-queries, designers can define presentations for devices with different resolutions.</p>
<h2 id="slot-syntax">Slot Syntax</h2>
<pre>
[<CSS selector>]::slot([ident]) { };</pre>
<h2 id="slot-description">Description</h2>
<p>The <code>::slot()</code> pseudo-element creates CSS slot elements as children of the elements matching the <code><CSS selector&gr;</code>. The new elements are inserted in the document tree, meaning that CSS selectors like <code>body > *</code> or <code>p + p</code> will match slot elements added using the <code>::slot()</code> pseudo-element. However, scripting will not be able to query the slot elements, meaning that properties like <code>firstChild</code>, <code>nextSibiling</code> or <code>querySelector</code> will not return slot elements. Moreover, no DOM events are triggered when new slots are created or destroyed.</p>
<br />
<p>There are several reasons to avoid exposing CSS elements through scripting:</p>
<ul>
<li>Slots are designed to help designers keep the presentation layer inside CSS and avoid using scripting or HTML markup to define how parts of the design look like.</li>
<li>If a script needs to create an element, DOM already has enough methods to create one.</li>
<li>Any element has a state represented by CSS rules and the document tree. That state can be queried using document tree APIs. Because of the dynamic nature of a slot element, the state can only be defined using CSS.</li>
</ul>
<p>Z-index can be used to define a different child ordering for rendering. However, because layout doesn't take into account the z-index property (e.g. floats require different position in the document tree), the <code>::slot()</code> syntax can also place the new element in a specific location in the document tree by using combinations of pseudo selectors like <code>':after'</code>, <code>':before'</code>, <code>':nth-child'</code> in the CSS selector.</p>
<p>If the <strong>CSS selector has no matching element</strong>, the rule will be ignored until a matching element becomes available.</p>
<p>If no CSS selector is specified in the <code>::slot()</code> rule, the element will be created as a root element. When used in conjunction with the 'page' property, the element will be created only when the specified page is used.</p>
<p>Specifying an identifier makes it easier to reference the slot in other CSS selectors. The specified <code>'ident'</code> can also take part of any CSS selector by using the '%' prefix, so that one could define styles and new child slots for a specific slot. Example:</p>
<div class="example">
<p>Create 'slot_name' as a child of body element and then two nested anonymous slots as children of 'slot_name' block.</p>
<pre>
<style>
body::slot(slot_name) { };
%slot_name::slot() { content: 'first child slot'; }
%slot_name::slot() { content: 'second child slot'; }
</style>
</pre>
</div>
<p>CSS Slot elements have several advantages over DOM block elements:</p>
<ol>
<li>They can be created using only CSS rules and are compatible with the Media Queries module.</li>
<li>They can be used with other layout module (e.g. Flex and Grid).</li>
<li>They are not visible from scripting and can only be changed from scripting by changing the CSS style-sheets rules.
<ul>
<li>By not exposing the slot elements to scripting, they can be recreated on the fly without keeping track of the state of the element. </li>
<li>When using a pseudo-element like <code>':hover'</code> that has a small life-cycle, if a script changes the content of a dynamic slot element, the content will be lost when it is recreated. </li>
<li>Multiple slots can be created because of CSS selectors that match more elements and it becomes difficult to track slot changes from scripting.</li>
</ul>
</li>
</ol>
<h2 id="slot-examples">Examples</h2>
<div class="example">
<p><strong>Create a block element using only CSS</strong></p>
<pre>
<style>
body::slot(element1) {
content: "CSS Paragraph";
}
</style>
<body>
<p>First paragraph.</p>
</body></pre>
<p>The outpul will be</p>
<pre>
First paragraph
CSS paragraph</pre>
</div>
<div class="example">
<p><strong>Add the CSS slot element before the contents of the body</strong></p>
<pre>
<style>
body:before ::slot(element1) {
content: "CSS Paragraph";
}
</style>
<body>
<p>First paragraph</p>
</body></pre>
<p>The outpul will be</p>
<pre>
CSS paragraph
First paragraph</pre>
</div>
<div class="example">
<p><strong>Add the CSS Slot element after the third <code>'p'</code> element</strong></p>
<pre>
<style>
body > p:nth-child(3) ::slot(element1) {
content: "CSS Paragraph";
}
</style>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
</body>
</pre>
<p>The output will be</p>
<pre>
First paragraph.
Second paragraph.
Third paragraph.
CSS Paragraph.
Fourth paragraph.</pre>
</div>
<p><strong>Note:</strong> Examples 2, 3 and 4 can actually be done today using ':after' and ':before' pseudo-selectors. However, stacking multiple elements cannot be done using standard pseudo-selectors since ':before' and ':after' are able to create only one item.</p>
<div class="example">
<p><strong>Add multiple CSS slot elements</strong></p>
<pre>
<style>
body::slot(element1) { content: "box one" };
body::slot(element2) { content: "box two" };
body::slot(element3) { content: "box three"};
%element1, %element2, %element3 {
float: left;
width: 100px;
height: 100px;
}
</style>
<body>
<p>First paragraph</p>
</body>
</pre>
<p>The output will be</p>
<pre>
First paragraph.
box one
box two
box three</pre>
</div>
<div class="example">
<p><strong>Use Flex Box Layout Module to lay out the CSS generated slots</strong></p>
<pre>
<style>
body::slot(page1) {
/* layout as a flexible box */
display: box;
}
body %page1 ::slot(column1) { }
body %page1 ::slot(column2) { }
%column1, %column2 {
/* both columns are flexible */
box-flex: 1.0;
}
</style>
</pre>
</div>
<div class="example">
<p><strong>Adding a new CSS Slot <li> item every other 2 DOM defined <li> items</strong></p>
<pre>
<style>
ul > *:nth-child(2n):after ::slot(new_element) {
display: list-item;
content: "new element";
}
%new_element:first-of-type {
// make only the first one use bold
font-weight: bold;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul></pre>
<p>Output will be</p>
<ul>
<li>1</li>
<li>2</li>
<li><strong>new element</strong></li>
<li>3</li>
<li>4</li>
<li>new element</li>
<li>5</li>
</ul>
</div>
<h2 id="slot-regions">Using Slots with Regions</h2>
<p>Slots provide a convenient way to define containers in which to flow text using the Regions defined below, without having to use HTML or other structural markup to create the containers. This allows a clean separation of the presentation and the structural markup. For example, it becomes possible to define different arrangements of columns in which the text is flowed using media-queries for different classes of devices.</p>
<p>Other CSS modules related to layout, such as Flex Box or Grid can also be used to define containers in which text is flowed. However, a consistent way to define Slots using CSS across modules could be beneficial. <em>In that context, consideration should be given whether separating Slots in their own module, or incorporating them as part of another module would be a valuable approach.</p>
<div class="example">
<p>Creates a multi-column layout using other layout modules like Flex Box or Grid and concepts from CSS Regions module and CSS Paged Media Module. Here we combine the <code>@page</code> rule with the "%" syntax to create page-master like templates for specific pages of an article. The whole example can be wrapped inside a media query, e.g. one that targets a specific width/height aspect ratio. The 'page' property below forces the '%' syntax create the element on a specific page.</p>
<p>In this example the first page will always be created, because the 'body' content has to be filled somewhere. At that moment the CSS Slot %first_page_template contains two CSS slot columns (%column1 and %column2). The "article_body" flow thread will be filled inside both columns. If after filling the columns, the flow thread 'article_body' still has overflow content, a new page is instantiated. The process will stop when all the content is laid out or there is no other way to fill the remaining content.</p>
<pre>
<style>
body {
/* content of body flows into article_body flow thread */
flow: into(article_body);
}
body img#side_float {
/* take the image outside the body flow */
flow: into(article_side_image);
}
/* associate names to pages using @page rule + pseudo selectors */
@page first_page:first {
}
@page second_page:nth-child(1) {
}
@page third_page:nth-child(2) {
}
/* Selected when nothing matches before it */
@page overflow_page {
}
/* because no selector is preceding the % syntax, the Slot element will be created as a sibling of body */
::slot(first_page_template) { }
%first_page_template ::slot(column1) { };
%first_page_template ::slot(column2) { };
::slot(second_page_template) { }
%second_page_template ::slot(column1) { }
%first_page_template {
display: box; /* use any other layout method here (ex. grid, templates, table) */
page: first_page; /* limit the generated element to the first-page */
}
/* Using a simple syntax makes it easy to reference the element in other selectors.
The following selector will create a new element called "column1" inside the
"first_page_template" element created earlier */
%first_page_template %column1 {
content-order: 2; /* column1 appears on the left, but the designer wants the text flowed in a different order */
content: from(article_body);
}
%first_page_template %column2 {
content-order: 1;
content: from(article_body);
}
%first_page_template %side_image {
position: absolute;
left: 5gr;
top: 4gr;
width: 2gr;
content: from(article_side_image);
}
%second_page_template {
display: box;
page: second_page;
}
%second_page_template %column1 {
content: from(article_body);
}
/* %elements can be references as usual elements, just that they are prefixed with % */
%column1, %column2 {
/* add properties common to all columns across all pages
the properties defined here apply only to the boxes that
define the columns, and not to the content displayed in them */
border: 1px solid red;
}
%column1 {
/* assign a different styling for all the first columns across all pages */
content-styling: first_column_on_page;
}
p:style(first_column_on_page) {
/* Make only the paragraphs that are displayed
inside the first column use different font size. */
font-size: 15px;
}
</style>
<body>
<p>
The text will be displayed across column 1 and column 2
<img id="side_float" src="image.jpg" title="The image will flow into %side_image box" />
</p>
</body></pre>
</div>
<h2 id="slot-gridcells">Comparison with grid cells</h2>
<p>The main difference is that text threading is separated from the layout itself, meaning that Grid cell names are only used for positioning while the 'content' property drives the threading as defined in the CSS Regions module. The <code>'::slot()'</code> notation can use the cell naming from the 'grid-cell' notation, so the positioning can still be done using the cell name.</p>
<br />
<p><strong>Current syntax from Grids</strong></p>
<table>
<tr>
<td style="vertical-align:top">
<p>Existing examples from the Grid Alignment module:</p>
<pre>
<style>
#grid {
display: grid;
grid-columns: 150px "cell-start" 1fr "cell-end";
grid-rows: "cell-start" 50px 1fr 50px "cell-end";
}
#grid::grid-cell("cell") {
grid-column: "cell-start" "cell-end";
grid-row: "cell-start" "cell-end";
}
#item2 { grid-cell: "cell" }
#item3 { grid-cell: "cell" }
</style></pre>
</td>
<td style="vertical-align:top">
<p>Equivalent markup using the template syntax from the grid alignment spec:</p>
<pre>
<style>
#grid {
display: grid;
grid-template: "ad"
"bd"
"cd";
grid-columns: 150px 1fr;
grid-rows: 50px 1fr 50px;
}
#item2 { grid-cell: "b" }
#item3 { grid-cell: "b" }
</style></pre>
</td>
</tr>
</table>
<p><strong>New syntax using CSS Slots</strong></p>
<table>
<tr style="background-color:#EEE">
<td style="vertical-align:top">
<pre>
<style>
#grid {
display: grid;
grid-columns: 150px "cell-start" 1fr "cell-end";
grid-rows: "cell-start" 50px 1fr 50px "cell-end";
}
#grid::slot(cell) {
grid-column: "cell-start" "cell-end";
grid-row: "cell-start" "cell-end";
contents: from(cell_content_flow);
}
#item2, #item3 { flow: into(cell_content_flow); }
</style></pre>
</td>
<td style="vertical-align:top">
<pre>
<style>
#grid {
display: grid;
grid-template: "ad"
"bd"
"cd";
grid-columns: 150px 1fr;
grid-rows: 50px 1fr 50px;
}
#grid::slot(b) {
contents: from(cell_content_flow);
}
#item2, #item3 { flow: into(cell_content_flow); }
</style></pre>
</td>
</tr>
</table>
<h2 id="regions-abstract">Regions: Introduction</h2>
<p>The following sections define a set of features that will improve the way of flowing text into multiple containers (regions).>
<p>A <strong>region</strong> is an element whose content is defined by CSS rules.</p>
<p>Capturing in digital form the complex layouts of a typical magazine, newspaper, or textbook require capabilities beyond those possible with the existing CSS modules.</p>
<p>This document describes how content creators can use some basic building blocks to express complex layouts using CSS. It does not aim to cover higher-level layout issues (e.g. allocating areas to fit all the content completely or placing areas on the page). These issues can be addressed by using either scripting or another CSS modules like CSS Grid, CSS Template Layout or Flexible Box Layout.</p>
<p>With CSS Multi-column layouts, columns are all of the same dimensions and placed next to each other. However, for more complex layouts, content need to flow from one area of the page to next one without limitation of the area sizes and positions. For complex layouts, these areas need to be explicitly defined; in this document they are called regions. Regions are based on the rectangular geometry of the CSS box model.</p>
<p>One other feature that is commonly found in complex layouts is region-based styling. Region-based styling allows styling to be assigned based on the content placement (e.g. in which region it falls), rather than structure (e.g. selectors). This can be seen as an extension of the CSS 2.1 <code>:first-line</code> pseudo-element.</p>
<h2 id="regions-examples">Examples</h2>
<div class="example">
<p>Flow content from one region to another, grid layout and CSS slots
http://www.w3.org/TR/css3-grid/</p>
<pre>
<style>
body {
flow: into(article_body);
}
body::slot(page1) {
position: absolute;
// similar to column-count: 3 and gaps of 1em
grid-columns: * (1em *)[2];
}
body %page1 ::slot(column1),
body %page2 ::slot(column2),
body %page3 ::slot(column3) {
width: 1gr;
content: from(article_body);
}
%column1 { left: 0; }
%column2 { left: 2gr; }
%column3 { left: 4gr; }
</style>
<body>
<p>Text to be threaded comes here</p>
</body></pre>
</div>
<div class="example">
<p>Same example using the new grid proposal and CSS slots (http://www.interoperabilitybridges.com/css3-grid-align/)</p>
<pre>
<style>
body {
flow: into(article_body);
}
body::slot(page1) {
display: grid;
grid-columns: 1fr 1fr 1fr;
grid-rows: 1fr;
}
body %page1::slot(column1),
body %page1::slot(column2),
body %page1::slot(column3) {
content: from(article_body);
}
%column1 { grid-column: 1; grid-row: 1; }
%column2 { grid-column: 2; grid-row: 1; }
%column3 { grid-column: 3; grid-row: 1; }
</style>
<body>
<p>Text to be threaded comes here</p>
</body></pre>
</div>
<div class="example">
<p>Multiple flows - defining floating elements</p>
<pre>
<style>
body {
flow: into(article_body);
}
body img.floating_image {
flow: into(article_side_image);
}
body::slot(page1) {
display: box; // use any method here
}
%page1::slot(column1),
%page1::slot(column2) {
content: from(article_body);
}
%page1::slot(side_box) {
content: from(article_side_image);
}
</style>
<body>
<p>
Text to be threaded comes here
<img src="side_image.jpg" class="floating_image" />
</p>
</body></pre>
</div>
<h2 id="regions-properties">Properties</h2>
<h3>The 'flow' property</h3>
<p>The 'flow' property is used to assign an element to the flowing thread with the specified name. Elements that belong to a flowing thread are always displayed in the region marked for the same flowing thread (with the 'content' property). If no region with the specified flowing thread is available, the elements in the flowing thread are not displayed at all.</p>
<p>Multiple flow threads can be created from nested elements. The content will not be duplicated across flow threads. A thread that uses a descendant element, will extract the content from a thread that uses an ancestor element as a source. See Example 3 above for details.</p>
<p>Elements with a specified flow name will be taken out of the normal layout flow and rendered inside the associated regions. The 'flow' property does not affect CSS cascade and inheritance.</p>
<p>If the 'display' property is set to 'none' then the 'flow' property will be ignored and the content will not take part in the layout process.</p>
<p><strong>Note: </strong>All the elements participating inside a flow thread will be rendered as children of an anonymous block that spans across all the regions assigned to the specified thread. The elements flowed inside the same flow-thread are taken in the order they appear in the source page.</p>
<p><var class="issue">We have considered also <code>float: into(article_body)</code>. Using flow seems to better capture the meaning.</var></p>
<table class="propdef">
<tr>
<th>Name:</th>
<td><dfn id="flow">flow</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td>none | into(<name>)</td>
</tr>
<tr>
<th>Initial:</th>
<td>none</td>
</tr>
<tr>
<th>Applies to:</th>
<td>any element</td>
</tr>
<tr>
<th>Inherited:</th>
<td>no</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed value:</th>
<td>as specified</td>
</tr>
</table>
<h3>The 'content' property</h3>
<p>Assigns the region to display the contents of a specified flowing thread. The content that participates in the specified flowing thread will be laid out across all the regions in the same order as it appears in DOM.</p>
<p>The content of region elements will be suppressed. It is recommended to use other layout methods like Flex, Grid or Template modules in conjunction with the new CSS Slots specification to dynamically create regions that can be based on media queries. By using the slots with the layout methods, one can achieve the CSS goal of separating the document presentation from the document content.</p>
<table class="propdef">
<tr>
<th>Name:</th>
<td><dfn id="content">content</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td>from(<name>) | other values specified in CSS3</td>
</tr>
<tr>
<th>Initial:</th>
<td>none</td>
</tr>
<tr>
<th>Applies to:</th>
<td>any block element</td>
</tr>
<tr>
<th>Inherited:</th>
<td>no</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed value:</th>
<td>as specified</td>
</tr>
</table>
<h3>The 'content-order' property</h3>
<p>Defines the order in which the content is flowed inside the regions. If region A has its 'content-order' lower than region B 'content-order', the content will flow in region A before region B (both regionA and regionB receive content from the same flowing thread).</p>
<p>Negative values are allowed for this property.
By default all the regions will be sorted using DOM order.
Regions with equal values will be sorted using the order in the source DOM.
CSS Slots will be sorted using the order they were declared in the CSS stylesheet.</p>
<table class="propdef">
<tr>
<th>Name:</th>
<td><dfn id="content-order">content-order</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td><integer></td>
</tr>
<tr>
<th>Initial:</th>
<td>none</td>
</tr>
<tr>
<th>Applies to:</th>
<td>any block element</td>
</tr>
<tr>
<th>Inherited:</th>
<td>no</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed value:</th>
<td>as specified</td>
</tr>
</table>
<h3>The 'content-style' property</h3>
<p>The styling of the elements in the flow is determined, in general, by the same rules as for all other content. When the content is placed in the region, an additional higher-specificity styling can be applied only to the content. When content is flowed from one region to another, only the fragment of the content that is rendered inside the new region will be restyled using the new computed style.</p>
<p>Using a new pseudo-selector 'style' keyword, you can define additional styling rules that will to be applied to the content falling into a specific region. The content laid out in the region is not inheriting properties from the region itself, but from the region styling associated with it.</p>
<table class="propdef">
<tr>
<th>Name:</th>
<td><dfn id="content-style">content-style</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td><name> | none</td>
</tr>
<tr>
<th>Initial:</th>
<td>none</td>
</tr>
<tr>
<th>Applies to:</th>
<td>any element</td>
</tr>
<tr>
<th>Inherited:</th>
<td>no</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed value:</th>
<td>as specified</td>
</tr>
</table>
<h4>Content style block syntax</h4>
<pre>
<CSS selector>::style(content_style_name) {
... CSS styling rules ...
}
</pre>
<p>Regions can use the specified region styling by using the "content-style" property. The "content_style_name" is used to define a mapping between the regions and the styling rules that are to be applied to the content that flows into the region.</p>
<p>The styling rules are only applied to the elements that belong to the region's thread and they are only active for the content that falls in the particular region to which they apply. The specificity of region styling rules is considered to be greater than all of the regular rules and also also greater than the inline rules (which come from style attribute).</p>
<dl>
<dt>Only some of the CSS properties are available when styling the region:</dt>
<dd>
<ul>
<li>font properties</li>
<li>color properties</li>
<li>background properties</li>
<li>word-spacing</li>
<li>letter-spacing</li>
<li>text-decoration</li>
<li>vertical-align</li>
<li>text-transform</li>
<li>line-height</li>
<li>clear</li>
</ul>
</dd>
</dl>
<p><strong>Note:</strong> The above properties are similar to those available to first-line pseudo-selector.</p>
<h3>Content-style for non-region elements</h3>
<p>We can also extend 'content-styling' to non-region elements. It can help sand-boxing different states of a specific element: ex. <code>content-style: open, content-style: closed;</code></p>
<pre>
<style>
/* create an element inside the "button" div, before any other element */
.button > *:before ::slot(left_image) {
position: absolute;
}
.button %left_image:style(enabled) {
background: url(enabled_button_icon.png);
}
.button %left_image:style(disabled) {
background: url(disabled_button_icon.png);
}
</style>
<div class="button" style="content-style: disabled">My Button</div></pre>
<p>Moreover, styling can apply to @page rules. There should be a simple way to define the style for content depending on what page it is shown. The paged media already defines a way to change styling, but there's no way to select what elements on that page should be affected.</p>
<pre>
@page :first {
content-style: for_first_page;
}
h1:style(for_first_page) {
color: green;
}
p:style(for_first_page) {
color: red;
}</pre>
<h3>Region breaks</h2>
<p>Similar properties to the ones defined by the Paged Media module are used to define the breaks across multiple regions. Each region break ends layout in the current region block and causes remaining pieces of content from the flowing thread to be laid out in a new region block.</p>
<p>When a region break splits a block, the block's bottom margins, borders, and padding have no visual effect where the split occurs; the block's background and left and right margins, border, and padding extend to the bottom of the region, onto the top of the subsequent region.</p>
<table class="propdef">
<tr>
<th>Name:</th>
<td><dfn id="region-break-before">region-break-before</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td>auto | always | avoid</td>
</tr>
<tr>
<th>Initial:</th>
<td>auto</td>
</tr>
<tr>
<th>Applies to:</th>
<td>block elements, table rows</td>
</tr>
<tr>
<th>Inherited:</th>
<td>no</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed value:</th>
<td>as specified</td>
</tr>
</table>
<table class="propdef">
<tr>
<th>Name:</th>
<td><dfn id="region-break-after">region-break-after</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td>auto | always | avoid</td>
</tr>
<tr>
<th>Initial:</th>
<td>auto</td>
</tr>
<tr>
<th>Applies to:</th>
<td>block elements, table rows</td>
</tr>
<tr>
<th>Inherited:</th>
<td>no</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed value:</th>
<td>as specified</td>
</tr>
</table>
<table class="propdef">
<tr>
<th>Name:</th>
<td><dfn id="region-break-inside">region-break-inside</dfn></td>
</tr>
<tr>
<th>Value:</th>
<td>auto | avoid</td>
</tr>
<tr>
<th>Initial:</th>
<td>auto</td>
</tr>
<tr>
<th>Applies to:</th>
<td>block elements, table rows</td>
</tr>
<tr>
<th>Inherited:</th>
<td>no</td>
</tr>
<tr>
<th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
<th>Media:</th>
<td>visual</td>
</tr>
<tr>
<th>Computed value:</th>
<td>as specified</td>
</tr>
</table>
<dl>
<dt>auto</dt>
<dd>Neither force nor forbid a page break before / after / inside the generated box.</dd>
<dt>always</dt>
<dd>Always force a page break before / after the generated box.
</dd>
<dt>avoid</dt>
<dd>Avoid a page break before / after / inside the generated box.
</dd>
</dl>
<p><strong>Note:</strong> When the 'avoid' value is used, regions may overflow. In that case the 'overflow' property specified on the region element should be used to determine how to render the overflow.</p>
<h2 id="exclusions-abstract">Exclusions: Introduction</h2>
<p>The sections below define features that allow text to wrap around and inside non-rectangular shapes. The term <strong>"exclusion shape"</strong> refers to the exterior of the shape that text wraps around and the term <strong>"content shape"</strong> refers to the interior of the shape that text wraps inside.</p>
<h3 id="background">Background</h3>
<p><em>This section is not normative.</em></p>
<p>Exclusions are arbitrary shapes that will be avoided by the user agent when laying out content. The exclusion shape of an element is generated from the element's 'wrap-shape' property. The exclusion area is computed relative to the content box of the element on which the exclusion is specified.</p>