Twitter and Linebreaks

by @edent | # # # # # # # | 6 comments | Read ~28,253 times.

As any student of computer science knows, line breaks are confusing. There are styles of line breaks unique to Unix, Mac and Windows – so what should a web renderer do when faced with a newline command? In HTML, it’s simple, they should be ignored. But what when it is user generated text, not HTML?

This was a problem I faced when trying to get Dabr to render the ASCII* art produced by Aral Balkan‘s Feathers App. Feathers uses line breaks to achieve images like…
〰❀❃ Introducing ❃❀〰
My new iPhone app,
░░░▒█ Feathers █▒░░░

What’s confusing to me, as a developer is the inconsistent way Twitter handles line breaks. For example…

Twitter’s website ignores line breaks.

Desktop Spacing

Desktop Spacing

Twitter Mobile, however, does line breaking correctly.

Android Spacing

Android Spacing

Twitter has no style guide for rendering and – if it did – appears to render inconsistently. So, what’s the correct thing to do?

In my opinion, respect the user. If a user has indicted that they want something, it is a developer’s role to implement it (unless it causes severe problems for the system).

How to achieve it?

You could use all sorts of complex regular expressions to get line breaks and convert them.
Thankfully, PHP has this function built in with nl2br() which will give you (X)HTML line breaks wherever a break occurs in the text.


*Technically, Unicode Art. But that doesn’t have the same ring to it.

6 thoughts on “Twitter and Linebreaks

  1. Great article, Terence (and thank-you for the shout out to Feathers). I would love to see Twitter implement consistent rendering of line-breaks.

  2. My rule is to always do what the regular (non-mobile) website does, unless I can’t. Accordingly, I normalize newlines to spaces.

    1. What do you mean by, “normalize newlines to spaces” ?

    2. I would normally agree with you, but Dabr is a mobile site. Therefore, I follow what the mobile site does.
      Regardless of that, if a user has added a linebreak (or any other character) I tend to respect that.

  3. How can I put a line break / carriage return in the Twitter Bio?

    I want to see:

    Line one.
    Line two.
    Line three.

    Line one. Line two. Line three.

    1. Hi Tom,
      I don’t think there’s any way you can at present. Even if you could, not all Twitter clients will render your bio as you’d want. Sorry.

Leave a Reply

Your email address will not be published. Required fields are marked *