How Twitter Got Its Line Breaks
Published 11 years, 8 months pastIn 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.
Comments (5)
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.
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.
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.
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
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.