This being a technology blog, with plenty of code samples being posted on a regular basis, it’s no surprise I give soem thought as to how that code is displayed. Personally I’ve gone for the old school, green on black text (using the excellent code font Consolas, where possible.) I like the way it looks.

function heckYeah() {
    check.it.out();
}

The one problem is with really long lines. Since I use a lot of real world examples and it’s code I’m caught between a desire to have one line of code=one line on the screen (easier to scan) and the readability issues that a scrolling text box creates.

You can see what I mean here:

		
<img src="http://static.crameronline.com/wp-content/uploads/2009/06/client-0-image-0.jpg" alt="client-0-image-0" title="client-0-image-0" width="470" height="266" class="alignnone" />

To help alleviate that concern, I added the following :hover rule, coupled with an extra class wide, to my existing code-sample class:

.code-sample.wide:hover {
	overflow-y:auto;
	width:1000px;
	position:relative;
	z-index:100;
}

What that does (you can seen it in action below) is, on :hover

• changes the width to 1000px. Which fits rather nicely on my existing layout.
• Changes the position to relative. With no x or y values set, this does nothing to the display of this element. Until it’s coupled with the explicit width above. At that point it blows it out of the flow and expands it into the right hand column.
• and I set the z-index, so that the sample will float on top of the right hand column

Check it out. mouse over the below sample:

		
<img src="http://static.crameronline.com/wp-content/uploads/2009/06/client-0-image-0.jpg" 
         alt="client-0-image-0" title="client-0-image-0" width="470" height="266" class="alignnone" />

Hopefully that will help with the readability of code samples. It’s still not perfect (the above is formatted by hand for better reading, in addition to the “wide” trick), but hopefully it will help on the majority of lines I’ll be posting.

It’s also a great example of a no-script way to add some “interactivity” to a page using the handy :hover pseudo class.