W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2001

RE: Use relative sizing and positioning

From: Charles F. Munat <chas@munat.com>
Date: Sun, 6 May 2001 20:06:06 -0700
To: "WAI Interest Group" <w3c-wai-ig@w3.org>

First, 1 em represents the length of an em dash in the given font. Thus
negative numbers for em have no meaning. Think of it this way:

If your base font is 12pt, then 1 em represents 12pt text. If I then set
some text to 0.5 em (too small, probably), that will translate to 6pt.
So -4em would be -48pt text. Hmmm.

Then, you have an odd mixture of font sizes in your stylesheet:

BODY { font-size: small; }
th,dt,dd,ul,ol,li,form,caption { font-size: small; }
P { font-size: 12px; }
.xx-small { font-size: xx-small; }
.xx-large { font-size: xx-large; }
.eightpx { font-size: 8px; }
.sixteenpx { font-size: 16px; }

Anything in a P element will override the small setting on the BODY (or th,
etc.) to set the font-size to 12px.

Now, the reason your font sizes don't change in section C is because you set
them using classes (em-4, em-3, etc.), but those classes are not present in
your stylesheet (there in the example, but not in the actual stylesheet at
StyleSheets/css-ref1.css). Thus, the text defaults to small (per the BODY

I suggest that you skip the stylesheet sizes "xx-small" through "xx-large"
and define your own using em. Example:

.xx-small { font-size: 0.7em; }
.x-small { font-size: 0.8em; }
.small { font-size: 0.9em; }
.medium { font-size: 1em; }
.large { font-size: 1.2em; }
.x-large { font-size: 1.4em; }
.xx-large { font-size: 1.6em; }

I wouldn't go any lower than 0.7 em. Then, I would make no font-size
declaration on the BODY or P or other generic elements. Let them default to
the user's chosen font size (1 em). Use the xx-small to xx-large settings to
change items to smaller or larger sizes relative to that base font. Then, if
the user sets the font larger, all text will scale up proportionally.

Actually, I wouldn't even do that. It's still thinking in terms of sizes.
You should be thinking in terms of structure.

My recommendation? I'd avoid using the style attribute or the span tag or
classes that refer to sizes to mark up text. Doing so pretty much defeats
the purpose of separating style and content. Instead, I'd mark up the pages
properly according to their actual function (i.e., proper use of headings,
proper nesting, proper use of tables, etc.). Then I would establish classes
to further specify the function of items in the document. For example, if I
was using a P element to set the byline on an article, I'd create a class
called ByLine. Then I'd use:

<p class="ByLine">By Charles F. Munat</p>

to set the byline on a page. Finally, I'd add:

.ByLine { font-size: 0.9em; font-style: italic; etc. }

to my stylesheet.

Look through your pages and identify the various types of items included on
the pages. Create a look for each and add it to your stylesheet. Then,
instead of having to remember what size a byline was on other pages (and
ending up with an inconsistent look across the site), you simply keep a list
of items and class names for reference. When adding a byline to a page,
you'd look on your reference list where you'd find:

ByLine	Used for article bylines (name of the author)

So you'd know to add class="ByLine" to the paragraph element holding the

decide that ByLines should be twice as big. If you had them all set to
class="small", then what are you going to do? A global search and replace on
"small" will screw up lots of elements that aren't bylines. You'll have to
go back and change them all by hand. Changed your mind? Oops. Gotta go back
and change them all again.

If you've identified bylines by class="ByLine", however, you can simply
change the .ByLine declaration in the stylesheet to reflect the new
font-size. Presto! All bylines change accordingly. Changed your mind?
Presto! All back again.

You can also add formatting to entire sections of pages via the DIV element.
For example, suppose I have a certain look for the headers, body, and
footers of my pages. I might use:

<div class="PageHeader">
    <p>header text here</p>

<div class="PageBody">
    <p>body of the page (not the HTML body) here</p>

<div class="PageFooter">
    <p>footer text here</p>

Now you can change the look of all headers, all footers, etc. from a single
stylesheet (and you enforce consistency).

You can even change the P element by section:

div.PageHeader p {font-size: 2em;}
div.PageBody p {font-size: 1em;}
div.PageFooter p {font-size: 0.7em;}

Try this. The font size of 2em will only apply to P elements located within
DIV elements with class PageHeader. And you can nest elements this way to
whatever depth you like.

I can't stress strongly enough how effective this method has proven for
simplifying the creation of pages. Build the structure of the page without
thought for the look of the page. Label the elements of the page
appropriately using the class attribute. Use DIV elements to separate the
page into blocks. Then apply styles to the elements, the DIVs, and any
special classes (like ByLine). Voila! Your page is done, and is easily
reproducible. And with all your classes and your page structure clearly
explained in help documents, you can even let others add pages to your site
without having to worry that they'll screw the whole thing up.

I've attached a very basic example. If you need more detail, let me know.

Hope this helps. Have I answered your question?

Now get some sleep.

Received on Sunday, 6 May 2001 23:06:14 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 13 October 2015 16:21:12 UTC