Anal Retentive

The Problem:

Modern websites are no longer visited by pale pasty individuals with bulky desktop computers and pitifully slow 14.4kb modems. These days even the most basic mobile phones contain faster processors and (in a lot of cases) higher resolution screens than full-size computers from 18 years ago (think Amiga 500+).

Being able to access information from anywhere in the world and on different devices has two major obstacles:

• Bandwidth
• Presentation

If you create a site that has fixed sized elements (using px to specify sizes) and/or heavily laden with images, flash etc then their is a good chance it will load incorrectly or take considerably longer to load on slower connections. There are a number of things we can do to correct this, but in this article I will look specifically at font sizing.

In traditional typed printed media, fonts have been specified using pixels. With the first itteration of webstandards font-sizes were specified using the built in browser presets (think IE and smaller, small, large, larger) or specifying a font height in pixels, such as 12px. Using px to specify font-sizes is perfect if you can guarantee that every screen will have the same resolution and screen size (say 15″ at 1024×768). However as computer displays have evolved and become larger or they become mobile and therefore smaller, these dimensions have changed drastically; and measuring the font in pixels, simply will not work..

Example 1:

Text at 12px, on a 19″ 800×600, will appear half the size on the same screen if we increase the resolution to 1600×1200 (because we now have twice as many pixels)

Example 2:

12px text on a 19″ 800×600, is going to become miniscual (and most probably unreadable) on an iPhones 480×320 3.5″ screen.

The Solution:

Anyway… enough of the reasons why px shouldn’t be used…. what we need to know is what is a more viable solution, something that will work on a variety of equipment. The closest thing that exists at the moment is the em measurement. em represents a relative size. So, a font-size of 1em is the same size of its parent element, a font-size of 0.8em is 20% smaller than its parent element… and I can hear you thinking… “But where does the parents font-size come from!?”.

Generally speaking browsers set their default font-size to 16px, so if I gave a <p> block a font-size of 0.8em, the font would be rendered with a font size of approx 12.8px, the biggest disadvantage to this (besides em measurements not working in older browsers) is that if the user changes their browsers default font-size, our font-sizes will change accordingly.

This ‘relative’ font size allows us to correct for different rendering of fonts because if for example, I visit a site on my iPhone, its browsers default font-size should be something that is readable by someone using the device, and my stylesheet modifications, should increase or decrease that font-size proportionally.

Equally, with em sizes you have to be careful if you find yourself nesting different font sizes.

Example:

<div style=”font-size: 0.8em”>

<div style=”font-size: 0.8em”>

Some text

</div>

</div>

This will cause the font to be reduced twice. The default font size of 16px will be reduced to 12.8px and then again to 10.24px. Ughhh.

Useful Links:

The information in the article, while I wish it was original research came from several sources on the net, but most noticeably from the two below.

No72DPI

BigBaer CSS Font-Sizes

I’ve started work on a new site this week and one of the things I stumbled upon was a nifty method for reseting the default values of potentially any CSS property. This is especially useful because each browser has different ‘default’ settings (such as padding and margins).

In extreme cases browsers will position HTML elements using different CSS properties, for example IE uses margin-left to indent lists, while firefox (or rather its engine) uses padding-left. This code:

* {
padding:0;
margin:0;
}

will reset all spacing default properties. Excellent! However now we have to manually set all the margins and padding of our ‘H1->Hx’ elements, a potentially lengthy process. However we can rectify this by assigning several elements properties in one go.


h1, h2, h3, body {
margin: 10px;
padding: 10px;
}

Obviously these are only simple examples, but this is one technique I will be using in all of my websites from now on… if you are interested in further reading, this is an invaluable link ‘Eric Meyers, CSS Legend‘.

So today I was playing around with -moz-border-radius and I was having problems with text touching the border of my div, ideally I wanted some sort of internal margin… ok so, padding I thought… 5px or so should do it.

I would have been right as well, except I had defined a width for the div and when used in combination with the padding property it was causing the div to expand beyond the width I had specified, ugh!

To get around this I had to take the border size into consideration:


border:                      4px #BB834B solid;
padding:                     10px;
width:                       180px;


would become:


border:                      4px #BB834B solid;
padding:                     10px;
width:                       170px;


8px have been deducted for the left (4px) and right (4px). This makes sense, but it would make more sense for the borders to be deducted from the width, not added. If anyone can suggest a better method, I would be very interested!

UPDATE:

As it happens, I have found a better solution, rather than deducting the borders from the width… simply don’t determine a width, but wrap the div around an outer div (which has its width set). That way the inner div will not expand when you add the padding:


<div class='outer_div' style='width: 200px'>
<div class='inner_div' style='border: solid 4px #000000; padding: 10px;'>
</div>

</div>

I know this is common sense, but I something to share and this was the most relevant thing I could come up with. More and more I find myself using these simple divs to display error messages to the user.

<div class='error'>Blah Blah Unsuccessful</div>
<div class='success'>Blah Blah Successful</div>

And then the usual little bit of CSS to format the text (in relevant colours).

.error { color: red; margin: 10px; }
.success { color: green; margin: 10px; }

Simple but highly effective

One thing I often find myself having to look up on the web is how to center block content, without using tables or ‘text-align’ and using CSS (I believe that tables should only be used for displaying tabular data, not formatting entire sites).

To do this, we simply, create a main div to wrap everything else in, set a width and then set the margin-left and margin-right properties…

#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
<body>
<div id='content'>
<div id='foo'>Some content</div>
<div id='foo_2'>Other content</div>
</div>
</body>

Its important the width property is set, but it needn’t be ‘px’, ‘em’ or ‘%’ will also work. If you want to center text (non block content), then use:
text-align: center;