04 January 2007

Stars and arrows: A look into unicodes

I have recently been experimenting with unicode characters on this blog. You would have noticed them next to links, at the end of the footnotes and very recently, the bullet icon for the label under the title. I use three glyphs at the moment, the outbound arrow (↗) to symbolise external links that open in a new window/tab, the hooked left arrow (↩) for the link back to the text and the star (★) which just looks good next to the labels. If you can't see them and/or the characters in the brackets, you should get a browser that does. The perfect option is Firefox which has really good support for unicode characters.

I took some inspiration from John Gruber's Daring Fireball for my choice of characters (the hooked arrow and star), and realised that they actually work better than little icons which people go to the first chance they get. The main advantage is that modern browsers can render it choosing a font for unicode characters quite easily, which means you don't 'need' icons when a good looking character will do! There tons of glyphs to choose from. You could refer to the list at Wikibooks for a complete chart of the characters at your disposal (there are many, you'll need patience).

The occasional problem of cross browser rendering will surface. Every browser chooses different fonts to show their unicode characters. Which is why it is good to check how certain characters are rendered. One workaround for any problem could be to specify your own list of fonts to try and pick for a unicode character containing element. On this blog, I use Tahoma as the main font, with a font size of '7.5em' I've been told off for this many times! I just can't get myself to have a bigger font size! It just looks too ugly to me!, but when a unicode character is rendered at that size, it becomes too small. Hence, I've had to manually increase the font size for them to '8.5em'. 'Tahoma' is an almost complete typeset, and a modern browser is mostly able to 'fill-in' empty characters by finding a font which has the characters. You will have to do some testing to see which one works for you. You can do this by using 'class > element' selector. This will not work in Internet Explorer, but the same goes for the character itself. I doubt unicode characters show up at all in Internet Explorer. My solution for that is to get a 'real' browser! As simple as that!

As a designer, it helps me remove unwanted graphics from the page, and keep things simple. Especially if one uses a monochrome colour combination for the text (white and dark gray for this blog), it works best to keep it looking uniform and clean! Go ahead, give it a whirl!


10 comments

Efendi said...

i always loved, the little things you do to your blog :)

all of 'em, cute little icons, smilies, footnote ... etc. (boy how i always paying attention to details :P)

Aditya said...

Haha! I love adding those things to my blog as well! :D I'm just simply in love with it :P Call me blog crazy if you want to, but that's what I am!

And kudos to you for actually spotting all those changes! That's a silent encouragement for me to continue with making these small additions and changes! :) Thank you!

Manas said...

Would you mind telling how do you get those smilies ? :)

Aditya said...

Not at all! :) It's a little function I made for my old blog which I'm reusing here. I'll mail it to you in a few seconds!

Cyber-Buff said...

Could you please tell me how did you make these timestamps? I mean the dates and the months stamps...I really like them!

Aditya said...

Do you mean the time-stamps in the posts?

It is actually generated by a function which takes the post date as it's input, and gives out the pictures as the output. A little trick I picked up from those nitty
Wordpress blogs ;)

Cyber-Buff said...

would you please tell us the hack?

Cyber-Buff said...

and please send me that smiley trick too...

Aditya said...

Heh! It's better to publicly release the hacks rather than cater to one person at a time! :P Ok, I shall release both the hacks soon enough!

Stay tuned :)

Cyber-Buff said...

:x love you...lol :D