Twitter Art Layouts

THE PHYSICAL LAYOUT OF THE TWEET DISPLAY

The clever twitart people on twitter make a lot of great designs.  Folks like @140artist (Tom), @Guy_Vincent, @hg47 (Harvey Griffin), @Om_Sun (Larry Carlson) , @twart1st, @TW1TT3RART,  §ტ⌋ტ§ @MargaRlda, and @JapanBondGirl.

#symbolart #140art #twitterart

@AndreaPacione

Part of it comes from using unusual characters in very clever combinations.

Part of it comes from controlling the layout, the alignment of all those cool characters.  I’ve been curious for a while about how they get things to line up reliably.  Harvey Griffin’s (@hg47) cool 4th of July tweet got me started on this again.

http://twitter.com/hg47/status/17737182215

With all that white space and so few characters, I felt I should be able to use one of the unicode decoders to find the “new line” control character I assumed Harvey and others must be using to maintain alignment.  As it turned out, twitter artists aren’t using a “new line” control character, but are doing something very different.

FIRST ATTEMPT: SEARCHING FOR A “NEW LINE” CONTROL CHARACTER

A basic need for controlling the layout and display is getting a “new line” into the tweet.  What, in the old days (computing in the 80’s and 90’s), was called a “carriage return and line feed.”  In fact, cr/lf  was how online systems told teletype terminals (70’s) and later (80’s and 90’s) word processors and other software “told” a printer to “go to the beginning of a new line” ( by “returning the carriage” … back then, the paper moved back and forth and the print elements stayed anchored in one place) and “feeding a line”, “a line feed”.

I’ve been trying to figure out how they get the new line.  No luck yet.

The display of the same tweet is different for web page full of tweets vs. web page for one tweet.  On a page full of tweets, this tweet looks like a bus followed by an animal followed by a bus, but — in that big display of one tweet per page — it loses all its alignment.

http://twitter.com/JapanBondgirl/status/17820345078

but here’s one that maintains its alignment when goes to large format

http://twitter.com/420watch/status/17874533036

here’s the cute july 4th tweet from harvey griffin that got me started trying to figure this out again:

http://twitter.com/hg47/status/17737182215

Let’s see what happens to the july 4th tweet … ok, it maintains its alignment for both small and large display and is clearly somehow getting the function of newline command or character  … that works when i cut and paste it from twitter to twitter, does not line up when i paste twitter to wordpress, shows no newline control character when i paste the twitter tweet into packetizer of risha unicode decoders, and messes up alignment (removes a new line command) when i try to replace two of the spaces with “hi” … black magic … 🙂

SOLUTION: NOT ABOUT “NEW LINE” CONTROL CHARACTER

TWITTER ART LAYOUT CONTROL IS TOTALLY DIFFERENT TYPE OF KNOW-HOW

Ok, got it figured out.  The ever-lovely @JapanBondGirl was helpful, as always!

BASIC PRINCIPLE: SIZE MATTERS

There’s no newline character.  Or, if there is, the twitter artists I’ve been studying to reverse engineer their layout technique aren’t using it.  The technique is to get “new line” by taking note of the way Twitter handles long contiguous strings of non-keyboard-space characters (side-by-side strings of characters, no spaces from the keyboard’s spacebar, no enters from the keyboard’s enter key, probably no tabs from the keyboard’s tab key) such as those used in very long hashtags.  In other words, if Twitter has laid out one line of a tweet display, has a certain % of the line left, and the next character string (with no spaces) requires more than the available % of line length, Twitter will leave the rest of the line blank and start the long string on the next line.  Example, “@username yiukh sishgiu shgusyh” on first line leaving a certain % left, with next string “haohghaoouoeuahgoiehoh” needing more than that %, Twitter starts the next string on the next line.

I’ve been able now to make a tweet with 7 lines that way.

