TYPO3 Reea Blog

This will be shown to users with no Flash or Javascript.

Lucru cu font-size setat in ems

In cazul in care se vrea ca site-ul sa poata sa aiba posibilitatea de a se mari dimensiunea fontului cu optiune zoom (+) sau zoom (-) se foloseste urmatoarea setare:

body {font-size:62.5%;}

Toate browserele moderne au setata dimensiunea default la 1em=16px; Prin setarea de mai sus se obtine un font-size:10 echivalent in pixeli.

Dupa ce aceasta setare a fost facuta, e ca si cand avem font-size:10px. De aici putem gandi tot site-ul aproape in pixeli lucrand cu em si anume:

1em=10px;
1.1em=11px;
1.6em=16px;
2.1em=21px;
etc.

Mai departe nu mai stau sa traduc, poate o va face cineva:

This takes 16px down to 10px which I’m using purely because it’s a nice round number for example purposes – 10px text is too small for the real world. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. If you are laying out your document using <abbr>CSS</abbr> (which you are, right?) then you have probably used a few divs to group together elements. Apply text-size to these divs and your job is almost done. Consider a two column layout with header and footer:

<code><body> <div id="navigation"> ... </div> <div id="main_content"> ... </div> <div id="side_bar"> ... </div> <div id="footer"> ... </div> </body> #navigation {font-size:1em} #main_content {font-size:1.2em} #side_bar {font-size:1em} #footer {font-size:0.9em}</code>

So this would give us a document where text in the navigation and side bar is displayed at 10px, the main content is 12px and the footer is 9px. There now remains a few anomalies to sort out (you’d have to do this even if you were sizing in pixels). In Mozilla-based browsers, all heading elements in our aforementioned #main_content div will be displayed at 12px whether they are an <abbr>H1</abbr> or an <abbr>H6</abbr>, whereas other browsers show the headings at different sizes as expected. Applying text-sizes to all headings will give consistency across browsers, for example:

<code>H1 {font-size:2em}  /* displayed at 24px */ H2 {font-size:1.5em}  /* displayed at 18px */ H3 {font-size:1.25em}  /* displayed at 15px */ H4 {font-size:1em}  /* displayed at 12px */</code>

A similar job needs to be done on forms and tables to force form controls and table cells to inherit the correct size (mainly to cater for <abbr title="Internet Explorer">IE</abbr>/Win):

<code>INPUT, SELECT, TH, TD {font-size:1em}</code>

And so to the final tweak and the bit folks seem to find most tricky: dealing with nested elements. We’ve already touched upon it with our headers, but for now let’s look more closely at what’s going on. First of all we changed our body text to 10px; 62.5% of its default size:

<code>16 x 0.625 = 10</code>

Then we said our main content should be displayed at 12px. If we did nothing, the #main_content div would be displayed at 10px because it would inherit its size from the body element – its parent. This implies that we always size text relative to the parent element when using ems:

<code>child pixels / parent pixels = child ems 12 / 10 = 1.2</code>

Next we wanted our h1 heading to be 24px. The parent to our h1 is the main_content div which we know to be 12px in size. To get our headings to be 24px we need to double that so our ems are:

<code>24 / 12 = 2</code>

And so it goes on. Tricky stuff occurs where rules like this are applied:

<code>#main_content LI {font-size:0.8333em}</code>

This rule implies that all main content list items should be displayed at 10px. We use the same straight forward maths to achieve this:

<code>10 / 12 = 0.8333</code>

But what happens when one list contains another? It gets smaller. Why? Because our rule actually says that any list item in the #main_content div should 0.8333 times the size of its parent. So we need another rule to prevent this ‘inherited shrinkage’:

<code>LI LI {font-size:1em}</code>

This says that any list item inside another list item should be the same size as its parent (the other list item). I normally use a whole set of child selectors to prevent confusion during development:

<code>LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}</code>

And that’s it. When sizing text in ems there’s really one rule to remember: size text relative to its parent and use this simple calculation to do so:

<code>child pixels / parent pixels = child ems</code>

Some helpful tools

Pixy’s list computed styles is fabulous bookmarklet which shows the cascade of calculated font sizes (or any other <abbr>CSS</abbr> property). Mozilla’s DOM Inspector is even more powerful as it allows you to see which <abbr>CSS</abbr> rules are affecting any given element in order of cascade priority so you can see why your text is or isn’t changing size when you expected it to.

If you’re finding the maths all a bit complex, try using Riddle’s handy em calculator.

And finally… what is an em?

Classically, an em (pronounced emm) is a typographer’s unit of horizontal spacing and is a sliding (relative) measure. One em is a distance equal to the text size. In 10 pixel type, an em is 10 pixels; in 18 pixel type it is 18 pixels. Thus 1em of padding is proportionately the same in any text size.

blog comments powered by Disqus