6 ms·
The `hanging-punctuation property` in CSS
- aronhegedus 3y agoNot a fan of this, too many ways it can fail, and have ugly scroll bars, and the gain is little to me
- dylan604 3y ago"There is some risk to the property. Because the punctuation hangs off the edge, if you don’t have any available space, it can trigger a horizontal scroll bar, which sucks. This is probably why it’s not a default. It’s rare there is zero space on the edge of text, though, so meh." If you're a designer looking to design to the point of using this styling, you're going to be adding the padding/margin to allow for that space. I would agree that having it set to off is a good default. I like when defaults are sane.
- leokennis 3y agoNot just sane, also safe. Designers will add the needed padding but people just banging together a site will not and this default then saves us from scrollbars.
- dhosek 3y agoI find, though that full-hung punctuation is a bit much. When I was publishing Serif in the 90s, I did half-hung punctuation where punctuation at the beginnings and ends of lines extended just half the width of the character. Most software makes this pretty much impossible,¹ although there are sneaky ways to do it manually: I wasted some time making a nice title page for the manuscript of the novel I’m writing,² titled, We, the Rescued and I set the “We,” on its own line, centered, but it looked off that way. putting a white comma before We helped, but now the off-centeredness went the other way, so I changed the type size of the white comma to half that of the black comma and boom, everything looked much better.³ ⸻ 1. I did it in TeX. I had to make modified versions of the fonts that had a separate hyphen character which went past the margin and insert manual \penalty0 points after en- and em-dashes since they no longer automatically were breakpoints since the hyphen was not the hyphenchar. 2. Despite my typographic background, I generally try to avoid spending time on manuscript formatting beyond the absolute basics. 3. Still not exactly half-hung punctuation with this trick. The exact hung fraction is left as an exercise to the reader.
- crazygringo 3y agoTotally agreed. You never want it to stand out, you just want everything to look balanced. A slight amount of hanging looks like it's not hanging at all -- it just looks right. The same way the top and bottom of an 'O' are higher/lower than the top and bottom of an 'X', even though it doesn't look like it. It's all about visual weight -- how the eye perceives it. Fully hanging punctuation is just way overdoing it.
- zestyping 3y agoOvershoots are an unfortunate holdover. In many fonts, "C"s and "O"s are too big and "A"s are too tall. I mean, just look at this: https://typography.guru/uploads/monthly_2020_01/overshoot.thumb.png.daaf421910bb62e86e56e457cf8b0e24.png https://typography.guru/uploads/monthly_2020_01/overshoot.th... Or this: https://ilovetypography.com/img/2015/03/Caslon-overshoot-500x2501.jpg https://ilovetypography.com/img/2015/03/Caslon-overshoot-500... Or this: https://ktla.com/wp-content/uploads/sites/4/2020/06/GettyImages-1166667354.jpg?w=2560&h=1440&crop=1 https://ktla.com/wp-content/uploads/sites/4/2020/06/GettyIma... Or this: https://live.staticflickr.com/5300/5482446696_1fa1ff2b45_b.jpg https://live.staticflickr.com/5300/5482446696_1fa1ff2b45_b.j... Hideous. Try to follow that baseline with your eye. It's a roller coaster of chaos. Type designers like to add overshoots merely out of habit, not aesthetics. They might have made sense in the lead type era, but simply look like mistakes today.
- trealira 3y agoThey're not hideous. Overshoots sage there because at normal reading sizes sizes, or on poster sizes read from far away, if letters like o, n, O, A, etc. don't have overshoots, then they'll look too small compared to the other letters, even though they're technically the same size. It's an illusion that type designers work around using letter overshoots.
- zestyping 3y agoYes, everyone says that. It's parroted so often that people think it's true. But have you _seen_ it? Please show me an example of type that looks more _uniformly sized_ with overshoots than without, and I'll agree with you.
- ggm 3y agoThe point of much punctuation is to help inform the parse, and understanding semantic intent. This is why I find the whole "two spaces after full stop not needed" thing to be a very odd argument: Those spaces aided reading. They had a purpose. Quote blocks are embedded, nested structure. Sure seems to me like a punctuation model and a layout model which can understand that, is net beneficial. I always liked the french <<this is a quote>> model. Somehow it felt more like an embedded thing. Double quotes have the additional burden MICROSOFT WORD I AM LOOKING AT YOU of the random interpolation of what the editor YES MICROSOFT WORD I MEAN YOU thinks it knows you meant to say. Additionally hijacking the text into badly encoded iso-latin1 or utf-8 mis-parsed, as a free gift. if I mean to say: “a quote” (left and right double quotation mark) I will say it. When I say "a quote" (apostrophe, used twice) please.. leave those quote-marks alone. (double-dash to em-dash.. same problem: free uplift to UTF you didn't ask for)
- pimlottc 3y ago> I always liked the french <<this is a quote>> model. Somehow it felt more like an embedded thing. Those « » characters are called "guillemets" [0]. Fun fact, they're named after an early French typecutter, Guillaume Le Bé! https://en.wikipedia.org/wiki/Guillemet https://en.wikipedia.org/wiki/Guillemet
- ahmedfromtunis 3y agoNo, they are the worst. Guillemets require using space around them («wrong», « correct ») which makes typesetting so hard as you have to hunt for each guillemet that fell to the next line to manually fix it. And even that's not possible on the web, so you have to get used to dangling punctuation.
- shannifin 3y ago> Hanging that opening curly-quote into the space off to the start of the text and aligning the actual words is a better look. Eh... no it's not?
- betenoire 3y agoThat was my reaction, as well. Maybe if it were bigger and stylized, but that's not really a trend anymore anyway. This just distracts me and makes me forget what I was reading
- quickthrower2 3y agoIt depends. Some of those examples look good, and some don't. In a big block quote it looks the part, like a magazine. Also the cyan line in Julia's blog makes it look good to me for some reason. I think it is the association of that line with a paper workbook.
- Izkata 3y ago> In a big block quote it looks the part, like a magazine. Doing a google image search for "magazine blockquote" isn't giving me anything with hanging punctuation, just oversized decorative quote marks, mostly at opposite corners of the blockquote box, sometimes even just the opening one. Most of them are also in a different color than the text.
- paradox460 3y agoIt happens a lot in prose magazines like The New Yorker, Harpers, and Lapham's
- roelschroeven 3y agoI agree. I don't think it looks better at all, and I feel it makes the structure of the text somewhat more difficult to see. I have this reaction to a lot of established typographical rules actually. Digits with descenders to name just one ("font-variant-numeric: oldstyle-nums" in CSS): I think they're ugly and make reading numbers unnecessarily difficult.
- curtgrimes 3y agoAs of November 2023, only available in Safari. https://caniuse.com/css-hanging-punctuation https://caniuse.com/css-hanging-punctuation
- masswerk 3y agoI can confirm that – as of writing – Safari/Mac supports this feature and that Firefox does not.
- prosody 3y agoI've always liked the visual effect of the East Asian typographic rule that commas and periods at the end of a line hang. Makes the entire block of text look better aligned.[1] Probably matters more for text in those languages since the width of normal text characters doesn't vary as much as Latin text characters do. e. More to the specifics of its use in CSS, it looks like Safari doesn't support the attribute to aggressively follow that rule,[2] as in the bottom right example of the previously linked image. [1] https://www.thetype.com/wp-content/uploads/2017/11/AI-hangingSample.png https://www.thetype.com/wp-content/uploads/2017/11/AI-hangin... [2] https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-pun...
- tomcam 3y agoIt’s conversations like this that make this site such a pleasure to read. The original article plus the commentary here gave me a ton of context I wouldn’t have had any other way.
- esafak 3y agoI did not even know this was possible. So CSS has microtypography features after all!
- pxtail 3y agoI feel like CSS has grown too much and has too broad scope now - I didn't even know that properties like 'text-indent' and this punctuation one even exist and I'm doing web-development related work. The problem with CSS is that one cannot just learn and use new features because usually it's unsupported by at least on of major browsers for an indefinite amount of time - after few months/years it's easy to forget that something significant/important/useful could be possible to do with CSS - and of course in meantime more new features and properties are being added.
- omnimus 3y agoThere are people who deal with css and typography on web full time. Those people surely remember css rules that exist. It's fine, allow them do nice websites. Btw text-indent is not some crazy new css unused thing it's actually very old (like 20yo) essential type setting rule. It's from times where CSS was mostly occupied with text documents, floats and inline elements. If you look at the recent CSS additions It's all stuff concerned with responsive layouts and effects - very little to do with typography. It makes sense since web became app platform more than document platform.
- Macha 3y agotext-indent is a CSS1 property.
- k8svet 3y agoHuh. Both hanging and not hanging feel both right and wrong for their own kinda conflicting reasons. And til. Thanks op and author.
- chefandy 3y agoThere's no right answer— it depends on leading and tracking, type size, presence of drop caps, proximity to other elements such as pictures, other columns, or the edge of the page, etc etc etc. Just like everything else in graphic design, it's all about the way something hits in context. It's just one element of a whole.
- ttepasse 3y agoMatthew Butterick, of typography and Racket fame, used a neat and/or slightly insane CSS hack for hanging punctuation in his online booklets, leading me to a round of web-inspectoring some years back: He programmed his site builder to insert two elements at the site of the punctuation: <dquo-open-push></dquo-open-push> <dquo-open-pull> “That’s</dquo-open-pull> and styles them with this CSS: dquo-open-push { margin-right: 0.5em } dquo-open-pull { margin-left: -0.5em } E.g. the first elements pushes the following element further back, but the second element pulls itself back in that negative margin. The resulting effect is that in normal flow both the positive and negative margin of these cancel each other out, leading to quasi normal inline flow: text text text text PUSH↔PULL text text But if there is a line break between the elements the the push element pushes invisible into the right margin and the pull element pulls itself in the left margin, leading to hanging punctuation: text text text text text text PUSH→ ←PULL text text text text text text So the trick with negative margin not only works at the beginning of block elements but inside the inline flow without leading to a negative experience - e.g. it also works with unpredictable line lengths. An example is on this page: https://practicaltypography.com/are-two-spaces-better-than-one.html#the-role-of-research https://practicaltypography.com/are-two-spaces-better-than-o... I really like the going of the extra mile, although now with `hanging-punctuation` it is unnecessary. Note: Butterick programmed his own site builder - Pollen - and designs his own fonts - that makes such customisability more achievable, I assume. Not the biggest fan of using custom elements instead of span but modern HTML and web components makes this syntax valid.
- lwhi 3y agoCall me old fashioned, but contaminating the markup like this—for something that's aesthetic—is a no no.
- Retr0id 3y agoWhy is it a no no? My personal rule of thumb is that as long as Reader Mode can render it fine (which implies coherent semantics), then the markup can do whatever it likes.
- 3y ago
- thriftwy 3y agoLebedev's design bureau had hanging punctuation since 2005. https://www.artlebedev.com/mandership/120/ https://www.artlebedev.com/mandership/120/ Not submitting this one since it is light on technical details.
- hnlmorg 3y agoSpeaking as someone who is dyslexic, please don’t do this. It might look “prettier” (though even that is purely subjective) but it also creates a wall of text that is much harder to read.
- mattsan 3y agoYeah I found the example without the italic text much harder to read when it was aligned. When it was italic the quote was in view though
- bombela 3y agoI am slightly dyslexic and I actually find it pleasing. To me, the hanging quote acts like an anchor to my eyes instead of a wall of text.
- wruza 3y agoAs a non-dyslexic I prefer to read normal text without justification or hanging anything (apart from narrow columns of physical newspapers).
- chrismorgan 3y agoI’ve been tending towards the opinion that features like this are a bad idea: that we might be better served by a general “this is prose” signal that triggers things like Knuth-Plass line-breaking, partially-hung punctuation (not full, please not full, it’s awful), conservative hyphenation, maybe even spacing and stretching tweaks to reduce the need of hyphenation (like the CTAN microtype package provides), whatever else the user agent supports. Bundle it all up in an all/auto/none property that defaults to auto, and let browsers choose heuristics for normal content. (OK, so I wouldn’t limit it quite that hard, I’d make it a little more like font-variant, but I do believe the default should be heuristic-based rather than disabled.)
- globular-toast 3y agoI agree. On my e-reader I can choose to enable hanging punctuation. Why should a web developer be able to or be expected to make that choice for me?
- lwhi 3y agoA web developer shouldn't, but a designer should. Otherwise, why bother with design?
- marginalia_nu 3y agoHow would you distinguish between web design and development?
- lwhi 3y agoHow it's built vs what it looks like.
- marginalia_nu 3y agoThat's arguably a very limited view of design. Design is far more than aesthetics.
- benatkin 3y ago> The hanging-punctuation property in CSS is almost a no-brainer For me it's a brainier. Neither is better or worse, it's just different. I prefer having hanging-punctuation off by default because the text fits into its container, but if I was making something fancy for some reason I might turn it on.
- zestyping 3y agoHanging punctuation looks sloppy. It's not worth it.
- lwhi 3y agoThe magic number version is completely unaligned for me. It could be a nice property; but it isn't ready for primetime yet.
- 8organicbits 3y agoWhich browser/OS?
- lwhi 3y agoFirefox on Android
- Groxx 3y agoSame browser, and same result (probably). The left negative margin on the first line is too large, the initial "i" is too far to the left and overhangs the line. O.45em vs other sizes probably depends a lot on font/rendering/minor details that the website may not be able to control.
- petters 3y ago> Here’s a demo: Does not work in mobile Safari. It hides the quotation mark
- weinzierl 3y agoI am a typography nerd, so naturally I love this. I also think it would be most useful with text set in full justification, where you have your text in a nice rectangle and punctuation sticking out destroys the aesthetics. If full justification is helpful in general is another question but it certainly is out of fashion now. If full justification is possible at all with the currently used browser rendering pipelines is yet another interesting questions. Intuitively I would have assumed so, but I remember past discussions here on HN that convinced me that this is not easy at all. EDIT: I liked the HN thread I was referring to below. I think good full justification needs Knuth-Plass but don't know enough to be sure. https://news.ycombinator.com/item?id=19473101 https://news.ycombinator.com/item?id=19473101
- chrishill89 3y agoI’ve started using a sort of hanging quotation style for block quotes in commit messages. From commit 3927bbe9a4: “ This matches the behavior of COMMIT_EDITMSG, which stays around in case of error. Two spaces, one quote character, one space, then the quote on that indentation. This might look a bit off with a proportional font. Linus Torvalds[1] uses a kind of hanging quote for his merged pull requests. But it looks a bit too subtle since the quotation character hugs the first character. [1] https://github.com/torvalds/linux/commit/5b2b1173a93fa056b4539ef52e5f03148345d498 https://github.com/torvalds/linux/commit/5b2b1173a93fa056b45...
- bmacho 3y agoThe first picture both look ugly to me. I don't like rows starting with ", not italic. On the second picture, with italic: https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/11/F5ceRFeaAAAgybW.jpg https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/11... the left one, thank you.
- amadeuspagel 3y agoHanging punctuation breaks web conventions, where every element has margin and padding, to make websites look like print. It looks terrible.
- wruza 3y agoBecause the punctuation hangs off the edge, if you don’t have any available space, it can trigger a horizontal scroll bar, which sucks Awesome" CSS model on top of a regular (quite limiting) box model in action. Now if you want to have a specific padding, you have to calculate how much space that quote took and subtract it from it. CSS is full of bs like that. Feels like it was taken for its first principles. I don't get how people praise it. Maybe they don't work with it often and only build chains of paragraphs with bells and whistles, while frameworks do all the heavy lifting and conceal learning cliffs. Before receving arguments on Complexity and Layouts and Variety, I'd like to test HN. Please solve this easy puzzle and explain why your solution is logical, intuitive or sane: You encounter the following html+css code in a mudball of a frontend. <div class="parent"> <div class="header">Dynamic-height header</div> <div class="rest">...many divs...</div> </div> .parent { width: 20vw; height: 100vh; } .header { } .rest { } Make .rest vertically (i.e. up and down) scrollable without the help of the internet and without checking your solution or comparing to others before posting. Just post what you think should work and (very optionally) your YOE in CSS/Web. Also feel free to ignore it. Upvoted solutions will receive score. Good luck!
- ioulian 3y agoMaybe I'm missing something about your question, but: ``` .parent {display: flex; flex-direction: column;} .rest {flex-grow: 1; overflow-y: auto;} ```
- wruza 3y agoIt works! Congrats, you did it! But after clicking around you realize that it does not anymore. Waaat? Maybe it's related to sidebar visibility changes? You open the inspector and see that .parent is {display:block}. Seems like some jQuery code assumed that display property is either `block` or `none`. Or something. Aaargh. The "sane" attribute of this solution was violated due to its non-locality to the `.rest`. Who could think that changing the display mode for the parent, which is indeed a private property of the parent, would lead to such an issue. You live and you learn css! (Also, explanations for "intuitive" and/or "logical" are still missing.)
- ryanbrunner 3y agoIt's understandable given its history but sort of wild how robust the support is for text / document formatting in HTML, compared to the much better than it used to be but still fairly anemic layout support.
- adaboese 3y agoI would never notice this. Seems such an edge case that it would only pollute the namespace of properties. There are already so many properties to learn, and something that you will use once in your lifetime does not belong in the language itself.
- Pxtl 3y agoMaybe it's just because I'm so used to text not doing this (or at least failing to notice it except in rare cases like big magazine insets where it stands out), but I actually kind of hate it for normal paragraph text? It just looks weird and wrong to shove the quote-marks right out of the normal flow of paragraph text to me.
- culi 3y agoNote: not supported in any major browser currently. Except for Safari which has partial support https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-pun...
- enathan 3y agoGood to see CSS getting some of the granular type controls that have existed in Photoshop/Illustrator/Figma since the beginning.
- deleted 3y ago[deleted]
- DangitBobby 3y agoThe existence of this property kind of dances around the real problem. The quotes should be omitted entirely because in a block quote you already know where the quotation begins and ends, additional punctuation adds no value, only noise. We wouldn't be trying to hang the leading quote off the side to get it out of the way (because it conveys information we already have and thus only gets in the way) if we just excluded it altogether.