Modern Software Experience

2010-05-05

styling tweets

embedding tweets

Tweets are the new quotes may be overstating it, but fact is that some tweets are quotable, and that sometimes, tweets are your only source of information. That was the case when I first included some tweets in an article. The 2008 Sep 9 article FamilyLink is FamilyHistoryLink now quotes several tweets from FamilyLink CEO Paul Allen, who at that time seemed to have given up blogging in favour tweeting.

tweet style

I did not simply want to use quote marks, and then remark that it was a tweet, and then somehow work in the link somewhere, but wanted to embed the tweets in the body text, complete with link.
Screen captures are a straightforward way to include a link, but you still have to include the tweet text for accessibility, so it seemed easier to just include the tweet in the text and then apply some style to it.
What I needed was a tweet style; a style that allowed to include a tweet as part of the text, yet would make a tweet stand out as a tweet.

styled tweet

This is what I came up with

#twitter #CSS #howto Tweet Style: embedding tweets http://bit.ly/TweetStyle

The above tweet is an image of what tweets looked in a browser when I first created the style, and what they still looked like when I wrote this article. It is an image because the style may have changed since then. Below is the same tweet using the current style:

2010-05-05 20:55:21 TamuraJones #twitter #CSS #howto Tweet Style: embedding tweets http://bit.ly/TweetStyle

On Twitter, the datetime below a tweet is a hyperlink that leads to a page with just that single tweet displayed prominently. That link is the URL of the tweet.
The URL of this tweet is http://twitter.com/TamuraJones/status/13446829382.

text-only

I deliberately kept things simple by using a text-only style, and not use any twitter background or avatar. Showing avatars would be nice, but dealing with an avatars in hand-code files is not, and I wanted a workable approach quickly.
I came up with a simple approach that can easily be extended to include avatar. More than a year later, I still haven’t bothered to do so, because I do not feel a need for them, they’d only make for a busier page.

padding

I choose to make tweets stand out from the body text by applying some padding that indents the tweets, and adding a dashed line above and below it. The use of a dashed line was not a random choice, but what twitter used back to separate tweets from each other. Twitter has changed to a thin solid line since then. It is easy to change along, but I have not changed anything yet.

bold

Another thing that makes tweets stand out is the use of bold text; each tweet shows a bold username in front of the normal-sized tweet text, just like twitter does it.

datetime

It was only logical to look to twitter for inspiration and make tweets a bit twitter-like, but it does have to fit my site and my ideas.

Twitter shows the hyperlinked datetime in small light grey type below the tweet text. I find the type too small and the light grey not readable enough. I chose to use normal size type with an easily readable amount of contrast.

I also chose to put the datetime first. That makes it easy to recognise whether a series of tweets is in chronological or anti-chronological order.

font

All that already makes tweets stand out from the body text. I decided to make them stand out even more by not using the same serif font as used for the rest of the body text, but the same sans-serif font as used for headers and a few other things.

I arguably should not have done that; those tweets are not headings, but part of the body text, and body text should use a serif font for readability. I originally opted to do so because Twitter itself uses a sans-serif font.

flexible

Twitter does not show anything between the username and the tweet text, my original style shows a semicolon immediately after the name. However, that semicolon is not hard-coded in the text, but added through a style rule. That keeps it flexible, makes it easy to change my mind about this later. In fact, even the space between the datetime and the username is not present in the XHTML, but added by the styling.

tweet style

code

This is the code I used to include the tweet:

<p class="tweet">
<a href="http://twitter.com/TamuraJones/status/13446829382"><span class="datetime">2010-05-05 20:55:21</span></a>
<span class="username">TamuraJones</span>
#twitter #CSS #howto Tweet Style: embedding tweets <a href="http://www.tamurajones.net/TweetStyle.xhtml">http://bit.ly/TweetStyle</a>
</p>

It is pretty simple, because it only contains what it needs to contain; the hyperlinked datetime, the username and the tweet text itself, all of it marked up with some styles. The style rules for those styles are in an external style sheet, as they should be.

using it

