[css-overflow][css-pseudo] Pseudo-elements for fragmentation boundaries

[SebastianZ]

CSS Overflow 3 currently defines a block-ellipsis property that allows to insert an ellipsis or a custom string into the last line box.

Though in #390 and some referenced issues, there were some hints by @frivoal and @MatsPalmgren that this property might not cover all use cases and we might introduce pseudo-elements that target the fragmentation boundaries. As far as I can see, there wasn't a dedicated discussion for those pseudo-elements yet, though.

While Florian concentrated on the content that's inserted into the last line box, Mats pointed out that there is also the use case for content that indicates the continuation of a different fragment.

His concrete proposal was to add ::fragment-before and ::fragment-after pseudo-elements. The former indicates the continuation of a different fragment and the latter the truncation of the current fragment.

My iteration on that proposal: The two pseudo-elements represent the fragmentation boundary start and end boxes. Similar to the ::marker pseudo-element, the contents of those boxes are determined by the first of these conditions that is true:

1. The content property on the pseudo-element itself is not normal. ⇒ The contents of the fragmentation boundary box are determined as defined by the content property.
2. The block-ellipsis is set to something else than none or text-overflow is set to something else than clip. ⇒ The contents of the fragmentation boundary box are determined as defined by the block-ellipsis or text-overflow property.
3. otherwise, the fragmentation boundary box has no contents and the corresponding pseudo-element doesn't generate a box.

The ::fragment-after pseudo-element is added after the ::after pseudo-element, the ::fragment-before pseudo-element before the ::before pseudo-element.

To allow flexible styling, there probably shouldn't be a restriction regarding the properties applying to the pseudo-elements. That said, some default styling like display: inline-block and others will be required to properly represent the different values of block-ellipsis and text-overflow.

That said, the interaction with the truncated contents still needs to be handled like for the two properties. That means that the contents of the pseudo-elements may further truncate the contents, at least in case of a string as content or block-ellipsis being set to auto or text-overflow containing ellipsis. How that works with other contents still needs to be defined.

Sebastian

[yisibl]

How are they related to ::ellipsis?

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).

https://drafts.csswg.org/css-overflow-4/#block-ellipsis