[csswg-drafts] [css-text-overflow] Custom Text Overflow with Punctuation Preservation css-text-overflow-1 (#9541)

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

== [css-text-overflow] Custom Text Overflow with Punctuation Preservation css-text-overflow-1 ==
**Spec Reference:** [CSS Overflow Module Level 3 - text-overflow](https://www.w3.org/TR/css-overflow-3/#text-overflow)

The current `text-overflow: ellipsis` property in CSS truncates overflowing text and replaces it with an ellipsis (`...`). This is effective for straightforward text but less so for text involving special punctuation, such as quotes or questions. 

#### Example

For instance, consider the sentence:

```text
Delete 'Really really long name'?
```

Using current `text-overflow: ellipsis`, this might become:

```text
Delete 'Really really long...
```

More instinctively, the text should truncate to:

```text
Delete 'Really really lo...'?
```

This approach retains the context provided by the punctuation.

#### Proposed Solutions

1. **Custom Text Overflow**
  
    Introduce a way to allow custom text for `text-overflow`, with the capability to preserve trailing punctuation.

    ```css
    .text {
      text-overflow: "..." "?";
    }
    ```

    Here, the CSS specifies an ellipsis followed by a question mark for text truncation.

2. **Retain Punctuation Property**

    Introduce a `retain-punctuation` CSS property to work in conjunction with `text-overflow: ellipsis`.

    ```css
    .text {
      text-overflow: ellipsis;
      retain-punctuation: true;
    }
    ```
  
    Setting `retain-punctuation: true` would instruct the browser to automatically keep universally recognized trailing punctuation (`?`, `!`, `.`) intact when applying text truncation.

#### Challenges

Determining what qualifies as "punctuation" could introduce complexity. Language-specific rules and various edge cases may present challenges. Therefore, an initial implementation could limit the support to universally recognized punctuation marks like `.`, `?`, and `!`.

#### Use Cases

- Quoted text: To differentiate between the truncation and the end of the quote.
- Questions: To maintain the context of the question.
- Any text that includes critical punctuation at the end.

#### Alternatives Considered

The use of JavaScript to manually handle text truncation is possible but is generally more resource-intensive and less accessible.




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


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

Received on Tuesday, 31 October 2023 00:20:26 UTC