Comments on: hanging-punctuation

By: Kerry Smyth

Kerry Smyth — Tue, 01 Mar 2022 23:13:03 +0000

Thanks Chris for the write up. I have been rereading ’thinking with type’ by Ellen Lupton. I had a webpage with a few quotes that didn’t look great. I used your idea of negative text indent but switched up the unit value to ch like so.

text-indent: -1ch; or
text-indent: -0.8ch;

By: Joel

Joel — Tue, 28 Feb 2017 12:32:59 +0000

In reply to Justin McDowell. Turns out you can in Safari’s implementation.

By: Gunnar Bittersmann

Gunnar Bittersmann — Tue, 17 May 2016 07:10:32 +0000

> text-indent: -0.5em; /* Change according to your font */ Beware of magic numbers! Whatever value you choose, it fits for you but might not fit for others. Positioning the punctuation marks absolutely should fit for all. For opening punctuation marks, see slide 38. If you don’t want to wrap all your punctuation marks that should hang in spans in your markup, see the JavaScript on the slide before. (Change x-l to your needs, maybe p.) Note that this works only on punctuation marks at the beginning of a paragraph, not on all punctuation marks that happen to appear at the beginning of a line after a line break.

By: Justin McDowell

Justin McDowell — Fri, 04 Mar 2016 22:30:03 +0000

Could also double up?:
hanging-punctuation: first last;

Or must we only choose one side?

By: Matt McDowell

Matt McDowell — Tue, 27 Oct 2015 21:29:57 +0000

jQuery.exdent - A small jQuery plugin to enable hanging punctuation, an advanced typographic feature.

http://boldewyn.github.io/jQuery.exdent/

By: Sean McEmerson

Sean McEmerson — Mon, 23 Mar 2015 17:12:32 +0000

Medium currently does this with JS and CSS. It finds paragraphs beginning with a quote mark and then adds a CSS selector that has a negative text indent applied.

By: Brian

Brian — Tue, 17 Jun 2014 19:21:12 +0000

In reply to J. Hogue. J. Hogue, I'm not sure what exactly is happening and I'm not too familiar with css3 and multiple columns, but it appears the visual area that the quote occupies, is no longer in the visual bounding box of the column. I tested in Chrome, and set the margin-left of the 2nd column to -1em, then set the padding on the q to 1 em. After doing this the quote was visible and "hanging" like the single column example. I say "hanging" in the sense that it only appears to hang and you would have to adjust everything in the column accordingly to make it work. This feels hacky and probably isn't worth the additional effort when considering messing with margins etc. Also, I have no idea how other browsers would render it either :/ That being said, I hope you find this useful in some way!

By: J. Hogue

J. Hogue — Mon, 07 Apr 2014 17:22:39 +0000

In working on a client project I happening across what I think is a browser bug, but would like some validation.

I would have loved hanging-puncuation to be ready, so instead, I used negative text-indent on a p > q declaration. Works great in most instances, but when inside CSS3 columns, the punctuation disappears and no amount of overflow: visible brings it back.

Here’s a CodePen: http://cdpn.io/xkcgw
Anyone have any insight into what is happening here?

By: michael matyus

michael matyus — Wed, 04 Sep 2013 14:00:17 +0000

I long for the day that we have control over typography in the way that programs like InDesign give us.