MikeFitz with overflow bit set…

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

• Optimal Web Design: How should text be presented within a website? and
• Usability News Vol 4 Issue 2 2002: The Effects of Line Length on Children and Adults’ Online Reading Performance.

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.

This entry was posted on Monday, May 1st, 2006 at 3:02 and is filed under Software Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.