Formatting quoted code in blog posts: CSS2.1 white-space: pre-wrap

Brian Dillard, Wednesday, May 28, 2008 @ 4:12 pm

When migrating our blog posts from TypePad to WordPress, chunks of code presented the biggest problem. There was a lot of variation in how individual authors had marked up their code samples. Then there was the junk markup TypePad had inserted, of its own accord, inside <pre> and <blockquote> elements. In the end, I had get my hands dirty inside individual posts in WordPress. For future posts, however, we'll be standardizing our markup patterns and using CSS to style code quotes consistently. We're still working the kinks out of our stylesheets, so please bear with us when reading older posts.

In the meantime, I stumbled upon an informative post by Lim Chee Aun that offers a one-size-fits-all solution for implementing the CSS 2.1 "white-space: pre-wrap" declaration in today's user-agents. If you're not familiar with "white-sace: pre-wrap," it's a way to honor whitespace and line breaks within preformatted text, yet still allow individual lines to wrap when they reach the edge of their enclosing container. In short, it provides the browser equivalent of the "soft wrap text" option in your favorite IDE or text editor - which in many cases looks better than using "overflow: auto" to create an internal scrollbar on the container.

Aun's solution is based on the stylesheet from Hixie's Natural Log by Ian Hixie. Unsurprisingly, given the major browser vendors' slow march toward CSS 2.1, Hixie's solution uses any number of browser-specific, non-standard CSS rules. Still, it seems to work well across today's modern browsers. I plan to implement it on our blogs in the near future. The code, with apologies to Hixie, looks something like this:

pre {
	white-space: pre; /* CSS2 */
	white-space: -moz-pre-wrap; /* Mozilla, but let's make this comment really, really, really, really, really, really long to prove our point*/
	white-space: -hp-pre-wrap; /* HP printers */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

See how annoying the horizontal scrollbar is? (If you're viewing this from a feed reader, you'll need to open this page in a browser.) Now check out the same code quote, but with our new CSS applied:

pre {
	white-space: pre; /* CSS2 */
	white-space: -moz-pre-wrap; /* Mozilla, but let's make this comment really, really, really, really, really, really long to prove our point*/
	white-space: -hp-pre-wrap; /* HP printers */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

Much better, no?

agile ajax

Comments: 2 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Yes! Much better. This makes the PRE tag twice as useful, thanks for sharing

   Comment by Eran Galperin, Wednesday, May 28, 2008 @ 5:58 pm

2. 

   Nice. I’ve been struggling to come up with a good way to handle code on my site (to the point of avoiding posting any new stuff until I get it worked out), so this is key.

   Comment by Aaron, Friday, May 30, 2008 @ 1:28 pm

Leave a comment