-
Notifications
You must be signed in to change notification settings - Fork 20
Expand file tree
/
Copy pathfragments-columns-regions-pages.txt
More file actions
310 lines (252 loc) · 16.9 KB
/
fragments-columns-regions-pages.txt
File metadata and controls
310 lines (252 loc) · 16.9 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
====== Fragments, Columns, Regions, Pages ======
//Background/overview Notes and examples in support of discussion on Regions and paged view//
See [[Page View]] for use cases and proposals
===== Layout Engine with Fragmentation Support =====
Implementations of regions, columns and paginations will vary but in most general situation it is reasonable to assume that there is a layout engine that takes formatted content in DOM as input and fills one or more container with that content:
<html>
<div class="figure" style="border:thin solid silver; width:35em; margin:auto; padding:1em;">
<div class="legend" style="font-style:italic">Content</div>
<div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
<div style="margin:1em"></div>
<div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
Layout engine
</div>
<div style="margin:0.5em"></div>
<div class="legend" style="font-style:italic">Containers</div>
<div style="text-align:center">
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
</div>
</div>
</div>
</html>
That's what all layout engines do, the most common cases being
* Layout for screen
<html>
<div class="figure" style="border:thin solid silver; width:35em; margin:auto; padding:1em; font-size:66%; -float:right; clear:right;">
<div class="legend" style="font-style:italic">Content</div>
<div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
<div style="margin:1em"></div>
<div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
Layout engine
</div>
<div style="margin:0.5em"></div>
<div class="legend" style="font-style:italic">Containers</div>
<div style="text-align:center">
<div class="box" style="display:block;margin:0.5em;border:1px dashed black;padding:0.5em; border-bottom-style:none;height:3em;">
</div>
</div>
</div>
</html>
(there is only one container, usually with auto height) and
* printing
<html>
<div class="figure" style="border:thin solid silver; width:35em; margin:auto; padding:1em; font-size:66%; -float:right; clear:right;">
<div class="legend" style="font-style:italic">Content</div>
<div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
<div style="margin:1em"></div>
<div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
Layout engine
</div>
<div style="margin:0.5em"></div>
<div class="legend" style="font-style:italic">Containers</div>
<div style="text-align:center">
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
</div>
</div>
</html>
(a sequence of containers, usually all of the same size)
This doesn't yet show what layout engine do, it just shows some possible situations. It could be noted that if containers exist before layout engine has done any work, we must be assuming that containers are exernal to layout engine. That is not necessarily so, we are just trying to keep these general illustrations simple.
===== Fragmentation =====
When layout engine actually does its work, it outputs pieces of content that are laid out to fit into given containers. For the purposes of describing the layout process, let's call filling multiple containers with content "fragmentation". Then the containers can be called "space fragments" and visual representation of portions of content will be "fragment boxes".
//Note: This is not an attempt to introduce formal definitions or terminology for fragmentation (fragmentation will have a [[spec:css4-page|dedicated module]]). The purpose of this summary is to visualize possible relationships between content, conainers and layout results, which, hopefully, will be useful for evaluation of proposed solution in this space. Feel free to correct any trems or concepts if they look inconsistent with formal definitions elsewhere//
<html>
<div class="figure" style="border:thin solid silver; width:35em; margin:auto; padding:1em;">
<div class="legend" style="font-style:italic">Content</div>
<div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
<div class="down-arrow" style="width:2em;margin:0.5em auto;">
<div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
<div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
</div>
<div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
Layout engine
</div>
<div class="down-arrow" style="width:2em;margin:0.5em auto;">
<div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
<div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
</div>
<div class="legend" style="font-style:italic">Fragment boxes</div>
<div style="text-align:center">
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
Lorem
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
ipsum
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
dolor
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
sit
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
amet
</div>
</div>
<div class="legend" style="font-style:italic">Containers</div>
<div style="text-align:center">
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em; ">
</div>
</div>
</div>
</html>
Note that as layout engine fills containers with content, there may be content than there is space in containers:
<html>
<div class="figure" style="border:thin solid silver; width:35em; font-size:66%; margin:auto; padding:1em;">
<div class="legend" style="font-style:italic">Content</div>
<div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
<div class="down-arrow" style="width:2em;margin:0.5em auto;">
<div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
<div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
</div>
<div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
Layout engine
</div>
<div class="down-arrow" style="width:2em;margin:0.5em auto;">
<div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
<div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
</div>
<div class="legend" style="font-style:italic">Fragment boxes</div>
<div style="text-align:center">
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
Lorem
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
ipsum
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
dolor
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
sit
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:#ff8888;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
amet
</div>
</div>
<div class="legend" style="font-style:italic">Containers</div>
<div style="text-align:center">
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em; visibility:hidden;">
</div>
</div>
</div>
</html>
... and there may be more space than content:
<html>
<div class="figure" style="border:thin solid silver; width:35em; font-size:66%; margin:auto; padding:1em;">
<div class="legend" style="font-style:italic">Content</div>
<div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
<div class="down-arrow" style="width:2em;margin:0.5em auto;">
<div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
<div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
</div>
<div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
Layout engine
</div>
<div class="down-arrow" style="width:2em;margin:0.5em auto;">
<div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
<div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
</div>
<div class="legend" style="font-style:italic">Fragment boxes</div>
<div style="text-align:center">
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
Lorem
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
ipsum
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
dolor
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
sit
</div>
<div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em; visibility:hidden;">
amet
</div>
</div>
<div class="legend" style="font-style:italic">Containers</div>
<div style="text-align:center">
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
</div>
<div class="box" style="display:inline-block;margin:0.5em;border:1px dashed red;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
</div>
</div>
</div>
</html>
Which gets us to the questions of "where do the containers come from?" and "how to get more?"
===== Containers =====
Considering that a target container for fragmentation is a rectangle or shape with size and possibly position, there are many ways to create and manage theem.
Some existing or anticipated ways to provide containers for fragmentation are
* Columns
* As defined in css3-multicol ([[http://www.w3.org/TR/css3-multicol/|CR]])
* With column selectors ([[http://dev.w3.org/csswg/css3-gcpm/#regions|ED]])
* Pages
* Printing or print preview (built-in in browsers)
* Automatic page view ([[http://dev.w3.org/csswg/css3-gcpm/#paged-presentations|ED]])
* Regions+script page view ([[http://dev.w3.org/csswg/css3-regions/#cssom_view_and_css_regions|ED]], [[http://www.w3.org/TR/css3-regions/#cssom_view_and_css_regions|WD]])
* Page templates ([[http://epub-revision.googlecode.com/svn-history/r3025/trunk/src/proposals/css_page_templates/csspgt-doc.xhtml|EPub proposal]])
* Regions
* Static ([[http://dev.w3.org/csswg/css3-regions/|ED]], [[http://www.w3.org/TR/css3-regions/|WD]])
* Scripted ([[http://dev.w3.org/csswg/css3-regions/#cssom_view_and_css_regions|ED]], [[http://www.w3.org/TR/css3-regions/#cssom_view_and_css_regions|WD]])
* Generated (discussion: ?)
Let's compare the different kinds of fragmenting containers, specifically looking at who is in control and how they are manated dynamically:
^ Container type ^ how created ^ dynamic ? ^ details ^
| **Columns - CSS3** | "columns:N"\\ multicol properties | partially | new columns are added in overfrlow |
| **Columns - new** | automatic | dynamic | control size & position sith column selectors:\\ article::column(2) {...} |
| **Pages - print** | printing app or layout engine in print mode; hardcoded | dynamic | follows paged media spec; no reading UI defined beyond print preview |
| **Pages - auto paged view** | "overflow:paged" | dynamic | by default all "pages" are same size; can be customized with page selectors (like columns); default UI |
| **Pages - regions+script** | from script | script | all custom, no declarative page generation, no default UI, all in script |
| **Pages - page templates** | automatic | dynamic | a set of templates and template selection rules; multiple flows can be supported; no default UI; can be combined with any other generated containers |
| **Regions - static** | "flow-from:<flowname>" | static | current specs don't define declarative ways to generate regions |
| **Regions - scripted** | regionOverflow, regionLayoutUpdate | script | regions spec adds minimal API for layout results and timing |
===== Using fragmentation =====
See [[Page View]]