Display code in fixed-width blogs without line wrapping

Mon 1 May 2006

Do you display code samples in your blog? Do long lines of code push your side-bar off the screen? Do your readers get spurious line breaks when they cut and paste your code?  Maybe this tip will help.

Liquid Layout

I have long been a great fan of “liquid layout”. That is, paragraphs of text expanding or contracting horizontally to fill the browser space available.

Posting code under these circumstances was no drama. Long lines would just wrap as necessary and readers could cut and paste without picking up any spurious line breaks.

11 words per line

However, web accessibility and usability expert Andy Fitzsimon tells me that adults prefer to read text displayed in columns with about 10 to 12 words per line. Apparently this is widely known in graphic design circles and is backed up by research from establishments like Software Usability Research Lab at Dept of Psychology, Wichita State University. See

This is why my blog, along with many other WordPress blogs, now uses a stylesheet which displays 10pt Verdana text in a column 450 pixels wide. For people who only blog in text, this works fine and this is all they need to know. But for developers…

The Problem

So now that we have a text column fixed at 450 pixels wide, what happens when we want to include some sample code which includes long lines which won’t fit within 450 pixels?

In my previous post Customise your BlogMap, I needed to display some HTML with quite long URLs; a fairly common occurrence for developers who blog.

What are our options?

  1. Use an extremely small font
    We might display a fragment of VB code like this…
    ‘initialise date time format (d-MMM for Charts, dd/mm/yy for reports)
    dtf = New CultureInfo(CultureInfo.CurrentCulture.LCID).DateTimeFormat
    If blnCharting Then
    dtf.ShortDatePattern = “d-MMM”
    Else

    Note that our indenting has been lost, readability is lowered and there is still a limit to the length of line which can be displayed this way.
  2. Introduce manual line breaks
    'initialise date time format (d-MMM for Charts,
    dd/mm/yy for reports)
    dtf = New CultureInfo(CultureInfo.CurrentCulture.
    LCID).DateTimeFormat
    If blnCharting Then
    dtf.ShortDatePattern = “d-MMM”
    Else

    The spurious line breaks could confuse readers (and compilers).
  3. Do Nothing
    'initialise date time format (d-MMM for Charts, dd/mm/yy for reports)
    dtf = New CultureInfo(CultureInfo.CurrentCulture.LCID).DateTimeFormat
    If blnCharting Then
    dtf.ShortDatePattern = “d-MMM”
    Else

    Poor handling of white space will lower readability. Further, if my styles weren’t defined correctly, the long line of code could push out into the sidebar area, forcing the sidebar to the bottom of the page. You’ll sometimes see this on other blogs.

Mark up code using the <pre> Tag

The best solution I have found to date is to use the <pre> (preformatted) tag and a code CSS class. For example, if I mark up the code like this…

<pre class="code"><code>
'initialise date time format (d-MMM for Charts, dd/mm/yy for reports)
dtf = New CultureInfo(CultureInfo.CurrentCulture.LCID).DateTimeFormat
If blnCharting Then
    dtf.ShortDatePattern = "d-MMM"
Else
</code></pre>

… then the reader sees this:

'initialise date time format (d-MMM for Charts, dd/mm/yy for reports)
dtf = New CultureInfo(CultureInfo.CurrentCulture.LCID).DateTimeFormat
If blnCharting Then
    dtf.ShortDatePattern = "d-MMM"
Else

The horizontal scroll-bar means that any line length can be accommodated.

The CSS

The corresponding CSS styles to achieve the above effect is…

pre.code {
  width: 100%;
  overflow: auto;
  /*overflow:-moz-scrollbars-horizontal;
  overflow-x:scroll;*/
  border: 1px dotted #281;
  border-left: none;
  background-color: #fff;
  padding-bottom: 16px;
  font-size: 1em;
  }

code {
  font: 1.1em 'Courier New', Courier, Fixed;
  }

The padding-bottom: 16px; is to avoid code being hidden behind the horizontal scroll-bar.

HTML Encoding

Note that we are still dealing with HTML within the <pre> tags. Our code must be HTMLEncoded, ie “&” becomes “&amp;”, “<” and “>” become “&lt;” and “&gt;” respectively.

For example, the small HTML snippet in my previous blog entry was marked-up thus:

<pre class="code"><code>
&lt;div&gt;
  &lt;script type="text/javascript"
    src="http://www.feedmap.net/blogmap/blogapi.ashx?method=blogmapbadge&amp;amp;feed=http://mike.brisgeek.com/feed/"&gt;
  &lt;/script&gt;
&lt;/div&gt;
</code></pre>

If anyone has any other techniques for displaying code in a fixed-width column, please let me know or leave a comment.

14 Responses to “Display code in fixed-width blogs without line wrapping”

  1. Manas Says:

    Thanks,this really works.

  2. MikeFitz Says:

    Hi Manas, Happy to help.

  3. Daniel Williams Says:

    here is a helpful encoder site (there are many)

    http://www.dan.co.jp/cases/javascript/encode_entities.html

  4. annie Says:

    Great post. I will use some of your tips!

  5. MikeFitz Says:

    Thanks, Annie.

    I see my tips would be in erudite company!

  6. Ken Says:

    Thanks for the tip! I just used it in my blog and it’s exactly what i wanted!

  7. wordpress theme me! Says:

    nice little scrolling fix. just one problem - i’m a coding newbie and this part:
    “Note that we are still dealing with HTML within the tags. Our code must be HTMLEncoded, ie “&” becomes “&”, “” become “<” and “>” respectively.”
    didn’t make sense to me. is there a way around it? or a list of what to change for any code?
    thanks!

  8. Rob Says:

    October 2008, your tips are still being learned from, thanks!

  9. MikeFitz Says:

    You’re welcome, Rob. It’s good to see some things stand the test of time. Now to test this in Chrome… :)

  10. Mer Says:

    Awesome, this is exactly what I was after. Thanks.

  11. Harley Pebley Says:

    Thanks for this post; it helped a lot.

    One thing I found, I had to add “word-wrap: normal;” to the pre.code’s style because something else in my CSS was causing it to wrap without the scroll bars.

    Cheers.

  12. Mark Says:

    For help how to display HTML code in blog see here

  13. MikeFitz Says:

    Thanks for the tip, Mark.

  14. Ishan Says:

    Thanks for this tip. The 10-12 word per line is a very useful knowledge.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.
"SEO"-type comments will be reported to Akismet as Spam.