There’s a lovely CSS property called hanging-punctuation. You can use it to do exactly what the name suggests and exdent punctuation marks such as opening quotes.

Here’s one way to apply it:

html {
  hanging-punctuation: first last;
}

Any punctuation marks at the beginning or end of a line will now hang over the edge, leaving you with nice clean blocks of text; no ragged edges.

Right now it’s only supported in Safari but there’s no reason not to use it. It’s a perfect example of progressive enhancement. One line of CSS to tidy things up for the browsers that support it and leave things exactly as they are for the browsers that don’t.

But when I used this over on The Session I noticed an unintended side-effect. Because I’m applying the property globally, it’s also acting on form fields. If the text inside a form field starts with a quotation mark or some other piece of punctuation, it’s shunted off to the side and hidden.

Here’s the fix I used:

input, textarea {
  hanging-punctuation: none;
}

It’s a small little gotcha but I figured I’d share it in case it helps someone else out.

Great tip! It’s a far less common use-case, but I’d also advise adding the output element to the list of elements where hanging-punctuation is re-set to none.

@adactio I may or may not be quietly updating every website I’ve made in the last year

@adactio I also have had to remove hanging-punctuation from pre blocks. I’d get unwanted horizontal scroll bars if a line of code started with a quotation mark or parentheses.

@adactio adactio.com is down.EDIT: It’s back.

@adactio FWIW, it seems like it may make more sense to consider hanging punctuation as an exception — so instead of applying it globally, apply it specifically to paragraphs, headlines, quotes, and block quotes. Because you probably have more rando places you have text where you don’t want it (ex: table cells, forms as you mention, etc).

@adactio do you know why it doesn’t create hanging hyphens?

@adactio oh brilliant. Adding!