Creating a Harvard Rule with CSS

Having grown up with pica sheets and crop slides with wax pencils, I come from a world of print design effectively dead with the advent of QuarkXPress, Pagemaker and InDesign. I still remember learning the rule types in high school yearbook design sessions and in some cases, I’ve recently implemented what’s known as a Harvard Rule line in a design.

What is a Harvard Rule? The old yearbook publisher I worked with defines it nicely:

A standard rule line is any printed line that is less than two picas wide. These rule lines can also add variety to your page. Common rule line weights are one, two, three, six, nine and twelve points. Rule lines are intended to unite design elements, not separate them. A Harvard rule line is two parallel lines, with one line wider than the other. Standard widths are one, three, six, nine and 12 points. When used as a border, the thin line is usually inside.

First off let’s get these terms right. A pica is 12 points. There are 72 points in a printed inch. (Sorry Windows users, someone back in the day thought 96px to an inch was better than 72. Apple is 72px/inch.) There are, therefore, 6 picas in an inch.

I didn’t want to use an image to do this, and wanted to accomplish it with html and css. Luckily, there’s an HTML element called “HR” that is a horizontal rule. These, in their basic implementation, are plain and simple ugly:


but some CSS can make it pretty:


That’s not nice to use. So with some HTML and CSS hackery, we can get something that looks a lot nicer. In your HTML, you first want to call the rule:

<pre> <hr size="0" noshade /> </pre>

Since it’s XHTML we’re using here, this is a self-closing element. The CSS for this isn’t too complex. We need to define the base colors to hide the original element. We then need to apply borders to finish the magic. You can alter the margins to space it out from other elements.

<pre> hr { /* Faking a Harvard Rule */ color: #fff; background-color: #fff; height: 2px; /* this is teh white space between the lines */ border: 0; /* this removes left and right borders */ border-top: 4px solid #aaa; border-bottom: 1px solid #aaa; } </pre>

With that in place, we can give these unique styles and flip the lines as needed.



You can also accomplish a double rule this way:


These are all being used in the forthcoming MacRuby redesign.

Enjoy!

  1. chris says:

    That's neat and insanely simple.

  2. Princess says:

    hey beautiful blog site and web theme. I hope I'm not aynoning you I just wanted to inquire precisely what wordpress plugin you utilize to show the most recent comments on your blog? I really want to do something along the same lines for my free iphone 4 website but I cant acquire the plugin or widget for it. Thank you for your time :)

Post a comment

Name or OpenID (required)


(lesstile enabled - surround code blocks with ---)