meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

How Twitter Got Its Line Breaks

In the past day or so, Twitter started “supporting line breaks”.  This is something lots of third-party clients had been doing for a while, and heck, even Facebook does it.  In fact, if you had a tweet with linebreaks get auto-posted to Facebook by the Twitter-to-Facebook tool that Twitter provides, the linebreaks would show up there even though they didn’t on Twitter itself.  Until recently.

So how did they do it?  With CSS.  Here it is:

.tweet-display-linebreaks .tweet .js-tweet-text{
	white-space:pre-wrap
}

That’s it.  I’m not going to comment on their selector construction, except in the meta sense that I just did, but that single rule is all it took.

Well, not quite all.  The other thing they’ve done is to trim off any leading or trailing whitespace, and make sure the tweet’s content is right up against the opening and closing tags of the element.  It looks like so:

<p class="js-tweet-text">Y’all ready for this?</p>

When I input that tweet, it was like this, extra linefeeds and all:




Y’all ready for this?



So why do they trim off the edges?  Because if they left any whitespace between the tags and the content, pre-wrap would honor it.  This would happen even if Twitter, and not the author, was the source of the linefeeds between tags and content.  So rather than just ensure the content was placed normally, without any extra space, they went the trim($tweet) route.  I’m sure there are ways to beat the trimming; I haven’t tried to find them.  And there may be perfectly good reasons why they went the trim() route.  Maybe someone from Twitter will drop by to fill us in.

I will also note that white-space: pre-wrap preserves spaces between characters, just like pre elements do.  That means that anyone who double-spaces after sentences will have that space show up in their tweets, for everyone else to see.  Just like with the line breaks, author intent is thus preserved.  Deal with it.

Five Responses»

    • #1
    • Comment
    • Thu 14 Mar 2013
    • 1730
    Mike D. wrote in to say...

    We are trimming so as to allow reasonable use of linefeeds (haikus, dramatic effect) without encouraging or allowing “whitespace abuse”. If you insert 100 linefeeds between two lines of text, you aren’t really honoring the spirit of 140. There’s actually a ton of debate and thought that went into this, and I think we landed in a good spot overall.

    • #2
    • Comment
    • Fri 15 Mar 2013
    • 0934
    Eric Meyer wrote in to say...

    Thanks for the insight, Mike! Please tell me that internally you refer to that as “the Merlin Mann filter”.

    I’m still curious as to why you strip off the leading and trailing whitespace, though. I might really want an extra line at the beginning or end (or both) for dramatic effect, and that wouldn’t seem to run afoul of the “no century of blankness” intent.

    • #3
    • Comment
    • Sun 17 Mar 2013
    • 1440
    Mike D. wrote in to say...

    Ha. We actually do call it the Merlin Mann filter. Well, not exactly that, but Merlin Mann is in the name.

    We consider pretty much all linefeed-induced whitespace to not really be in the “spirit of 140″. Each blank line is essentially eating up 50 characters worth of space, even though a CR is only counted as 1. We’ve decided to allow a max of one linefeed between text lines because many people use it in reasonable, non-gratuitous ways. But using it to pad your tweets just makes your tweets bigger (bad) for no positive effect.

    • #4
    • Comment
    • Thu 18 Apr 2013
    • 1331
    Wide Spacer wrote in to say...

    I’ll happily take credit for this change, since I’d requested it only a couple of months earlier:

    http://twitter.com/WideSpacer/status/287436588294758400

    WS

    • #5
    • Comment
    • Fri 31 May 2013
    • 1538
    Jesse Gardner wrote in to say...

    Honoring the double-space after the period? This gives me great joy. If I recall correctly, I think double-spacing after the period in Tweets was one of the first face-to-face conversations you and I ever had.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


March 2013
SMTWTFS
February April
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Sidestep

Feeds

Extras