Re: [csswg-drafts] Hanging punctuation should include hyphens, particularly those used with justify [css-text-3] [css-text-4] (#9329)

I'll try to answer as someone who wanted to have hanging punctuation in web for years and years, with manual implementation of different kinds of success.

1. In my practice, I'd want to be able to hang: automatic hypens, `­`, em/en-dash, quotation symbols, and probably more, like periods etc.
2. As an author, _ideally_ I'd want to be able to control the amount of hanging, potentially based on the symbol and side. And this can be dependent on the context: for headers we usually would want to hang things by 100%, for `text-align: justify` we could want to choose the value in a way it would be visually pleasing based on the font in question.

## [Reference 1](https://www.artlebedev.com/mandership/120/)

In the following screenshots we can see full hanging on one side, and partial on another for one symbol, and full for another.

<img width="873" alt="A screenshot of an example showing two blocks of text: one without hanging punctuation, another with it. The example contains punctuation on the left edge of the text, with the opening quotation and bracket hanging fully." src="https://github.com/w3c/csswg-drafts/assets/177485/47479566-80c9-47f2-bdf3-351bb452e8e1">
<img width="901" alt="A screenshot of an example showing two blocks of text: one without hanging punctuation, another with it. The example contains punctuation on the right edge of the text, with the hyphenation hanging by 50%, and a period hanging by 100%." src="https://github.com/w3c/csswg-drafts/assets/177485/7d5f860c-43eb-4c35-9066-0682996d7227">

## [Reference 2](https://indesignskills.com/tutorials/hanging-punctuation/)

Here the hanging punctuation is only on the left edge, and is different for all three cases: half for a quotation symbol inside the initial letter, very slight for an em-dash, and full for a quotation symbol in the body of text.

<img width="520" alt="A screenshot of an example from the article, showing a block of text with an initial letter and some guidelines showing the edges of the text." src="https://github.com/w3c/csswg-drafts/assets/177485/986fbfec-5426-4500-812f-0d3b2170fc03">

## [Reference 3](https://www.fonts.com/content/learning/fontology/level-4/fine-typography/hanging-punctuation) 

The first example on this page has 100% hanging punctuation on both sides, the second example is more interesting:

before | after
-|-
<img width="86" alt="A screenshot of a left edge of an example, showing paragraphs with the capital letters being indented, not aligning visually with the left edge of the text." src="https://github.com/w3c/csswg-drafts/assets/177485/c92a511c-b0c0-420d-8d9a-b436b72c566e"> | <img width="86" alt="A screenshot of a left edge of an example, showing the capital letters being adjusted to be optically aligned with the left edge of the text." src="https://github.com/w3c/csswg-drafts/assets/177485/6019b7b2-f2d9-4b21-9a50-7dbc0d9b2206">

Though, this is not about _punctuation_, this is something that I used to handle by assigning a custom className to the paragraph based on the first letter in it, and then adjusting the `::first-letter`. Not sure hanging-punctuation could help us with this case.



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


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

Received on Friday, 8 September 2023 22:54:53 UTC