Re: [csswg-drafts] [css-ui-4] Ellipsizing of text in middle of string (#3937)

Giving the [issues stated earlier](https://github.com/w3c/csswg-drafts/issues/3937#issuecomment-493706724) some more thought, I came up with another approach than outlined in [my first suggestion](https://www.w3.org/wiki/Text-overflow_middle_cropping).

> * Normally, you will only want to crop _either_ at the beginning and/or end _or_ in the middle, but not both.

We might introduce a `text-overflow-position` longhand to cover that.

> * For middle-cropping you will only want to have ellipsizing but not clipping, so `clip` should not be allowed for it.

Some possible options to handle this:

1. Introduce an `auto` value and make it the initial value. For start and end positioning of the overflow handling, the used value would then be `clip`, for middle positioning it would be `ellipsis`. (That requires checking web compatibility.)
2. Let `clip` also apply to middle positioning. (Though clipping the inline content in the middle probably doesn't have any use cases.)
3. Interpret `clip` for middle positioning as `ellipsis`. (Might be unexpected.)
4. Interpret `clip` for middle positioning as if end positioning was applied. I.e. clip the contents at the edge where they overflow the element.

> * Handling of inline contents other than text.

This would work very similar to the current definition. I.e. characters and atomic inline-level elements would be removed until the ellipsis fits.

With an `auto` value as suggested above, the syntaxes might then look like this:

`text-overflow` = `<'text-overflow-handling'> || <'text-overflow-position'>`
`text-overflow-handling` = `auto | [ clip | ellipsis | <string> | fade | <fade()> ]{1,2}`
`text-overflow-position` = `[ start || end ] | middle`

With names to be bikeshedded, as always. And only the first handling value would be applied if middle positioning is chosen.

The simplest middle-cropping could then be achieved via `text-overflow: middle`. Some advanced examples would be `text-overflow: middle fade(3ch)` and `text-overflow: start end ellipsis`.
Doing so, we'd have to define what to do in cases like `text-overflow: end start ellipsis fade`.

Sebastian

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 6 July 2023 22:20:42 UTC