Hanging punctuation should include hyphens, particularly those used with justify [css-text-3] [css-text-4]

[kevinmarks]

The hanging-punctuation property should include hyphens as well as stops and commas.

When text-align: justify or equivalent is active, setting hanging-punctuation: force-end should hang all hyphens, whether typed or inserted by the user agent. Ideally this would be on by default in this mode, to replicate good typographic practice with fully justified text.

This applies to css-text-4 as well, and may be more relevant there with changes to line wrapping.

[fantasai]

The question I have here is:

• should it only be hyphens, or do people who want this want other punctuation to hang as well? Note that the current *-end values only hang CJK punctuation (on purpose).
• should the hyphens hang 100% or 50% or ...? I feel like I've seen various practices here.

[kizu]

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

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

Reference 2

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.

Reference 3

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

before	after

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.

[fantasai]

My impression is that what we're really wanting here in most cases isn't hanging punctuation, it's optical alignment of the glyphs at the start/end of the line.

[kizu]

My impression is that what we're really wanting here in most cases isn't hanging punctuation, it's optical alignment of the glyphs at the start/end of the line.

This is the case for the example in the third reference, but for the hyphens I found the 50% hanging to be usually preferable:

While this can be considered optical alignment, I'd argue that any hanging punctuation can be treated as such if we squint hard enough.

Speaking of, as a fun sidenote anecdote, the way I did implement the hanging hyphens on web in the past was by modifying the font box of the hyphens in the font, adding ­ wrapped in a span and assigning that modified font to these spans. A very convoluted work-around, with alternatives, at the time, having some crossbrowser issues (bug1, bug2).

Having a native control over this would be really nice, as it would remove the necessity for these kinds of hacks.

[fantasai]

@kizu For optical alignment, my thought is that the best place to define it would be the font itself, like in a "start edge to X" pairs kerning table. And have a switch to enable that in CSS. (Idk if OpenType has such a thing... or even if it does, if any fonts implement it.) Because the amount by which you want to hang depends a lot on the design of the glyph.

While this can be considered optical alignment, I'd argue that any hanging punctuation can be treated as such if we squint hard enough.

Kinda sorta, but there's a difference between "hang this character 100% outside the bounds" and "find an appropriate amount to hang it so it looks good". CJK mostly uses the latter, because it's gridded. But for Latin, we find it happening sometimes e.g. on pull quotes in particular, but that's usually a first/last thing rather than a start-edge/end-edge thing.

[kizu]

For optical alignment, my thought is that the best place to define it would be the font itself, like in a "start edge to X" pairs kerning table. And have a switch to enable that in CSS. (Idk if OpenType has such a thing... or even if it does, if any fonts implement it.) Because the amount by which you want to hang depends a lot on the design of the glyph.

I completely agree that ideally it would be defined in the font per glyph. But I'm too far from understanding how fonts work inside, how hard would it be to propose/implement something like this as something available in the font editors etc, so I'm talking about how I would like to see it in CSS. It would be awesome if font authors could just provide this info, and web browsers could just use this info!

But for Latin, we find it happening sometimes e.g. on pull quotes in particular, but that's usually a first/last thing rather than a start-edge/end-edge thing.

Usually, not not always: most cases in latin/cyrillic typography I saw were handling hanging cases in the middle of the text as well, not only in the beginning and end (I'm completely unfamiliar with CJK, so could only speak about latin/cyrillic cases).