Post tweet with new line inside it

12,703

Solution 1

Twitter's website never displays the new lines in tweets, it just seems that way. Some clients do display the new lines, but Twitter does not. They simply display them as they would a space. They do leave the actual new line character in the tweet though.

The reason it seems like drawatweet is working is because of word wrap. It doesn't matter what characters or character set you use and it doesn't matter how many characters you use. If the next word in the tweet is too long to fit in the width of their paragraph, it will wrap. They have made "words" (string of characters with not spaces) out of block characters, but you can use any character you want.

To test this, replace their new lines with spaces. It still wraps. You can also add a space to the second line and you'll see the new line is not preserved, as the first part of the second line will now be on the first line. Replace the blocks with your own characters and it will work, too.

So the solution is to fake it, like they do, and make lines long enough to always wrap. If you're dealing with single "words", you can use the unicode no-break space (%C2%A0) to replace spaces where you don't want it to wrap. You can also pad short lines with this to make them long enough to wrap.

Demo: jsFiddle

<a href="https://twitter.com/intent/tweet?text=123456789012345678901234567890%0A123456789012345678901234567890%0A123456789012345678901234567890" target="_blank">long lines with \n - works!</a><br />
<a href="https://twitter.com/intent/tweet?text=123456789012345678901234567890%20123456789012345678901234567890%20123456789012345678901234567890" target="_blank">long lines with spaces instead of \n - works! (same as \n)</a><br />
<a href="https://twitter.com/intent/tweet?text=123456789012345678901234567890%0A12345678 9012345678901234567890%0A123456789012345678901234567890" target="_blank">long lines with \n - space in line - doesn't work</a><br />
<a href="https://twitter.com/intent/tweet?text=123456789012345678901234567890%0A12345678%C2%A09012345678901234567890 %0A123456789012345678901234567890" target="_blank">long lines with \n - no-break space (%C2%A0) in line - works!</a><br />
<a href="https://twitter.com/intent/tweet?text=12345678901234567890%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%0A12345678901234567890%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%0A12345678901234567890" target="_blank">short lines with \n - no-break space (%C2%A0) padding - works!</a><br />

Solution 2

Easiest way to do this is..

var msg = "This is a test message. \n is used for new line character.";
var twitterHref = "http://twitter.com/intent/tweet?text=" + escape(msg);

and then set it dynamically as href for your <a/>.

Share:
12,703
Admin
Author by

Admin

Updated on June 25, 2022

Comments

  • Admin
    Admin almost 2 years

    I know that twitter says that users should not use new lines inside tweets because it depends on the client if it are shown or not, but im coding an app that draws tweets into the twitter timeline aLa http://www.drawatweet.com . So its a must.

    The thing is that after i tried all the possible ways of doing this i cannot force the tweet to be split in multiple lines. I had revised how they post it, and sending the exact same "newline" code it doest not show as drawatweet.com does.

    I have tried using the twitter api and the twitter intent tweet page without success.

    Another example its http://www.preservatweets.com/ that use multiple lines for showing a message, and, again, i use the same mechanism but my new lines dont work.

    I came to think that Twitter has some arrange with this "apps" and that its being check by the referrer. I know that this sounds crazy, but i cannot find another logical answer. Does somebody knows how it work?

    UPDATE

    There its no possible way to use new lines in twitter. What i have todo is to generate really large strings (without spaces inside) and the new line (or space), will force a new line if both strings are unsplittable.

    Thanks in advance gonzalo

  • Admin
    Admin about 11 years
    thanks! but the thing is that in the twitter textarea the newline appears, but after tweeting it they dissapear. I know this is "normal behavior" in the twitter timeline but the apps that i'd mention before somehow they avoid that.
  • ThinkingStiff
    ThinkingStiff about 11 years
    @user839645 I see that now. That is curious. Are you using the API to post or the URL?
  • Admin
    Admin about 11 years
    I tried both. The thing its really strange. I finally found "some logic" (being very permissive with the term ha). When using utf8 chars with multiple bytes, using more than 22 columns (with one character being a column) the new line its respected. If the characters are more narrow (because of the Helvetica font that twitter uses) sometimes the 22 columns are thinner and again, the new line dissapear. I dont know if this is an issue of browser rendering, of utf8 chars, or whatever could be. So, conclusion, dont use new lines in twitter, you'll go crazy and you will not find a good solution.
  • ThinkingStiff
    ThinkingStiff about 11 years
    @user839645 I finally figured this out. I updated my answer and my demo.
  • Admin
    Admin about 11 years
    Hmm i think its not really working. What happens is that the string 123456789012345678901234567890 its so long and dont have spaces in it so its being show in three different lines. If you change that string for a shorter one (and maintain the same code) you will see that the tweet its posted in the same line. For example (using your first example) <a href="https://twitter.com/intent/tweet?text=123467890%0A1234‌​01234567890%0A123490‌​1234567890" target="_blank">long lines with \n - works!</a><br /> But thanks again! You enlight me in another way
  • ThinkingStiff
    ThinkingStiff about 11 years
    @user839645 Yes, words that are too long to fit on a sigle line will wrap. That is standard HTML word wrapping.
  • Admin
    Admin about 11 years
    You're totally right, maybe i get too obsessed with new lines i forgot everything else.
  • Earlz
    Earlz over 10 years
    It should be noted that this is a very recent new feature in twitter. Before it was impossible, now it's extremely easy