[css-break-4] Initial commit, adding 'margin-break'. #253

Author: fantasai

css-break-4/Overview.bs

@@ -0,0 +1,181 @@
+<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&sect;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?
+
+	<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.