Monday, May 05, 2008

Rendering HTML elements according to the system - I

I like things which look and feel like my OS. But I have rarely come across a site which looks and feels like an application running on my computer. Not like they are supposed to look like that but I have still been trying to figure out how they would look if the site could automatically change according to the user settings. In my quest to figure this one out, the first and the foremost thing to look at are the fonts. Most browsers have the magical property which allows you to get the font settings on the OS.
This line should be in the menu font.
This line should be in the caption font.
On most browsers you should see the first line rendered with the font used in the menu's and the second line rendered in the font used in the caption's. Funny thing caption does not work in FireFox it works in Opera and IE. Getting down to the code its just a one line code. Just set the font property to menu or caption and thats all that you need to do.
font: menu;
font: caption;
That is the part about the fonts I will try and focus on this topic in my upcoming posts. I am using this in one of my secret projects and hopefully it will come out in the open in the next few weeks.

No comments: