- From: Andreu Botella via GitHub <sysbot+gh@w3.org>
- Date: Thu, 18 May 2023 11:25:07 +0000
- To: public-css-archive@w3.org
I've been toying with a prototype implementation of `continue: collapse` in Chromium with `max-lines`, built on top of the existing `-webkit-line-clamp` code. The existing `-webkit-line-clamp` behavior is to set the intrinsic size of the element to the block offset of the last line before clamping (plus bottom p/b of that line's ancestor elements, see below), and my prototype skips painting any line boxes, block-level boxes and floats (but not apspos) which are after the clamp point in the layout tree. <details> <summary>With that, this is how this prototype handles some of these questions.</summary> > 3. If the article contains a div (which itself contains all the content) which has m/b/p, what does that do? > ```html > <article …> > <div style="border: solid red">../.</div> > </article> > ``` > > In particular: > > 1. Is the bottom border kept or not? > 2. Is the height of this border taken into account when determining how much content to collapse/discard under the `max-height` constraint? > 3. Is the answer the same for padding (probably)? > 4. Is the answer the same for margins (maybe)? The bottom padding and border is kept, but the bottom margin isn't. (This is something that is currently observable in Chromium's implementation of `-webkit-line-clamp`.) In particular, if you have a div with m/b/p whose only content is a div with m/b/p, and the clamping happens in the inner div, the inner div will also not keep its margin. If the m/b/p for both elements are symmetric, you can observe that as a difference in the actual spacing between the top and bottom:  > 4. If the article contains a div which has m/b/p, and there's some more text nodes after that, what does that do? > ```html > <article …>. > ... > <div style="border: solid red">../.</div> > ... > </article> > ``` > > Same question as the (3), but taking into account the presence of text nodes outside of the div. The line count is part of the formatting context, so if you have `max-lines: 3` and there's a line before the div, the div will clamp after 2 lines. If the clamp point is inside the div, it will behave as in (3). If it's before it, the border will not be painted. > 5. If the article has several child elements with m/b/p, and we're dropping content from several of them. Do you keep the (now empty) divs after the clamping point at all? if yes, what happens to their m/b/p ? > ```html > <article …> > <div style="border: solid red">...</div> > <div style="border: solid red">../.</div> > <div style="border: solid red">...</div> > <div style="border: solid red">...</div> > </article> > ``` Same as above: the line count adds up across the divs, and any divs after the clamped line will be completely hidden. > 7. If there's a rel-pos anchored in the discarded/collapsed lines, what happens to it? > > 8. If there's a rel-pos anchored in the _retained_ lines, shifted far enough down that it would be visually after the cut-off point, what happens to it? My implementation so far hides things that are after the clamp point in the layout tree, regardless of where they show up visually. So (7) is hidden, (8) is shown outside the element. > 9. If there's a float anchored in the discarded/collapsed lines. What happens to it? > > 10. If there's a _replaced_ float anchored in the a _retained_ line. What happens to it? Does it get truncated? Does it stay entirely? What effect does it have on the height of its containing block? > > 11. If there's a _non-replaced_ float anchored in an _retained_ line. What happens to it? Does it get truncated? Does it stay entirely? What effect does it have on the height of its containing block? Same as above, floats anchored in retained lines are shown, even if they visually overflow or show completely outside of the element's bounds. Floats in the discarded lines are hidden. Whether they're replaced or not doesn't make a difference. > 12. If there's an tall inline-level box (image, inline-block, orthogonal inline-level box…) in a retained line, does it simply grow the line and the discarding/collapsing works on that bigger line, or something else? As far as `max-lines` is concerned, it simply grows the line. It's not clear to me how this should work for `max-height`. > 13. If there's a abspos anchored in the discarded/collapsed lines. What happens to it? If not disappear, what is its static position? Does bottom:0 take it to the bottom of the box as trucated, or the the (invisible) bottom of the theoretical box? Currently I'm always showing abspos. If the block inset properties are not set, the abspos will show up wherever it would without `continue: collapse`, even if it's outside of the article. `bottom: 0` takes it to the bottom of the "collapsed" article box. > 14. If you're capping by `max-lines`, and there are block-level descendants of the `continue:collapse` element with more structure than just a pile of lines (nestbed BFCs, block-level orthogonal flow, a table, a grid, a block level image…), do you simply ignore them when counting lines, or something else? `-webkit-line-clamp` ignores all of those, so my prototype does as well. </details> -- GitHub Notification of comment by andreubotella Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7708#issuecomment-1552915755 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 18 May 2023 11:25:09 UTC