Stop < pre > Text Overruns

Here’s the problem: when you write your own HTML or you use a content management system like WordPress (using the HTML editor) and you want to showcase HTML code or any other code within a post then you have to do two things:

use Character Entities to represent the less than (<), greater than (>), forward-slash (/), back-slash (\) and ampersand (&) characters so that the represented characters are displayed rather than used to designate code tags; and

use the <pre> and <code> tags to instruct web browsers to display characters within their opening and closing tags in a monospace font i.e a font where each character has an equal width.

Character Entities

These are code representations of the different characters commonly available for display by computers. Some examples are:

A more complete list of character entities can be found here.

When a character entity is used within code, browsers display the character it represents rather than interpret the character as being part of a code tag. Here is an example of how HTML div opening and closing tags look when described using character entities:

<div></div> becomes &lt;div&gt;&lt;&#47;div&gt;

As you might imagine, it could take a long time to transcribe a full example of HTML code into its character entity equivalent.

Tip: Write your code in a text editor then use Find and Replace to replace characters with their character entity equivalents.

The <pre> and <code> Tags

These tags instruct browsers to display any characters within them in monospace font which facilitates layout creation and helps differentiate code from non-code.

There are two main differences between pre and code tags:

1. the pre tag takes its name from preformatted. Just as it sounds, it means that the characters within pre tags have been organised (layed out) exactly as the author wants them displayed; consequently, any characters within pre tags display exactly as written and retain their spacing (i.e whitespace or characters not displayed by browsers), line continuation and carriage return details. Characters within opening and closing code tags do not retain multiple spaces between characters e.g two spaces between two consecutive characters are merged to form a single space, and carriage returns are auto-inserted to prevent container and page overruns where text displays outside of its intended display area;
2. The pre tag is a bock element which means it displays within its own horizontal section and noting else can be displayed next to it within the same container; whereas the code tag is an inline element which does display in line with other elements i.e it does not require its own line.

When using the pre tags its important to either manually add line breaks into the code to be displayed or to attach styling information to the pre tag element to force it to wrap the characters within it so that they remain within the display boundaries of the pre tags container.

To manually place line breaks, use the <br /> tag wherever you want a new line to begin (do not transcribe the less than (<), greater than (>) and forward slash (/) characters to their character entity equivalents). To have the characters automatically wrap round to new lines, add the following style information to your css:

pre {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
white-space: -khtml-pre-wrap; /* Safari, not working --  maybe on Konqueror khtml */
color : #000000;
width: 99%;
font-size: 14px;
}

WordPress Code Overrun

It’s not unusual for WordPress template creators to forget to correctly format the pre tag to prevent text overruns whenever long lines of code are inserted into WordPress posts. Although the pre tag style information written above isn’t w3c css compliant (at least, it wasn’t when I last checked), it does prevent long text lines within code from overrunning a template’s post display area. So, if you want your code examples to display within your template, insert it into your templates style.css file.

Sharing is caring!