Getting a tweet into a text takes a few steps, but but it is not difficult. Using any template, I need to cut & paste the tweet URL, put in the right datetime, put in the right username, and insert the tweet text.
It would be nice to have some macro that puts up a dialog box, asks for those things and then writes the code, but a strength of this approach to including tweets is that it is still simple enough to perform it manually.

The tweet link is essential, but even that one is not mandatory. The style works just fine, even the tweet link could be omitted. I see no need to link everything that can be linked, and usually leave the username and all hash tags unlinked.

This bit.ly link will work even when bit.ly is down.

link twist

I do provide links for any links in the tweet text, but with a twist when it is a link from a link shortening service; I show the original tweet text, but use the original link.
I show the original link title (in this case a bit.ly link), but use the link to the actual page. That not only gets rid of the delay that using a link shortening service introduces, but also removes the dependency upon that link shortening service. This bit.ly link will work even when bit.ly is down. Even better, when you use this smart short linking technique with tweets that use framejacking services such as ow.ly and su.pr, you also save your visitor from their framejacking.

style rules

Each tweet is a paragraph with class style tweet, and then includes the hyperlinked datetime, the username and the tweet text, in that order. It also uses the already existing class style datetime (to be replaced by the tag datetime once that becomes an official standard) for the datetime, and the class username for the username.

These are the current style rules:

.tweet
{
font-size: smaller ;
margin-left: 4em ;
padding-top: .5em ;
padding-bottom: 1em ;
border-top: thin #D3D3D3 dashed ;
border-bottom: thin #D3D3D3 dashed ;
}

.tweet + .tweet
{
padding-top: 0em ;
border-top: none ;
}

.tweet .datetime
{
color: black ;
}

.tweet a.datetime:after
{
content: " " ;
}

.tweet .username
{
color: black ;
font-style: italic ;
}

.tweet .username:after
{
content: ": " ;
}

#body .tweet > a:before
{
content: none ;
}

link style

The last style rule above may seem a bit puzzling, but it exists to override two other style rules elsewhere in the style sheet.
The style sheet has a general rule that adds an icon in front of each external link, and another rule that adds an at-sign (@) instead of an icon when the link is to twitter.com, as discussed in Automatic At Sign on Twitter Profile Links.
The last style rule shown above simply says that the link will should remain unadorned when the class style tweet is in effect.

Other than that, each link in the tweet looks just like every other link in the text. It uses the same fonts, colours and mouse over effects. You could opt for slightly different effects, but it is generally best to remain consistent.

fonts

The styles rules shown above do not specify a font. The style rule that selects the same sans-serif fonts for tweets as for headings is a separate rule near the start of the style sheet. It looks something like this:

h1, h2, h3, h4, h5, h6, dt, th, .tweet
{
font-family: "Graublau Web", "Lucida Sans Unicode", "Lucida Grande", "Arial Unicode MS", "Deja Vu Sans", Arial, Helvetica, sans-serif ;
}

That single style rule specifies the preferred fonts for all styles that use the same font, to avoid having to repeat the font stack used there.

Other than selecting the sans-serif fonts, the tweet style itself does not override much. It does specify that the font size should be a bit smaller than the font used for the body text. Notice that it does not do so by listing any particular absolute size, but by specifying a relative size; it should be smaller.

Also notice that all tweet style sizes are expressed in em, so that all these sizes will automatically adjust to any change in font size.

tweet series

Sometimes you want to quote not just one, but a series of tweets. You could simply do so, but if the tweet style does not take this possibility into account, it might look a bit awkward. If the style sheet had not included a rule to deal with that situation, there would be two dashed lines between subsequent tweets; one below the first tweet, and one above the second tweet.

The .tweet + .tweet rule deals with that situation. The .tweet rules says to draw a dashed line above and below the tweet. The .tweet + .tweet rule list an exception; it says that when a tweet follows directly after another tweet, its top line should not be drawn, and its top padding reduced to zero. That way, a tweet series  looks like a tweet series.

style sheet

I included the tweet style rules are included in the main style sheet. I considered using a separate style sheet, but there are just a few rules and twitter is so mainstream that I opted for the simplicity of keeping the style rules in the main style sheet.

updates

2012-05-22: Twitter breaks links

Late in 2011, Twitter has broken the links to their Tweets are the new quotes blog post. The broken link has been removed.

links