[css-overflow-3] Initial proposal for handling block ellipsis.

Author: fantasai

css-overflow-3/Overview.bs

@@ -534,6 +534,155 @@ Limiting Visible Lines: the 'max-lines' property</h2>
 	introduced by the 'max-lines' property.
 
 
+<h2 id="block-ellipsis">
+Indicating Block-Axis Overflow: the 'block-overflow' property</h2>
+
+	ISSUE: This section is an unofficial draft, posted here for discussion.
+	See <a href="https://github.com/w3c/csswg-drafts/issues/390">issue</a>.
+
+	<pre class=propdef>
+		Name: block-overflow
+		Value: clip | ellipsis | <<string>>
+		Initial: clip
+		Applies to: <a>block containers</a>
+		Inherited: yes
+		Animatable: no
+		Percentages: N/A
+		Media: visual
+		Computed value: specified value
+	</pre>
+
+	This property allows inserting content into the last line box
+	before a (forced <em>or</em> unforced) <a>region break</a>
+	to indicate the continuity of truncated/interrupted content.
+	It only affects line boxes contained directly by the <a>block container</a> itself,
+	but as it inherits, will have an effect on descendants’ line boxes unless overridden.
+	If the box contains no line box immediately preceding a <a>region break</a>,
+	then this property has no effect.
+
+	ISSUE: Should this apply to other types of fragmentation breaks (e.g. pages, columns)?
+
+	The inserted content is called the <dfn>block overflow ellipsis</dfn>.
+	Values have the following meanings:
+
+	<dl dfn-for="block-overflow" dfn-type=value>
+		<dt><dfn>clip</dfn>
+		<dd>
+			The content is not altered.
+
+		<dt><dfn>ellipsis</dfn>
+		<dd>
+			Render an ellipsis character (U+2026)--
+			or a more typographically-appropriate equivalent--
+			as the <a>block overflow ellipsis</a>
+			at the end of the affected line box.
+			UAs should use the conventions of the
+			<a>content language</a>,
+			writing system, and
+			<a>writing mode</a>
+			to determine the most appropriate ellipsis string.
+
+		<dt><dfn><<string>></dfn>
+		<dd>
+			Render the specified string
+			as the <a>block overflow ellipsis</a>
+			at the end of the affected line box.
+			The UA may truncate this string if it is absurdly long.
+	</dl>
+
+	<div class="example">
+		In this example, the lead paragraph of each article
+		is listed in a shortened menu,
+		truncated to fit within 10 lines
+		that end with “… (continued on next page)”:
+
+		<xmp highlight=css>
+			li {
+				max-lines: 5;
+				block-overflow: ellipsis;
+				block-ellipsis: "… (continued on next page)";
+			}
+			strong {
+				display: block;
+				text-transform: uppercase;
+			}
+		</xmp>
+
+		<xmp highlight=markup>
+			<li><a href="cheese-is-milk">
+				<strong>Cheese is Actually Made of Milk!</strong>
+				Investigative reporters at the World Wide Web Press Corps
+				have discovered the secret of cheese.
+				Tracing through byzantine layers of bureacracy and shadow corporations,
+				our crack team of journalists have traced the source of camembert.
+			</a></li>
+		</xmp>
+
+		Sample rendering:
+
+		<pre class="figure">
+			+---------------------------------------+
+			| CHEESE IS ACTUALLY MADE OF MILK!      |
+			| Investigative reporters at the World  |
+			| Wide Web Press Corps have discovered  |
+			| the secret of cheese. Tracing through |
+			| byzantine…  (continued on next page)  |
+			+---------------------------------------+
+		</pre>
+	</div>
+
+	When 'block-overflow' is not ''block-overflow/clip'',
+	the <a>block overflow ellipsis</a>
+	is wrapped in an anonymous inline
+	and placed at the end of the line box
+	as a direct child of its containing block,
+	effectively shortening the line box
+	from the perspective of the remaining contents of the line.
+	This inline is assigned ''unicode-bidi: plaintext''
+	and is placed in the line box after the last
+	<a>soft wrap opportunity</a> [[!CSS-TEXT-3]]
+	that would still allow the entire <a>block overflow ellipsis</a> to fit on the line.
+	(This can result in the entire contents of the line box being replaced.)
+	For this purpose, <a>soft wrap opportunities</a> added by 'overflow-wrap' are ignored.
+	Text <a href="https://www.w3.org/TR/css-text-3/#justification">alignment and justification</a>
+	occurs after placement,
+	and measures the inserted <a>block overflow ellipsis</a>
+	together with the rest of the line’s content.
+
+	If there is no next <a>fragmentation container</a>
+	and thus the remainder of the content after the break would be discarded,
+	then the UA may visually replace the contents of the line,
+	as it does for 'text-overflow'.
+	If, however, there is a next <a>fragmentation container</a>
+	that would receive subsequent content,
+	then the content replaced by the <a>block overflow ellipsis</a>
+	must be pushed to the next <a>fragmentation container</a>
+	and the <a>block overflow ellipsis</a> inserted and laid out
+	exactly as if it were part of the <a>in-flow</a> contents of the line.
+	This can result in changes to layout within or impacted by the line.
+	The means of breaking any resulting cycles is up to the UA.
+
+	If the <a>block overflow ellipsis</a>
+	is too long to fit in the line,
+	the result is undefined.
+	(The UA may, for example, treat the <a>block overflow ellipsis</a> as an unbreakable string,
+	or it may lay out the string across more than one line,
+	replacing content in earlier lines as well.)
+
+	The <a>block overflow ellipsis</a> does not capture events:
+	pointer events are dispatched to whatever is underneath
+	or otherwise visually replaced by it.
+
+	It also has no effect on the intrinsic size of the box:
+	its <a lt="min-content size">min-content</a> and <a lt="max-content size">max-content</a> sizes
+	are calculated exactly as if 'block-overflow' were ''block-overflow/clip''.
+
+	Note: Future specifications may extend this feature,
+	for example by providing an ''::ellipsis'' pseudo-element
+	to style the text,
+	or by allowing the selection of a child element of the block
+	to use as either an inline-level or block-level indicator
+	(in which case, it can capture events).
 
 Privacy and Security Considerations {#priv-sec}
 ===============================================