It’s not about number of characters per displayed line, it’s about width displayed characters and the length of the twitter Home, Profile, big 1 tweet per page, and other tweet displays.  That means the letter CCCCCCCC tends to force a new line faster than a lot of llllllllllll.  That’s also true for the non-alphanumeric characters.

SPACES: THE OTHER IMPORTANT ISSUE

Spaces are a separate part of the know-how for making this layout control work.

Spaces or “enter key” strokes from the keyboard break up the contiguous strings of characters.  But there are also at least three widths of spaces that use characters (copy-and-paste or character codes, NOT simple spacebar or Enter keystrokes) that can be included without breaking up contiguous strings/blocks of characters.  They can be copied and pasted in or input using the &#x….; unicode format.  That’s & #x20; (without the space between the & and #) for the narrow space, & #x2002; for the medium space,  and & #x2003; for the wide space.  The wide space is the most useful because it helps force a new line with the least number of the 140 characters used.  The more narrow ones are useful for making small adjustments to alignments.

FIRST LINE OF TWEET IS SPECIAL CASE (EFFECT OF @USERNAME LENGTH)

In some (not all) of the tweet displays in Twitter’s basic browser tool, the first line of the tweet has the Twitter @username to accomodate before the first line of the TwitArt pattern.  The rest of the first line can be titles and such, parts of the design picture, or blanks added to make sure the second line becomes the second line and not part of the first line.  Some twitter art tweets use the first line as part of the picture, but most I’ve seen add comments, titles, signatures, and hashtags on the first line with the actual picture being on lines 2 through 3, 4, 5, 6, 7, or 8.  So far, with wide spaces (the 0x2003 character … Harvey Griffin calls it the “Guy Vincent space” but Guy says he learned what he knows from Tom at @140artist ), I’ve been able to force the tweet to display as many as seven lines.

MAX NUMBER OF LINES

With wide characters, 4-letter username, and fine-tuning lengths of contiguous blocks of characters, Harvey got to 8 rows in the tweet:

http://twitter.com/hg47/status/17902603021

july 7

ok, here’s one from @twart1st.  It gets to 8 rows too, like harvey’s.

http://twitter.com/twart1st/status/16545066701

DEALING WITH THE LENGTH OF THE FIRST LINE

The twitter artist has several displays to consider.

The simplest is to consider the web browser displays provided by twitter itself.  There are also other twitter browser apps like brizzly.  Then there’s all the apps and displays on all the non-PC iphones, blackberries, and stuff.

For this discussion, I’ll just focus on the web browser displays in twitter’s own standard web interface.

Even limiting it to that, there are several different places where twitter art can display differently.  The two main types of display are (1) the ones with the artist/sender/tweeter @username shortening the first line (Home, Favorites, Search results) and (2) the ones without the @username shortening the first line (Profile and the big-font single-tweet display you get when you click on a tweet’s timestamp or click on a reply link).  There’s one small difference in the Profile page depending on whether you’re logged in looking your own tweets on your own Profile page (tweets are all in same small font), logged in looking at somebody else’s Profile page tweets (the most recent tweet at the top uses a larger font but the same physical display width potentially throwing off alignment of lines), or if you’re not logged in and looking at your or anybody’s Profile page (top tweet is large font again).

If I were a twitter artist, those are the ones I would be thinking of as i messed around with my designs, fine-tuning them so they line up right in all those places, if possible.  What’s all the point?  What’s all this fuss about?  Well, your twitter art design can look “right” or “correct” in one place and be an unintelligible scrambled mess in another place.  You’re so proud of your twitter art design when it rolls onto your Home page display, you click on the timestamp to look at the large view and the large view’s a mess.  Or it looks Ok in those two places, but, when someone looks at your Profile page to see your latest stuff, it’s all f’d up either in the lower small-font tweets or in the single larger-font tweet or both.

There are also some minor tweet display places in the standard Twitter web browser application that I wouldn’t consider at all for twitter art design purposes.  The design gets scrambled there no matter what you do.  And it doesn’t really matter.  One of those places is the small-font my-latest-tweet just below the input window on the Home page.  The latest tweet shows up in other places too like maybe the people Following you page and the Followers page and maybe the Find People results page.   I wouldn’t make adjustments to twitter art designs to try to make those work.

