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

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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.

 

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

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 }}