Topic Archive: blog

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.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (3)

agile ajax