Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS3 Tidbit: hanging-punctuation

DZone's Guide to

CSS3 Tidbit: hanging-punctuation

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

As a programmer, you care a lot about punctuation (even you Pythonistas, if less so). Good chance you also care a bit about indentation (well, especially if you code Python). So consider this quotation block:

"Eggplant is the best kind of vegetable, even though asparagus tastes better roasted. Nothing is better than pepper, however, when brightness of flavor is desired: but take care never to overcook your peppers, or the crisp pop will dissolve into a floppy, cellulose-blasted mess."


Pay careful heed to the text alignment, and you may notice: 'Eggplant' is indented one quotation-mark-width farther to the right than the first word on the line below.

Looks acceptable, but not perfect. Quotation marks set aside a bit of text; if this were a program, it would look better like this:

"Eggplant is the best kind of vegetable, 
  even though asparagus tastes better roasted.
 Nothing is better than pepper, however, when brightness of flavor is desired: 
  but take care never to overcook your peppers, or the crisp pop will dissolve 
   into a floppy, cellulose-blasted mess."

Quotation marks, in short, demarcate blocks; and blocks look better indented.

And CSS lets you do this, in two ways.

  • First, the hack: create a negative indent, ~0.5em, for the first line of <blockquote> text. Like this, as Mark Newhouse says. Disadvantage? First, it's a hack, and all hacks are just placeholders for a non-hack; and, second, not all fonts use 0.5em-width quotation marks. So it won't work perfectly.
  • Second, the CSS3 standard -- though it's not implemented in any major browser yet!: use the hanging-punctuation property, as W3C explains. Slick, but useless for today's web; but perhaps will be useful in the future.


Keith Dawson points out that the hanging-punctuation property could get quite a bit more useful if it supported many more block-delineating characters -- for pure typographic reasons, Keith supposes, but I'm thinking that hanging-punctuation might work nicely as the rudiment of a native CSS code-formatting system.

Whether or not the standard grows cooler (in content) and/or hotter (in browser implementation), these techniques, even as they stand right now, could slickify your blockquotes nicely.

 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}