Give Me a <BReak

I’m just wrapping up putting together a portfolio site for a wonderful designer I know, John Malmquist of Malmquist Design. John specializes in identity, branding, packaging, and signage. Basically, John is a print guy. He thinks in inches, not pixels. And he’s looking for that kind of control over every detail of his site.

Now, don’t get me wrong … I understand and even admire John’s attention to detail and desire for fine control. I get it. I really do. But when he asked that every line of copy break at just such a place, I wasn’t sure how to handle it.

Give Me A Break

First thing I considered, of course, was the use of <br> tags at the end of each line of copy. But, you know me, I just couldn’t live with it. Those breaks have nothing to do semantically with the paragraph they are in!

Give Me Paragraphs

Next I considered putting each line in it’s own paragraph and just styling the paragraphs not to have any margin. But, especially when I saw that many lines broke in the middle of sentences, this was even less semantic than using <br> tags.

Give Me Body IDs

Next thought was to use the unique body id on all pages to feed a different width to the content div that would force the breaks where John wanted them. This way I could keep the XHTML semantic. However, not only did I quickly discover that this would be time-consuming to get it right, I realized in many cases you couldn’t even get it right.

Give Me Spans

Ah, my old friend the span to the rescue. If I just wrap each line in a span tag:

<p>
A restaurant located in the frenzied Union Square shopping district of San Francisco.
Rumpus maintains the highest culinary standards while presenting a fun and whimsical atmosphere.
The logo aims to convey the warmth and polite irreverence of the owners&#8217; personalities.
</p>

And then in my style sheet say:

#content span {
whitespace:nowrap;
}

Then the desired effect is achieved. Of course, I realize this introduces additional markup, but all in all it seemed to be the best method. It is easy to alter if John changes his mind about where a break should go, it does not affect the line-lengths of unstyled documents, and it keeps everything pretty semantic.

If anyone has a better on how to achieve this idea I’d love to hear it.

This entry was posted on Tuesday, February 7th, 2006 at 1:17 pm and is filed under Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

5 Responses to “Give Me a <BReak”

  • John Says:
    February 8th, 2006 at 3:01 pm

    Wow! I really am unsuited for web design. Are you telling me that breaking a line of copy is not just a matter of inserting a “return”? Unbelievable.

    Also, as a Control Freak, I need to point out that it’s “Malmquist Design” (not “Malmquist Designs”).

    …can’t wait.

    John

  • Sheriar Designs Says:
    February 9th, 2006 at 11:36 am

    John: Hehe … it is a relatively simple thing to insert a break tag (<br>) to force a line break. However, I try always to aim for writing semantic code, which means using html elements for their given purpose, not for presentation. The breaks that you wanted were presentational only, as opposed to breaks in an address. One reason this is not a great idea is that blind users will have each line break read out to them by their screen readers, thus breaking the flow of the sentences.

    I know this probably sounds incredibly anal – but you can appreciate that, right? ;o)

    Perhaps it is a bit “silly” in this case, but it is part of my job and also my passion to work towards continuously improving my ability to create accessible websites and I don’t like to compromise that even for something small like this. Best practices are best practices.

    As a final note, I’ll add that semantic, accessible code benefits not only blind users, but also browsers without style sheets, text browsers, PDAs, search engines, etc.

    (ps – fixed your name – sorry!)

  • Andrew Berkowitz Says:
    February 9th, 2006 at 12:44 pm

    Just to add another layer to this, if I were doing it I would probably put the text in the physical .html file with hard returns and then as the pages were served up use a server-side script (PHP or whatever) to add in the tags. That way you get the advantage of the semantic code but much more manageable if you want to add/change/delete text.

    In other words
    I would write the text
    just like this
    in the HTML file

    But it would be magically get the tags added when served to the browser.

  • Sheriar Designs Says:
    February 9th, 2006 at 12:49 pm

    Andrew: Very cool idea (even though totally beyond my simple scripting capabilities) but the tags being there, in the browser, is exactly the problem I was trying to avoid!

  • David Hucklesby Says:
    February 9th, 2006 at 2:26 pm

    John: Unless you have a particular audience in mind, I’d say you have set Mani a near impossible task. In short, the web is not print. In long, consider these facts:

    - Computer manufacturers can, and do, ship computers set to different dpi settings

    - Computer owners can, and do, change various settings that control text size

    - Not all computers have the font faces installed that the designer specifies

    - Devices with small screens will probably display shorter lines than a desktop PC

    - Except for the Opera browser, background images do not change size along with text size

    Even if you narrowly define a computer as a PC running Windows XP, all the above variations apply. It’s a bit like everyone having their own automated printer, but each printer has different font faces. Would you expect the line breaks to appear the same place everywhere?