Sickdesigner.com

The work & fun of web designer Radu Chelariu.

Menu

Experiments, ideas & things done just for the fun of it

Contact me

Feel free to get in touch with me if you want to hire me (design work, speaking engagements, guest posting), interviews, if you have a problem with either Photoshop, HTML, CSS or Wordpress, or if you just want to talk about design. I'm also available on Twitter, Facebook or Google+, if that's more your game.

But, for the love of all that is Bauhaus, please do not contact me if you're selling something or about link exchanges and that kind of stuff. I will not reply to these requests.

Breaking the line break

Usually line breaks are thought of as this big bad wolf and you should avoid using them as much as possible. And generally, I agree, but somehow they keep popping up now and again so here’s a little trick you may not have thought of doing : styling line breaks!

As I was coding the new Sickdesigner.com (you did notice, didn’t you?) I, eventually, came upon the comments section. Specifically the comments itself and one thing I noticed WordPress does is it keeps line breaks as users hit Enter in their comments. Not a problem.

But, of course there’s a but, most users don’t double Enter for a new paragraph, although if they would, WordPress is so kind as to separate <p> from <p>. So, now I have a problem: user comments look like the blurb of a 12 year old One Direction fan to another 12 year old Justin Bieber fan instead of the elegant, intelectual replies of my peers.

The jist

Cmd+C / Cmd+V the very code I used to get user comments properly spaced out and easy to read:

1
2
3
4
5
6
#comments li p br{ 
    clear: both;
    content: '';
    display: block;
    margin: 0 0 10px 0;
    width: 100%; }

Before you start flaming about what the heck is with that extra code in there, here are some of the issues which lead to this kind of an approach:

  • without a content property, you can do pretty much fuck all with your line breaks; nothing works
  • if you don’t clear it, in most cases, it will just behave like an inline-block
  • which is also why it needs to be a block level element
  • height and paddings don’t work; used margin instead, courtesy of Zoran Jambor

So, a bit of creative thinking and I didn’t have to go about tinkering with WordPress’ comments engine, of which’s logic I know nothing about, mostly because I couldn’t write proper PHP if my life depended on it.

Cheers, all!

Update

The good Zoran Jambor discovered a bug wherein Firefox was disregarding the height property, but margins were working. My initial tests were flawed in seeing margins not working in Chrome for reasons yet unknown. Post updated to reflect new information. Thanks, Zoran!

5 Comments so far

  1. Andre says:

    Let’s see these line breaks in action:
    break
    break
    break
    break

    Double break = paragraph?
    break
    break
    break
    break

  2. Zoran Jambor says:

    I’ve been playing with this code for a bit now.
    It appears that this isn’t working on Firefox (Windows edition). Height has no effect on br elements, but strangely enough, margin works as it should.
    In Chrome, Opera and Safari (also Windows editions) both height and margin work as expected.
    You’ve tested this on mac, right?

    • Good catch, buddy! Yeah, I’m on a Mac, but it makes no difference, Firefox disregards height on <br> and <hr> no matter the platform. This has been a known bug since 2005, apparently. Post’s been updated to reflect the new intel, by the way. Thanks!

  3. Zoran Jambor says:

    Nice. I thought that line breaks might be behaving differently on Mac (which would be strange, of course).
    Glad I was of help.

Speak your mind