Modern Software Experience

2009-07-22

Twitter links

at sign

On twitter, you link to someone else’s profile by prefixing their twitter name with an at sign. My Twitter username is TamuraJones, but you will rarely see that without an at sign in front of it; @TamuraJones.

This convention is used by other microblogging systems, and has spilled over to the rest of the web. A username with an at sign in front of it, it is understood to be a link or reference to a microblogging profile. Actually, twitter is so dominant, that and unless the context suggests otherwise, it assumed to be a twitter profile.

That the convention has been adopted outside of twitter is easily explained; @TamuraJones is both easier to type and easier to read than http://twitter.com/TamuraJones.

If you are using some blogging system that lets you type @ in front of a username, and automatically converts that in a hyperlink to twitter, good for you. I create my links manually, but I am lazy.

I do not type the at signs. They are added automatically. Today, someone asked me how I do that, and I decided to explain not just how it is done, but more importantly, why I bothered to make it automatic.

lazy

I do not like repetitive tasks and I certainly do not like having to go back edit a page to add just one character. After the first few times of typing an at-sign for a twitter link, I decided that I simply did want to do that.

I generally create a link to a twitter profile by copying and pasting the URL, to avoid typos. I do not always use the same editing tool, but they typically automatically add the URL you paste as the title of the link. I then remove the http://twitter.com/ part from the title, leaving just the username as the link title.

I do not add the at sign, yet when you view the page, you do see an at sign. The twitter username without an at sign displays as a username with an at-sign in front of it.

The Genealogy Companies on Twitter page contains many twitter profile links. All these twitter profile links are all displayed with an at sign in front of the twitter user id, although there is no at sign in the page code.

CSS

browser

It is done with Cascading Style Sheets.
There really is no at sign in the page code, and yet you see one when you view the page. The at sign is added by your browser, and your browser does that because the site’s style sheet tells it to do so. The style sheets contains an instruction to add the at sign in front of twitter links, and twitter links only. The same technique can be used to specify an ampersand in front of links to FaceBook profiles.

why

The small snippet of CSS that accomplishes this is below, but before I explain how it’s done, I should explain why I do it. Because, come on now, just how hard is it to manually type a single at sign? Why would you want to automate a little thing like this at all?

Well, there are several reasons. Sure, I am lazy enough to like that it happens automatically, and it also is a nice demonstration of what CSS can do, but these are not very practical reasons.

a matter of style

The first real reason for using a style sheets to add the at sign is that the at sign is not really content, but just a matter of style. It is just a textual adornment of the link title. The link works perfectly fine without the at sign. Content should be in the web page, and style should be the style sheet. The decision to display the at sign belongs in the style sheet.

consistency

The second reason is consistency. It is best to either never add the at sign or always add the at sign. The easiest way to achieve consistency is to never apply a style manually, but always through the style sheet.

An added bonus of doing it through a style sheet is that it allows you to change your mind. If you decide that you do not want to add the at sign anymore, or if Twitter decides to switch to a percent sign, you do not need to search and replace every twitter link, you only need to update the style sheet.

appearance

The style sheet allows you to tweak the appearance. I’ve used the style sheet to add a small amount of space between the at sign and the user name. I think that a bit of visual separation between the at sign and the user name looks slightly better, and makes it easier to read, and perhaps mentally pronounce the link title as intended; an at sign to indicate a twitter link followed by the actual username.

There is a lot you can through the style sheet. You could draw attention to the at sign, emphasise it by making it bold.
Another thing you could do is colour-code the at sign. This can be handy when you are discussing and comparing several microblogging platforms; you could use a light blue at sign for twitter, a green one for jaiku, etcetera.
I merely increased the space between the at sign and the user id a bit.

symbol overload

All the links in the body text have an adornment, either this site’s logo to indicate a local link or an exit symbol to indicate an external links. If you hardcoded the at sign in the page, you would end up with both an exit symbol and an at sign in front of the user name. That seemed too much to me, so the style sheet specifies the exit symbol for external sites, yet the at sign for twitter links that exist symbol. The browser does not display the at sign in addition to, but instead of the exit symbol.

how

code

The at sign is added by including this small snippet of CSS in the site’s style sheet:


#body a[href^="http://twitter.com/"]:before
{	content: "@" ;
	padding-right: .125em ;
	display: inline-block ;
}

That is all there is to it. This tells the browser that any link to twitter in the body of the page should have an at sign in front of it, and to leave a bit of space in between.

If you know CSS already, I don’t need to explain this the above. For those who do not know CSS, I will explain it a bit by pointing out what each part is for.

twitter links in the body

The #body part restrict it to links that occur in the body of the page (so it does not apply to links in the header, footer or menu).

The a[href^="http://twitter.com/"] part is a selector that restricts the style to links to that start with http://twitter.com/.

@ before

The :before part instruct the browser to add something in front of the link, and the content: "@" ; part tells the browser what to add in front of the link; an at sign.

space between

The padding-right: .125em ; part tells the browser to leave ⅛ em between the at sign and the link title. An em is a typographical measurement, the height of the font used. The size is deliberately expressed in em instead of pixels, so that the spacing automatically adapts to the particular font and font size used without further instructions.

display

The display: inline-block ; part is not strictly necessary, it is there for consistency with the other link adornments, which use a graphic image instead of a character.

non-profile links

The style tells the browser that any link to twitter in the body of the page should have an at sign in front of it, and to leave a bit of space in between.

There is one little issue with that; it indiscriminately applies to all twitter links, whereas an at sign should only be used for links to twitter profiles. A link to the twitter home page should not get an at sign in front of it.

hack

I initially avoided application of the style sheet rule to the home page link by using a character entity reference to obfuscate the URL. That is not very elegant. It is an obscure hack that codes style decisions into the content, and relies on the assumed inability of the CSS parser to match an obfuscated URL.

simple solution

There is a much simpler solution; for twitter pages that are not profiles, I use www.twitter.com instead of merely twitter.com, as the rule only applies to twitter.com links without the customary www. in front of it.

browser support

This is a standard CSS technique and therefore works in all major web browsers; Opera, Firefox, Safari and Chrome.

In fact, it does not only work in real web browsers. Nowadays, even the infamous Internet Explorer supports enough CSS. However, Internet Explorer was very late to support :before and :after; it only added support for these pseudo-elements in version 8, released on 2009 May 19.

Internet Explorer 7 and earlier versions, still in wide use, fail to process these pseudo-elements, and will simply show the links without adornments. Showing the link without any adornment is an acceptable fall-back, so it safe to use this technique, even if you expect and want to cater to visitors that still use an old version of Internet Explorer instead of a modern web browser.

A major limitation of Internet Explorer 8 remains that it still does not support the use of CSS with XHTML because, even after more than ten years of XHTML, Internet Explorer still does not support XHTML at all.

copyright

All site content is copyrighted, and that includes my hand-crafted style sheet. I do not want you to copy my style, and surely you want to develop your own style anyway?
However, there are only so many ways something can be done in CSS and this is a fairly obvious and straightforward technique. Do feel free to copy the CSS snippet discussed here and adapt it to your own site. Backlinks are appreciated but not necessary.

updates

2012-11-08: Jaiku

Jaiku became defunct in January of 2012. The broken link has been removed.

links