-
Notifications
You must be signed in to change notification settings - Fork 708
/
Copy pathOverview.bs
182 lines (157 loc) · 6.81 KB
/
Overview.bs
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
<pre class='metadata'>
Title: CSS Fragmentation Module Level 3
Status: ED
Work Status: Exploring
ED: https://drafts.csswg.org/css-break-4/
Shortname: css-break
Group: csswg
Level: 4
TR: https://www.w3.org/TR/css-break-4/
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Abstract: This module describes the fragmentation model that partitions a flow into pages, columns, or regions.
Abstract: It builds on the Page model module and introduces and defines the fragmentation model.
Abstract: It adds functionality for pagination, breaking variable fragment size and orientation, widows and orphans.
Ignored Terms: background positioning area, region chain, … message topic …, reference box
At Risk: the ''region'' and ''break-after/avoid-region'' values of 'break-*'
</pre>
<h1>CSS Fragmentation Module Level 4 <br> <small>Breaking the Web, one fragment at a time</small></h1>
<h2 id="intro">
Introduction</h2>
<em>This section is not normative.</em>
In paged media
(e.g., paper, transparencies, photo album pages,
pages displayed on computer screens as printed output simulations),
as opposed to <a href="https://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a>,
the content of the document is split into
one or more discrete display surfaces.
In order to avoid awkward breaks
(such as halfway through a line of text),
the layout engine must be able to shift around content
that would fall across the page break.
This process is called <dfn export>pagination</dfn>.
In CSS, in addition to paged media,
certain layout features such as
<a href="https://www.w3.org/TR/css3-regions/">regions</a> [[CSS3-REGIONS]]
and <a href="https://www.w3.org/TR/css3-multicol/">multi-column layout</a> [[CSS-MULTICOL-1]]
create a similarly fragmented environment.
The generic term for breaking content across containers is <a>fragmentation</a>.
This module explains how content breaks across
<a>fragmentation containers</a> (<a>fragmentainers</a>)
such as pages and columns
and how such breaks can be
<a href="#breaking-controls">controlled by the author</a>.
ISSUE: This is currently a diff spec.
See <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Level 3</a>
for the rest of the specification.
(That text will eventually be folded into this document.)
<h3 id="break-margins">
Adjoining Margins at Breaks: the 'margin-break' property</h3>
<pre class="propdef">
Name: margin-break
Value: auto | keep | discard
Initial: auto
Inherited: no
Applies to: all elements
Computed Value: specified keyword
Animation type: discrete
</pre>
Controls whether the box’s <a>block-axis</a> <a>margins</a>
are discarded or kept at a <a>fragmentation break</a>.
Values have the following meanings:
<dl dfn-for=margin-break dfn-type=value>
<dt><dfn>auto</dfn>
<dd>
When an <em>unforced</em> break occurs before or after the box,
any margins adjoining the break truncate to
the <a>remaining fragmentainer extent</a> before the break,
and are truncated to zero after the break.
When a <em>forced break</em> occurs there,
adjoining margins before the break are truncated,
but margins after the break are preserved.
<a href="#valdef-box-decoration-break-clone">Cloned margins</a>
are always truncated to zero.
Note: When margins collapse
(see <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">CSS2§8.3.1</a>),
the margins of multiple boxes can be adjoining the break.
<dt><dfn>keep</dfn>
<dd>
Margins adjoining a <a>fragmentation break</a>
are not truncated.
<dt><dfn>discard</dfn>
<dd>
Margins adjoining a <a>fragmentation break</a>
are always truncated,
including at the start and end of a <a>fragmentation context</a>.
</dl>
ISSUE: <a href="https://www.antennahouse.com/product/ahf66/ahf-focss6.html">Antenna House also allows a second ''keep'' keyword</a>,
which preserves the margin after the break;
it is otherwise discarded.
Do we want to include this feature?
Also, if only one ''keep'' is specified, does it apply only to the before margin or both sides?
See <a href="https://github.com/w3c/csswg-drafts/issues/3254">discussion</a>.
<div class="example">
Consider the following <a>multi-column layout</a> example:
<xmp>
<style>
article { columns: 16ch; border: solid silver; }
h3 { break-before: always; }
</style>
<article>
<p>Here we can compare the effects of <code>margin-break</code>,
before and after forced and unforced breaks.</p>
<p>This paragraph starts after an unforced break.</p>
<h3>This heading is given a forced break before.</h3>
</article>
</xmp>
Here are illustrations of how it might render
with each 'margin-break' value:
<figure>
<img src="images/margin-break-auto.png"
alt="Here the top margin is kept on the first paragraph and the heading
(which starts after a forced break)
but not after the second paragraph
(which starts after an unforced break).
The bottom margins are all discarded
at the bottom of each column.">
<figcaption>''margin-break: auto'' (initial value)</figcaption>
</figure>
<figure>
<img src="images/margin-break-discard.png"
alt="Here the top margins occurring at the top of each column
and the bottom margins occurring at the bottom of each column
are all truncated to zero.">
<figcaption>''margin-break: discard''</figcaption>
</figure>
<figure>
<img src="images/margin-break-keep-discard.png"
alt="Here the top margins occurring at the top of each column
are all kept; however the bottom margins are still truncated.">
<figcaption>''margin-break: keep discard''</figcaption>
</figure>
<figure>
<img src="images/margin-break-keep-keep.png"
alt="Here the top margins occurring at the top of each column
as well as the bottom margins occurng at the bottom of each column
are all kept; this increases the height of the auto-height container
to accommodate the bottom margins.">
<figcaption>''margin-break: keep keep''</figcaption>
</figure>
</div>
<h2 class="no-num" id="changes">
Changes</h2>
<h3 class="no-num" id="changes-level-4">
Changes Since Level 3</h3>
The following features have been added since
<a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Level 3</a>:
<ul>
<li>The 'margin-break' property.
</ul>
<h2 class="no-num" id="acknowledgments">
Acknowledgments</h2>
The editors would like to thank
Murakami Shinyu
specifically for his contributions to CSS Fragmentation Level 4,
and to
<a href="https://www.w3.org/TR/css-break-3/#acknowledgments">all the contributors to Level 3</a>,
which constitutes the bulk of this specification.