forked from w3c/csswg-wiki
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpage-view.txt
More file actions
300 lines (223 loc) · 15.2 KB
/
page-view.txt
File metadata and controls
300 lines (223 loc) · 15.2 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
====== Page View ======
"Page view" or "paged view" as a term relates broadly to the kind of presentation where content is laid out in discreet pages and shown to user one page at a time (or several pages at a time).
Wide variety of paged view situations require same or similar support from core layout engine -- primarily the ability to flow content into multiple containers, thus producing multiple boxes with fragments of content (see "[[Fragments, Columns, Regions, Pages]]"). Solutions differ in how the fragmentation functionality is invoked.
The problems to be solved in implementing paged views revolve around encoding the design intent and UI behavior, both requiring novel approaches: design intent often derives from experience in print media, which must become adaptive to target multiple devices and resolutions; UI of navigating pages on screen also doesn’t have established tradition, although many implementations use similar concepts.
This set of use cases shows some expected uses of paged views.
Uses cases, analysis and proposals found here probably don’t correspond to a single specification. The goal here is to get a holistic view of each case, which will help to compare proposals and understand relative importance of lower level problems.
====== Use Cases ======
===== Page view in window or element =====
**Goal:** easy declarative way to create paged view, good behavior with default settings and default UI.
<html>
<div style="display:inline-block; width:9em;">
<div style="background:gray; --padding:1em; text-align:justify; vertical-align:middle;">
<div style="background:white;border:1px solid black; --width:7em; padding:1em; text-align:justify">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
<div style="text-align:justify; padding:0 1em;">
<div style="display:inline-block; color:lightgray; font-size:1.2em;"><<<</div>
<div style="display:inline-block; color:lightgray; font-size:1.2em;">>>></div>
<div style="display:inline-block; width:6em; height:0; visibility:hidden"></div>
</div>
</div>
</div>
</html>
**Proposal:**
* New value for 'overflow property: **"overflow:paged"**
**Example:**
div.book { overflow:paged }
Element with "overflow:paged" shows one page of content at a time.
All pages are of the same size - the size of content area of the element.
UI is provided by UA, it may be jestures on touch device, or page navigation controls (perhaps similar to controls on <video> element)
**Example:**
html { width:100%; height:100%; overflow:paged }
This should put the whole document in paged view. If UA is also in full screen mode, this works particularly well on tablet devices as full-screen reading mode
**Example:**
iframe.magazine { overflow:paged }
Presents content of a separate document in paged view. Can be used to build a page viewer with custom UI.
**Issues:**
* May need additional layout options or constraints
* Page size
* Min/max number of pages (maybe)
* Possible page presentation options
* Facing pages?
* Direction of flipping pages?
* Add a way to customize pages (page numbers, headers, footers)?
* Dealing variable-sized pages is not yet defined and may be limited in this simple case
===== Page view with custom controls =====
**Goal:** Add custom controls to paged view.
Ideally, UA should provide well designed, usable and accessible controls for pagination. There will inevitably be situations however that require custom UI, for style or to provide unique functions. It could look like this:
<html>
<div style="display:inline-block">
<div style="height:2em; background:black; padding:0.5em 1em; font-family:sans-serif; font-weight:bold; text-align:center;">
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">print</div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">share</div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em"><</div>
<div style="display:inline-block; border:1px solid white; background:white; padding:0.25em; font-weight:normal">page #</div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">></div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">zoom</div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">bookmark</div>
<div style="display:inline-block; border:1px solid white; background:white; padding:0.25em 5em 0.25em 0.25em ; font-weight:normal"> </div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">search</div>
</div>
<div style="background:gray; padding:1em; text-align:center;">
<div style="display:inline-block;background:white;border:1px solid black; width:7em; padding:1em; text-align:justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
</html>
Custom controls will activate custom script, which in some cases will need to access pagination results or modify the view.
Implementation of custom page UI needs some or all of the following:
* Modify or replace the default pagination UI
* Know number of pages
* Show a particular page
* Know if everything fits (in automatic page layout, there will be alwayse enough pages generated, but there may be unprocessed content due to timing or additional constraints)
* Determine what content is in a given page (a potentially disjoint range of content)
* Determine on what page or pages a given range of content is
* Determine if content of interest didn't fit on any page
* Find content that intersects with a point or shape, relative to a given page or current page
* Find exact coordinates and page(s) of laid out content
* Know when number of pages changes or layout of content on a page changes
To achieve that, pages and paged viewer need exposure in styles and OM
====Proposals====
**Control default UI with 'overflow' property** (([[http://dev.w3.org/csswg/css3-gcpm/#paged-presentations|GCPM - ED]]))
* overflow-style:<existing values>|paged-x|paged-y|paged-x-controls|paged-y-controls
Example:
<code>
.pager { overflow:paged-x; }
<div class="pageview">
<div class="toolbar">
<button onclick="PrevPage()">previous</button>
<button onclick="NextPage()">next</button>
...
</div>
<div class="pages">
<iframe class="pager" src="content.html"></iframe>
</div>
</div>
</code>
====Ideas====
===Page View DOM===
//There are no formal proposals on OM for overflow:paged at this time.//
To support custom pagination UI, overlfow:paged needs to expose equivalent of offsetTop/offsetLeft/offsetHeight/offsetWidth/srollTop/scrollHeight (which are used for cusotm control of scrollable elements)
**Element.pageCount** -- get number of pages
This should wait synchronously for pagination to be completed, if needed, following the patter of 'offsetHeight' etc. (which always return correct value, forcing synchronous layout)
**Element.showPage(pageNumber)**
//**Events?** -- should there be an event for layout change? maybe not, unlike regions: all content is inside the viewer element, content change events may be enough//
//**UNDER CONSTRUCTION**//
**Example**
===== Page view with custom pages =====
**Goal:** Apply content formatting to specific pages and position pages on screen
<html>
<div style="display:inline-block">
<div style="height:2em; background:black; padding:0.5em 1em; font-family:sans-serif; font-weight:bold; text-align:center;">
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">print</div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">share</div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em"><</div>
<div style="display:inline-block; border:1px solid white; background:white; padding:0.25em; font-weight:normal">page #</div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">></div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">zoom</div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">bookmark</div>
<div style="display:inline-block; border:1px solid white; background:white; padding:0.25em 5em 0.25em 0.25em ; font-weight:normal"> </div>
<div style="display:inline-block; border:1px solid white; color:white; padding:0.25em">search</div>
</div>
<div style="background:gray; padding:1em; text-align:center;">
<div style="display:inline-block;background:white;border:1px solid black; margin:0.5em">
<div style="width:6.5em; height:9em; margin:1em; overflow:hidden; text-align:justify; color:green;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce </div>
</div>
<div style="display:inline-block;background:white;border:1px solid black; margin:0.5em">
<div style="width:6.5em; height:9em; margin:1em; overflow:hidden; text-align:justify; color:blue;">
posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</div>
</div>
</div>
</div>
</html>
* left page has green text, right page has blue text
* even and odd pages are positioned differently to create a two-page view
**Option 1:** page selectors
#paged { width:6.5in; height:9in; overflow:paged; }
#paged * { border: 1px solid black; }
#paged::nth-child(even) { position:relative; left:<page-width> } /**
**Option 2:** page OM
//**TODO -- work in progress here**//
===== Magazine viewer =====
**Goal:** enable complex page design, with multiple content flows and graphics
A magazine article could look like this.
{{:spec:magazine1.png}}
Each individual page can have unique design and can include content from multiple sources: multiple text streams (main story, side bar, pull quotes) and images (some included in text, some placed directly as related visuals or advertisements).
//Note that at this point we don't make assumptions on how exactly each "page" is constructed. It may be automatically generated with some adaptive mechanism or it may be manually put together by a design team with print design experience. That distinction will be important for next use case, here we are looking at ways to represent the layout//
The user reads the magazine in a reader application, with same options for page navigation control as in previous examples of page view.
{{:spec:magazine2.png}}
**Proposals:**
* css3-regions module
* Page view, UI, page generation is done in script
**Issues:**
* No declarative way to generated additional regions or pages is yet defined
===== Adaptive magazine pages with templates =====
**Goal:** automatically generate complex pages based on content, encoded design intent and media properties
{{ :spec:magpageportrait.png}}{{ :spec:magpagelandscape.png}}
Online magazine must work on devices on different sizes, resolution and orientation. Just as any other adaptive content using media queries, same magazine will look very different on different devices.
Same content may end up on different pages, order of content may change, and content may change too (different images may be used in different orientation, some images may be dropped, some text may be replaced with links).
<html><div style="clear:both"></div></html>
**TODO:** Add an example of template with columns, floating image, pullquote
**Proposals:**
* Need a proposal.
* [[http://epub-revision.googlecode.com/svn-history/r3025/trunk/src/proposals/css_page_templates/csspgt-doc.xhtml | IDPF Page Templates Proposal]] has a range of ideas, to converge with what is developing in recent discussions.
**Issues:**
===== Column breaks and page breaks in regions =====
**Goal:** provide a way to control layout in columns and pages, when columns, pages or both are parts of a template-based paged view
In magazine layout, what user percieves as "columns" can have irregular shape and position (and may be regions rather than boxes of multicol layout) and be placed to "pages" in a custom way.
Content flown throuh such "colums" needs to be able to use column breaks and page breaks, for example to make sure that a new chapter starts at a new page:
<HTML>
<div id="page1" class="pageFrame" style="float:left; background:white; border:2px solid blue; margin:1em; width:18em; height:22em;">
<div class="pageContent" style="margin:2em; width:13em; height:18em; position:relative; text-align:left; xoutline:1px solid lime">
<div class="titleImg" style="background:salmon; width:8.3em; height:50%; float:right;"></div>
<div class="mainStory">
<div style="float:left; width:4em; height:18em; overflow:hidden; margin-right:0.5em;outline:2px solid green;">
<div style="color:red; font-weight:bold">One</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.
Fusce posuere, magna
</div>
<div style="float:left; width:4em; height:8.5em; overflow:hidden; margin:0.5em 0.5em 0;outline:2px solid green;">
pulvinar ultricies, purus lectus malesuada libero, sit amet
</div>
<div style="float:left; width:4em; height:8.5em; overflow:hidden; margin:0.5em -1em 0 0.5em;outline:2px solid green;">
</div>
</div>
</div>
</div>
<div id="page1" class="pageFrame" style="float:left; background:white; border:2px solid blue; margin:1em; width:18em; height:22em;">
<div class="pageContent" style="margin:2em; width:13em; height:18em; position:relative; text-align:left; xoutline:1px solid lime">
<div class="mainStory">
<div style="float:left; width:4em; height:10em; overflow:hidden; margin-right:0.5em;outline:2px solid green;">
<div style="color:red; font-weight:bold">Two</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div style="float:left; width:4em; height:10em; overflow:hidden; margin:4em 0.5em 0;outline:2px solid green;">
Maecenas porttitor congue massa.
Fusce posuere, magna sed
</div>
<div style="float:left; width:4em; height:10em; overflow:hidden; margin:8em -1em 0 0.5em;outline:2px solid green;">
pulvinar ultricies, purus lectus malesuada libero, sit amet
commodo
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</HTML>
If "page" is an element or pseudo-element generated from template and rendered in a custom page viewer, layout engine may need additional information to know which column is first column of a page.
//Note that this may or may not be an issue, depending on how pages are built.//
**Proposal:**
**Issues:**
====== Issues ======
Further issues (not addressed in use cases):
* Paged view doesn't automatically mean "paged media" (which is commonly used as "for printing" and can't be repurposed). Should there be a way to declare that a paginating viewer (e.g. iframe) needs to render the same visuals as what would be printed?
* Media queries for paged view/columns/regions?