[csswg-drafts] [css-overflow] Provide new truncating text options which clip whitespace or punctuation conditionally (#7919)

brandonmcconnell has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow] Provide new truncating text options which clip whitespace or punctuation conditionally ==
**Related Spec:** https://www.w3.org/TR/css-overflow-4/

# The problem

Currently, when using `text-overflow: ellipsis;`, you might encounter situations where text is awkwardly truncated. For example, the text, "Truncated text, wouldn't ya know" can be truncated in several awkward ways, the most notable listed below, and also as demonstrated in the below screen recording.
* Truncated …
* Truncated t…
* Truncated text,…
* Truncated text, …
* Truncated text, w…
* Truncated text, wouldn't…
* Truncated text, wouldn't …
* Truncated text, wouldn't y…
* Truncated text, wouldn't ya …

<details>
<summary>Click to expand all truncated forms</summary>
<ul>
  <li>T…</li>
  <li>Tr…</li>
  <li>Tru…</li>
  <li>Trun…</li>
  <li>Trunc…</li>
  <li>Trunca…</li>
  <li>Truncat…</li>
  <li>Truncate…</li>
  <li>Truncated…</li>
  <li>Truncated …</li>
  <li>Truncated t…</li>
  <li>Truncated te…</li>
  <li>Truncated tex…</li>
  <li>Truncated text…</li>
  <li>Truncated text,…</li>
  <li>Truncated text, …</li>
  <li>Truncated text, w…</li>
  <li>Truncated text, wo…</li>
  <li>Truncated text, wou…</li>
  <li>Truncated text, woul…</li>
  <li>Truncated text, would…</li>
  <li>Truncated text, wouldn…</li>
  <li>Truncated text, wouldn'…</li>
  <li>Truncated text, wouldn't…</li>
  <li>Truncated text, wouldn't …</li>
  <li>Truncated text, wouldn't y…</li>
  <li>Truncated text, wouldn't ya…</li>
  <li>Truncated text, wouldn't ya …</li>
  <li>Truncated text, wouldn't ya k…</li>
  <li>Truncated text, wouldn't ya kn…</li>
  <li>Truncated text, wouldn't ya kno…</li>
<ul>
</details>

https://user-images.githubusercontent.com/5913254/196741483-b609df92-72d9-416b-9599-f19cdd31b4ac.mov


# Description of the proposal

### `text-overflow-style`

I propose introducing new `text-overflow-style` property that provides options for choosing how text is truncated, regardless of whether an ellipsis is used. These options would be…
```css
text-overflow-style: by-character; /* show all characters, default */
text-overflow-style: by-word;      /* same as orphans(0) */
text-overflow-style: no-orphans;   /* same as orphans(1) */ 
text-overflow-style: orphans(x);   /* min number of chars to be shown */
```

These options allow text to be truncated…
* by the character (`by-character`) so all letters can be truncated mid-word, the same as the current default
* by the character (`by-word`) so text is truncated by whole words, with no mid-word truncation — possible exception to be made if there is not enough room for the first whole word
* without single orphan letters (`no-orphans`) so truncated text never begins with a space followed by a single character (e.g. "Truncated t…")

### `text-overflow-exclude`

In addition to this, I propose that either—
* truncation always truncate whitespace and special characters, or…
* provide an additional property to select which special cases should also be excluded/truncated
   
   That may look something like this:
    ```css
    text-overflow-exclude: white-space special-chars;
    ```
   
   This property would allow a user to opt-in/out of which special cases they want truncating to apply for (e.g. whitespace, punctuation/special characters) at the end of strings. All options should be space-delimited, optional, and order-agnostic.
   
   By default, I think this option should be set to truncate both whitespace and punctuation.




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7919 using your GitHub account


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

Received on Wednesday, 19 October 2022 16:35:28 UTC