Over a million developers have joined DZone.

CSS3 Tidbit: hanging-punctuation

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

 

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

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

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

{{ parent.tldr }}

{{ parent.urlSource.name }}