inquiline weblog

CSS Alternative to Lorem Ipsum

Picked from the daily links for light reading published by Australia's WSG was this charming little article on the unspoken rules of graphic design. The first quote below made me laugh out loud:

"17. If you ask for more copy it will be sent as a .jpg. If you ask for images they will send powerpoint presentations."

Oh how true! (Chuckles to himself...). The second one made me think for a second. Not just because it was another choice quip, but because it gave me a spark of inspiration:

"35. Clients who do not provide content upfront will complain about the use of Lorem Ipsum."

By nature of familiarity, I often design in HTML. It's probably not a good habit, but I have a hard time separating my thoughts about how I would do something from what I would do in the first place. If my end product is going to be an HTML document or template, then the sooner I start, closer I am to the finished product.

Lorem Ipsum is that text you put into the space reserved in a template for text. You don't have the actual copy, but you need something to see how text will look and operate on the page. It's part of the process of determining readability and correct document flow and other esoterics of being a front end architect.

The joke is a good one, however, because I'm not the only person to have been faced with a colleague noting in their most concerned tone, "I entered a bug report today because there's Spanish text on the new page design." The first time it happened I took about 20 seconds to figure out what they were talking about. Then I smacked my forehead thinking, "if they're going to be an idiot, at least get the right language - it's supposed to look Latin!"

So what's a coder to do? Your options are limited, but are improving steadily.

• Write all the copy yourself
• Leave the Lorem Ipsum in place and get a sore forehead
• Educate the unwashed masses about the practices of 16th century typesetters
• or maybe there's another option...

CSS to the rescue.

Enter cheesy template example. I know you'd rather be caught dead than build a table-based layout (I nabbed this one from Dreamweaver, no less) but in this case, the example serves us well because even the DW one comes with Ipsum by default.

Your basic template comes up looking like this:

Disadvantages

Confusing presence of Lorem Ipsum and other "Spanish" text all over the page.

What if it instead came up looking like this? Notice how the lines of text in the paragraphs are gray bars instead of text?

Advantages

Keep using Lorem Ipsum in the template

You can still see where body text is going to appear

Flow of text is maintained

The technique.

It's super simple. Build your template with Lorem Ipsum - you have your reasons. Apply two selectors to the page, then mark the paragraphs containing the mischievous text and you're set. The basis of the fix is color - we're going to wash out the contrast of the text in a background.

p.ipsum {
color: #CCC;
font-size: 9px;
line-height: 18px;
}

The font-size and line-height properties preserve the illusion of a line of text, complete with space above and below each line, and irregular line lengths (for justified text). Apply the above class to all paragraphs which contain your placeholder text.

Next, we'll have to do a tiny bit of dirty work. We need to style the background of the lettered lines with the same color as the foreground text. Two steps this time. Add the following style declaration:

p.ipsum span {
background-color:#CCC;
}

Then go into each paragraph and wrap the inner contents with a span element like so:

<p class="ipsum"><span>Lorem ipsum dolor sit amet,
... no sea takimata sanctus est Lorem ipsum dolor
sit amet.</span></p>

Span elements have the benefit of rendering "inline" by default, which means that they only take up the space in a line of text, and thus are dependent on the line-height of their parent element in this case for their dimensions. The result is akin to the "placeholder image" styling found in that same Dreamweaver template.

Conclusion

Yes, it's messy and requires cleanup, but so is the entire integration of your template with a larger application. If the worst code-bloat that your site commits is a few extra span elements inside the fewer and further between actual paragraphs of text, then consider yourself ahead of the game. It's not particularly standards-based, or compliant or accessible. More importantly, it
is a simple solution to a common problem, and it doesn't require eight pages of javascript to implement. It will save you from getting hoarse from repeating "that's placeholder text" over and over.

DOM caveat: There's probably a way to use Javascript to access the child node representing the text component of the paragraph and apply a style from there, avoiding the necessity of adding the span element inside the paragraph, but I didn't feel up to tackling that possibility this morning. The simple CSS seemed more attractive at the time.

Bonus! To other coders and template builders...

Do yourself a favor, and don't let placeholder text run (ruin?) your life by letting too much of it creep into your application. If there's a heading needed, write one. If a link needs some copy, make it. If you don't know what the page will be called, guess. It can be changed later - the web is malleable. Writing it up front can relieve your overworked editor/copywriter from the task, and can add clarity to the page/application/template earlier in the process. You could be credited with that clarity. Of course, you could hide behind the flimsy shield of "it's not my responsibility," but that's rather cowardly. (I'll make allowances for smoothly operating organizations where everyone knows exactly what they're role is and you've all worked together for 10 years and everyone gets along and projects come off like clockwork. But that's it. No other allowances.)

Case in point: image "alt" attributes. Nearly no one else but HTML and accessibility experts are emphatic about the use of "alt text" on images. The result of this fact is that specifications for that text rarely (if ever) make it into the requirements documentation. So who writes the copy for the "alt text"? Of course you do. If you are capable enough to write the alt text, it shows you understand enough about the page, it's structure and the architecture of the site to write some simple descriptions where they're called for.

Believe me. Those early decisions make it into the application way more often than you realize. Save yourself the hassle of an 11th hour emergency meeting to address unformed copy on some random (but critical) page of your site.

posted by Brian @ 9:01 AM