Re: [csswg-drafts] [css-overflow] Consider support for multiple-line ellipsis

OK, so @frivoal and I drafted up a spec for this feature. It's currently stashed in the [css-overflow-3 draft](https://drafts.csswg.org/css-overflow-3/), but parts of it probably fit better in css-ui-4. The proposal consists of:

- A filled-out definition of the `max-lines` property, defined to trigger a fragmentation break after N lines, taking option 1 from @tabatkins comment https://github.com/w3c/csswg-drafts/issues/390#issuecomment-322576393 and option 2 in https://github.com/w3c/csswg-drafts/issues/390#issuecomment-323876329, as was discussed above.
- A new `block-overflow` property, taking the same syntax as `text-overflow`. Unlike `text-overflow`, it inherits, and applies to line boxes: it adds an ellipsis to the last line before a fragmentation break. In conjunction with `max-lines`, it will add an ellipsis to the end of the Nth line.
- A `line-clamp` property that is a shorthand for `max-lines` and `block-overflow`, together with a `-webkit-line-clamp` alias for compat.

Differences from `-webkit-line-clamp`:
- No dependency on other weird -webkit- stuff. It just works.
- Content after the ellipsized line is elided (effectively treated as `display: none`) rather than spilling over into the padding area (which necessitates a wrapper element to clip at the content edge).
- Deals with all the i18n issues raised in https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5 -- by allowing custom `<string>` values for the ellipsis (and adding  SHOULD requirement to UAs to choose a language-appropriate one), by defining things in a way that should work just fine in RTL, and by using line breaking rules to find the insertion point.

Integration with present and future specs:
- Relies on machinery already defined in CSS Fragmentation Level 3 to explain how the Nth-line cut-off works.
- Relies on CSS Text Level 3 line-breaking controls to define insertion point for ellipsis.
- Forward-compatible with regions and [overflow-fragments](https://www.w3.org/TR/2013/WD-css-overflow-3-20130418/#fragment-overflow) (see the [CSS Overflow Level 4 draft](https://drafts.csswg.org/css-overflow-4/#fragment-overflow)). E.g. `max-lines` can, in the future, be used to define the limits of a region/fragment, whose contents will then continue into the next fragmentainer in the chain.

Let us know if there's anything important that we missed.

Agenda+ to request CSSWG review.

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/390#issuecomment-371076389 using your GitHub account

Received on Wednesday, 7 March 2018 09:24:30 UTC