Strict Standards: Redefining already defined constructor for class wpdb in /home/bri58020/public_html/mike/wp-includes/wp-db.php on line 52

Deprecated: Assigning the return value of new by reference is deprecated in /home/bri58020/public_html/mike/wp-includes/cache.php on line 36

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/bri58020/public_html/mike/wp-includes/cache.php on line 389

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 537

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 537

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 537

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 537

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 556

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 653

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 653

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 653

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 653

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el($output) in /home/bri58020/public_html/mike/wp-includes/classes.php on line 678

Deprecated: Assigning the return value of new by reference is deprecated in /home/bri58020/public_html/mike/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/bri58020/public_html/mike/wp-includes/theme.php on line 508
Display code in fixed-width blogs without line wrapping « MikeFitz with overflow bit set…

Display code in fixed-width blogs without line wrapping

Mon 1 May 2006

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 81

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:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    Thanks,this really works.

  2. MikeFitz Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    Hi Manas, Happy to help.

  3. Daniel Williams Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    here is a helpful encoder site (there are many)

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

  4. annie Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    Great post. I will use some of your tips!

  5. MikeFitz Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    Thanks, Annie.

    I see my tips would be in erudite company!

  6. Ken Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

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

  7. wordpress theme me! Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    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:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

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

  9. MikeFitz Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    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:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

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

  11. Harley Pebley Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    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:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    For help how to display HTML code in blog see here

  13. MikeFitz Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    Thanks for the tip, Mark.

  14. Ishan Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/bri58020/public_html/mike/wp-includes/formatting.php on line 74

    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.