So it boils down to the effect of the twitter artist/sender/tweeter’s username on the length of the first line of the twitter art tweet.

It effects the width of the second line’s contiguous characters needed to get the “new line” effect to make sure the second line of the design is the second line instead of becoming a part of the first line screwing up the alignments in the picture.

LITTLE BIT OF MATH

140 characters maximum in the tweet itself.  placing those  140 or less is the whole story for the single-tweet large display, for the small-font Profile page display, and the large-font Profile page display.

for the Home, Favorites, and Search Results pages, there’s the 140 or less plus the @username and a spacer between @username and tweet characters.

if you make a line too long … i’ve seen a 3rd line that was nicely positioned on Home page display that wrapped around in the large single-tweet display … i think i once saw some space at beginning of a line removed by the large single-tweet display … i wonder if that large single-tweet display has its own character placement algorithm that deletes spaces … all of the tweet displays clearly have pre-processing algorithms … to prove that to yourself, just try to use Enter keystrokes to create a column of words … it’ll go into the input box that way, but, when the tweet comes back to you on your Home page or anywhere else, it will have replaced all those Enter keystroke “new lines” with spaces …

140 characters, 8 lines, 17-18 per line, 17  * 8 = 136, but, if you make a line too long, it might wrap in the large single-tweet display and maybe in the larger-font Profile page display too.

Thinking of testing the wide space characters in a test tweet … wonder if the wide space also comes in colors …

A little experiment with the wide space 0x2003 (the em space, the Guy Vincent space) and ░   ░ shaded boxes seems to say (1) basically, the “widths of contiguous strings of characters vs available display line length” theory of twitter character placements seems right, but (2) it will, at least in the tweet displays with @username in first line (Home, Favs, Search Results), treat the contiguous wide blank characters as opportunities to break the line whenever they have a transition to a non-space character.  In other words, twitter wasn’t designed for twitter art.  It was designed for messages of less than 140 characters and its placement logic tries to interpret the input intelligently as it if were messaging characters and words not parts of pictures.  silly twitter!  🙂

http://twitter.com/tommcmullenjr/status/18069179789

wordpress is doing the same thing.  the following should be 8 rows of spaces, each row broken by Enter, each row starting with wide spaces and having 4 shaded blocks.  wordpress is putting as much as it can on one line and using the transition from a wide space character to a non-space character as permission to break to the next line:

░   ░   ░   ░    ░   ░   ░   ░    ░   ░   ░   ░    ░   ░   ░   ░    ░   ░   ░   ░    ░   ░   ░   ░    ░   ░   ░   ░    ░   ░   ░   ░

the next one replaces 3 of the 4 narrower shaded box characters in each row with a wider wide space character (the em space, aka hex 0x2003, aka the Guy Vincent character).  This increases the block width (so two rows can’t be placed in one display line) and also removes 3 0f the 4 space-to-character transitions that twitter would interpret as ok to use for a line break:

http://twitter.com/tommcmullenjr/status/18069374753

let’s see what wordpress does with it:

░                ░                ░                ░                ░                ░                ░                ░

wordpress is doing its own thing cutting out all the whitespace prior to the first shaded box (the “leading whitespace” characters) and doing its thing straightening out the ragged right edge by increasing spacing between what it sees as “words.”  You say, what????  well, nevermind what wordpress is doing.  we’re working on twitter art.  but it does remind those of us who have programmed text input, text processing, “string processing”, and text display subprograms — or who want to understand them a little — that computer input and output tools have to do — and do — processing on the text stuff we put into it for a lot of different technical reasons we don’t think about a lot.   A lot of stuff gets done fast (character codes, preprocessing, post processing, parsing, translations, placements) when computers are doing our “text” and other “characters” for us that isn’t going on when we write text with pencils, pens, and crayons.