14.12. How to change the font size in PHP-Nuke

Since every theme comes with a CSS (style.css, see also Section 28.3 and Section 25.7) in the styles folder of the theme itself (see Section 14.1), it is very easy to apply global formatting changes to our PHP-Nuke site: we just edit the CSS file. For example, to change the font size for all documents, we don't have to chase <font> tags in the PHP code - we only need to edit the style.css of our theme.

	</font> is deprecated in HTML 4.x
	</font> tags are deprecated in the HTML standard, starting from version 4.0, see Font modifier elements: FONT and BASEFONT.

Typically, in style.css there will be one or more lines specifying the font size, like:

FONT            {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
TD              {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
BODY            {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
P               {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
DIV             {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}

or

.title          {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; 
FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.content        {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; 
FONT-FAMILY: Verdana, Helvetica}
.storytitle     {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 14px; 
FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}

Font size is usually specified in pixels (px), but other units are also possible (see CSS Font-Size):

• Relative units - they specify a length relative to another length.

  • em: the 'font-size' of the relevant font.

  • ex: the 'x-height' of the relevant font.

  • px: pixels, relative to the viewing device.

  Thus, the 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. That's what the following joke refers to:

  What did one .em say to the other .em? Who's your Daddy?

• Absolute units:

  • in: inches -- 1 inch is equal to 2.54 centimeters.

  • cm: centimeters

  • mm: millimeters

  • pt: points -- the points used by CSS2 are equal to 1/72th of an inch.

  • pc: picas -- 1 pica is equal to 12 points.

Depending on where you make the font size change, it may apply only to the title, the content or even the wholy body. Inheritance in the HTML document tree is applied by the browser to decide which properties can be passed on from the "parent" elements to the "children" or the "descendants". This is called "cascading" and is responsible for the first "C" in "CSS". You need to understand cascading to use the full potential of CSS, but for simple changes like this one, you can just experiment and get the idea (see Section 28.3 for a short discussion of CSS syntax).

However, it is better, from the "Accessibility" point of view, to let your users decide themselves what font size they like, by setting it in up in their browsers (see How to change font size). Read Using relative font sizes for the background on this. Using the advice given in that article, Chris has the following in the CSS file for DocBook that controls the appearence of the PHP-Nuke HOWTO (and actually, all other documents on his site):

P {
        font-size: 12px;
}
/*/*/A{}
BODY P {
        font-size: x-small;
        voice-family: "\"}\"";
        voice-family: inherit;
        font-size: small;
}
HTML>BODY P {
        font-size: small;
}
/* */

There's a lot going on here, and it's all important, so pay attention (taken from Using relative font sizes):

1. First, we're defining an absolute size (12px) for every <p>. All browsers apply this style, including Netscape 4.

2. Then we include the odd-looking comment "/*/*/". Due to bugs in Netscape 4, everything between this comment and the following one will be ignored. That's right, all the following styles will only be applied in non-Netscape-4 browsers.

3. Immediately after the odd-looking comment, we include an empty rule "a {}". Opera 5 for Mac is buggy and ignores this rule (and only this rule). It applies everything else.

4. We have now carved out a realm where we can define rules that are applied in all browsers except Netscape 4. Now we can start defining relative font sizes (which Netscape 4 can't handle). The first thing we do is use a "body p" selector to redefine the behaviour of the p tag. Due to the way CSS works, this will override our previous p selector. (In technical terms, "body p" is a more specific selector than "p".)

5. We redefine the font size of all <p> tags to be x-small. This is a font size keyword which, at default settings, Internet Explorer 5 for Windows will translate into 12px. However, if the user changes their "Text Size" (under the View menu), this text will scale larger or smaller, depending on the user's setting. This is what we want. (Note: we've now defined font-size twice for IE5/Win, but that's okay, because the more specific selector always wins, and the previous selector is simply ignored.)

6. Unfortunately, IE5/Win an off-by-1 bug with its font size keywords; every other browser in the world (IE5/Mac, Netscape 6, Mozilla, IE6/Win) will translate x-small to 10px, not 12px. Luckily for us, IE5/Win has its own parsing bug that we can exploit: it looks at that odd-looking voice-family and mistakenly thinks that this entire "body p" selector is over, so it ignores all the lines until the "}".

7. Now we have carved out a smaller realm where we can define rules that are applied in all browsers except IE5/Win (and Netscape 4, which is still blissfully ignoring all of this). So we redefine font-size to small, which modern non-IE5/Win browsers (the only ones still listening) correctly interpret as 12px (at default settings). Again, if the user sets their "text size" to larger, this text will scale larger, which is what we want.

8. But wait! Opera 5 has the same parsing bug that IE5/Win has, so it was also confused by the voice-family hack, but it correctly interprets font size keywords, so now our text will look too small in Opera 5. Luckily, Opera 5 supports a third type of selector, "html>body p". (Again, this is "more specific" than "body p", so it takes precedence over the previous selector.) IE5/Win does not support this type of selector, so it will just ignore it, which is what we want (since we've already compensated for it's off-by-1 bug and don't want to go mucking that up now). IE6/Win also does not support it, but that's OK, because we caught it with the "font-size: small" after the "voice-family: inherit" hack in the "body p" selector. All other browsers support "html>body" selectors, so for them we end up defining font-size four times. Again, that's not a problem, because the most specific selector always wins, and the rest are simply ignored.

9. Finally, we have a set of empty comments: /* */. This triggers Netscape 4's parser to start listening again. If we defined any further rules after these empty comments, all browsers (including Netscape 4) would apply them.

To recap:

1. Netscape 4 displays <p> text at 12px, regardless of user setting.

2. Internet Explorer 5 for Windows displays <p> text at x-small, which works out to be 12px at the default setting, but would scale larger if the user set their "Text Size" setting larger in the View menu.

3. Internet Explorer 6 for Windows displays <p> text at small, because of the "font-size: small" rule in the "body p" selector. This works out to 12px at the default setting, but would scale larger if the user set their "Text Size" setting larger.

4. Internet Explorer 5 for Mac, Opera, Netscape 6, Mozilla, and (hopefully) all future browsers will display <p> text at small, because of the "font-size: small" rule in the "html>body p" selector. This works out to 12px at the default setting, but would scale larger if the user used the "Text Zoom" feature.

	Dive into Accessibility!
	By the way, the whole Dive into Accessibility document by Mark Pilgrim is highly recommended reading for everyone. It will open your eays to a different world - that also uses the Internet!