Pixel To Percentage Conversion In CSS

Published September 29th, 2006 under CSS, Web Development
by Mashhoor Al Dubayan

As you might already know, Internet Explorer won’t allow its users to resize a Web Site’s text if its font-size has been defined using pixel units.

To overcome this issue, you need to define your font size using percentages. Percentages define the font size of an element relative to the font size of its parent element, which might be a bit confusing, especially if you’re used to using pixels. But I’ve recently been shown a simple trick that enables you to convert from pixels to percentages :

Most browsers set the font size to the equivalent of 16px by default. To convert the pixel value we need to percentage, we do the following :

  • For a 13px text: 13 / 16 = 0.8125 = 81.25%
  • For an 18px text: 18 / 16 = 1.125 = 112.5%

The examples should be self-explanatory. We just move the first three digits (from the left) of the results to the left of the floating point to get the percentage value. Note that if the element’s parent’s font-size has been set to 14px (for example), then you need to divide by 14, not 16.

I personally won’t bother with percentages just to support Internet Explorer, but this might be handy in future projects.

Emphasize key words. Make your text scannable.

Published September 17th, 2006 under Usability & Accessibility, Web Development
by Mashhoor Al Dubayan

This is a technique I’ve been using in the local FAQ at work which, as I’ve been told, makes people find the answers they’re looking pretty fast.

Say we had this simple FAQ about accounts at example.com:

  • How do i activate my example.com account?
  • What are its limitations?
  • What happens after the trial period expires?
  • How do i renew my subscription?
  • How can i reach technical support?

Users will have to read every question in order to find the answer they’re looking for. Some might even skip it if it had a lot of questions, which is besides the point.

Now let’s see what it would look like after emphasizing the key word(s) for each question:

  • How do i activate my example.com account?
  • What are its limitations?
  • What happens after the trial period expires?
  • How do i renew my subscription?
  • How can i reach technical support?

Now that key words are emphasized, users will be able to scan this FAQ much faster; all they need to do is search for the words that are relevant to their question. Some will even be able to spot the question they want at first glance. Try not to emphasize too many key words though, as it will only end up confusing readers.

Of course, this also applies to paragraphs, not just lists , as long as you emphasize key words intelligently.

$age++;

Published September 13th, 2006 under Personal
by Mashhoor Al Dubayan

Parse error: parse error, unexpected IGNORANCE, expecting GIFT in /me/age/birthday.php on line 32

The reason I don’t blog in Arabic

Published September 1st, 2006 under Personal
by Mashhoor Al Dubayan

The first question most of my friends ask me the first time they visit my blog is “Why aren’t you blogging in Arabic?”. The answer is: I’d really love to, but i can’t.

When it comes to Web Development, Arabs are still (unfortunately) living in the late 90’s. Web Design to them is basically “front page” or “Dream Weaver”; Usability and Accessibility are two things I’ve never seen discussed in any technical Arab forum; JavaScript is underestimated and abused; Web standards are considered “luxury” instead of “requirement”. Why would I want to target an audience who won’t have even the slightest interest in my posts?

On top of that, most of the technical terms don’t have standard Arabic words to describe them, and a plenty of terms simply can’t be translated without losing some or all of their true meanings. So, even if i wanted to blog in Arabic, it would be very difficult for me (especially when i have to use a right-to-left language with a left-to-write markup).

I hope that I didn’t offend any fellow Arab with my post. I’m not trying to underestimate my people. They do pretty well in many things, but Web Development didn’t happen to be one of them. :)