Taking our struggle with CSS font sizes public

by Steven Garrity

Those readers not interested in web design issues, please pardon this post. For the rest of you, the following is a series of posts I made on the corporate intranet at work. We’ve been struggling with CSS font-size issues. It’s nothing original, but it is my hope that posting the explanation of the problem and one (of many, I’m sure) potential solution I wrote for my co-workers might be of help to others dealing with the same issues.

I’m also interested in feedback on the techniques we used. What did we miss? I’ve tested across a wide range of browsers, but if you notice any weirdness – please let me know.

My first post was an explanation of the problem – basically written so I could straighten it out in my head:

Posted to the silverorange Intranet by Steven Garrity
– January 3, 2003

We’re having some difficulty with font size issues with CSS and I thought it might be helpful to lay out everything we’ve been talking about in one location.

First, some history. We are using CSS percentages (eg. font-size: 75%;) to do font sizes on most of our current sites. We discovered last year that some Mac browsers were inheriting the font sizes recursively (since we put font-size: 75%; on all [td] tags, any table in side a table would be 75% of 75%, eventually getting to the point of being ridiculously small.

We couldn’t replicate this Mac browser inheritance issue ourselves, but it is documented, so we now sniff out all Mac browsers, and all Netscape browsers (on any platform) and show them pixel-based font sizes (eg. font-size: 12px;).

Pixel font sizes are by far the most reliable font sizing technique across all browsers, but unfortunately, none of the IE/Win browsers (including 4, 5, 5.5, and 6 – basically everyone on the internet), allow the user to resize fonts specified in pixels. This is really shitty – it was on Jakob Nielsen’s Top Ten Web-Design Mistakes of 2002.

Some browsers, like all mozilla/gecko-based browsers and Opera, allow the user to resize any fonts – regardless of how they are specified (including pixels). However, the majority of web users are running IE 5, 5.5, or 6. So pixels are easy to work with – but limit IE users from resizing.

The solution we have on most of our live sites right now (Horton Brasses, NovaScotian Crystal, The silverorange Intranet, etc.) works ok (percentages for smart browsers, pixels for dumb browsers). Any kind of browser sniffing is messy, but it works.

The trouble came when we started the move towards XHTML 1.0 (from HTML4.01). Using our current percentage font-sizing technique, if you change the DOCTYPE from HTML4.01 to XHTML, in IE 6, things go wacky. All of the sudden, IE decides to use the inheritance model correctly (which sounds good, but we were taking advantage of it’s weakness in this area – serves us right for leaning on bugs).

So, to make the move to XHTML, we have to figure out a different way to do font sizes. This really sucks, because we are very close to being XHTML compliant – it wasn’t nearly has hard (other than this issue) as we had anticipated.

Here are the options as I see them, let me know what I’ve missed:

  1. Switch to pixels entirely
    This would be a breeze from our perspective, but we would be locking font sizes for squinting IE users everywhere. We could make a font sizing widget in the pages themselves to resize, but I’ve always hated those.
  2. Stick with HTML4 for now
    We don’t have to move to XHTML. Stay with HTML4 would let us continue with our current tried and true font sizing technique.
  3. Avoid nesting of classes
    Inheriting percentage sizes only becomes and issue when you nest classes (or put classes on items that get nested themselves, like [td] tags). Wired News uses this technique to create a fantastic CSS layout with flexible font sizes in all browsers. This is my preference so far – however, it involves some annoying reworking of the way we use classes to avoid nesting.
  4. Use CSS font size keywords
    CSS has keywords that work much like the old [font size=”-1″] HTML tags. These work well, except for an inconsistency in IE5 and IE5.5 – but there is an elegant hack to get around this. Keywords don’t inherit – so a small inside an x-small is the same as outside. Sounds good – however, the default sizes aren’t great. For example, you can’t the equivalent of the 70% Verdana we use so widely (here on the Intranet, for example).

Ok – that’s the state of the union address on font size issues. I wanted to write it out to get all of us and I all on the same page – but I also wanted to write it out to help sort it out in my head. What a mess.

I might post this publicly (linked from aov, maybe) to see if we can get any helpful feedback, but I doubt it. [note: I thought I’d leave this in to show how resentful I am of all of you morons when in private 😉 ]

I think our best bet might be to follow the lead of Wired News (using option 3 in the list above). They’ve made a wicked site with out inheritance issues anywhere. However, this would prove to be very time consuming on existing sites. Maybe keep the current sites at HTML4 for now, and start our next site (and update small, easy-to-convert sites, like silverorange.com) using this technique and XHTML?

Bah.

Then, after some sleep and a night of feverish delieum battling the flu, I posted this possible solution:

Posted to the silverorange Intranet by Steven Garrity
– January 5, 2003

My subconcious brain has been working on this problem all week. Now, I think I have a potential solution for our CSS font sizing issues. This proposal is implemented on the stage silverorange site. Please report any weirdness. I’m going to do more testing before going live, but so far so good. Here’s what I’m doing:

  • I’ve moved from including the styles from a PHP file do doing the browser sniffing outside the CSS file. This allows us to include actually .css files rather than embedding the CSS in the HTML (browsers can cache the CSS – saving time and bandwidth).
  • I’ve simplified the browser sniffing. We were sniffing out Netscape 4 and below and all Mac browsers and showing them Pixels rather than Percentage font sizes. Now I’m only sniffing out NS4 and below (I’m not longer sniffing out Mac browsers). The trouble on the mac was with inherited percentages – and I’m not using them anymore.
  • There are three CSS files:
    • All browsers:
      • core.css – this file includes any styles (or part of styles) that are safe in all browsers
    • Netscape 4 (and below):
      • dumb.css – this aptly named file contains Pixel font sizes and a few other variations (line spacing is smaller, etc.)
    • All browsers other than NS4 (and below):
      • smart.css – this file is includes the combination keyword/percentage font size solution described below
  • Font size:
    • Netscape 4 and below sees only pixel font sizes – if we decide to ditch Netscape 4 at any time, we can lose all browser sniffing for stylesheets!
    • For all other browsers (on all platforms, including the mac), I’m using the Wired News solution: Declare keyword (small) font size as the base font size (for [body], [td], and any other key containers)
    • IE 4, 5, and 5.5 make the font size keywords one step larger than every other browser in the universe. There is a hack called the ?box model hack? that gets around this.
    • This base keyword font size is the basic full size Verdana used as the body text.
    • Any other font sizes (titles, and the beautiful smaller Verdana text used often on the site) and sized as a percentage of the keyword base font. These styles are never nested, meaning there are no inheritance issues.
    • This means that it you want the base font size (full size Verdana), then no style is needed at all (as it’s the base font size for the document).

I’ve done a bunch of testing and haven’t found any cracks in this method yet. However, dealing with the browsers is voodoo, so I’m going to do a bit more testing before implementing.

What separates this solution from the options listed in my previous post on the subject (above) is that I hadn’t thought of using CSS keywords as the base font size setting.

The solution discussed in this second post is now implemented at silverorange.com. Please let me know of any issues.

 

Acts of Volition in 2002: A statistical review

by Steven Garrity

2002 saw Acts of Volition slip from being a multi-author weblog to a paltry 1-1/2 author weblog. While this may have cut the volume of posts, the participation of readers has been great. Writing for AoV has started to feel less like traditional writing and more like having a conversation with the readers.

This chart shows the relationship between aov posts and readers replies over 2002 (note – the chart is a little misleading – the two lines are charted on separate scales).

Here is Acts of Volition in 2002 in numbers:

Posts Replies Replies per Post Posts per Day Replies per Day
January 16 180 11.25 0.53 6.00
February 10 202 20.20 0.33 6.73
March 11 131 11.91 0.37 4.37
April 6 55 9.17 0.20 1.83
May 10 114 11.40 0.33 3.80
June 9 40 4.44 0.30 1.33
July 14 146 10.43 0.47 4.87
August 11 75 6.82 0.37 2.50
September 7 55 7.86 0.23 1.83
October 9 118 13.11 0.30 3.93
November 8 101 12.63 0.27 3.37
December 8 109 13.63 0.27 3.63
Total 2002 119 1326 11.14 0.33 3.63
Red bold type indicates the highest figure per column.
Blue bold type indicates the lowest figure per column.
* The NX Petition was only available for the first few days of November.
 

Year-end and Christmas Stuff

by Steven Garrity

Despite advice to the contrary, I hereby confess my weakness for Dave Barry humour. I even own one of his books (which lead to much confusion as it caused my father to laugh out loud while giving blood).

Despite the use of a poorly formatted bullet list, I did enjoy Dave Barry’s Year in Review.

From March:

… on the music front, the U.S. recording industry is buoyed by a report that 14-year-old Jason Plempitt of Knoxville, Tenn., went into a music store and actually purchased a CD, making him the first teenager in three years to pay money for a recording, rather than download it for free from the Internet. The humiliated youngster quickly informs his classmates that his computer is broken.

A pleasant Christmas has left me with some new stuff, including:

 

Bullet lists of Good and Evil

by Steven Garrity

I’m working on getting out of this glass house so I can throw more stones. In the meantime, a great pet-peeve of mine is bullet lists that don’t indent properly when lines wrap.

A stupid bullet list:

• Divitias alius fuluo sibi congerat auro et teneat culti iugera multa soli,quem labor adsiduus uicino terreat hoste.
• Martia cui somnos classica pulsa fugent: me mea paupertas uita traducat inerti, dum meus adsiduo luceat igne focus.
• ipse seram teneras maturo tempore uites rusticus et facili grandia poma manu.

A smart bullet list:

  • Divitias alius fuluo sibi congerat auro et teneat culti iugera multa soli,quem labor adsiduus uicino terreat hoste.
  • Martia cui somnos classica pulsa fugent: me mea paupertas uita traducat inerti, dum meus adsiduo luceat igne focus.
  • ipse seram teneras maturo tempore uites rusticus et facili grandia poma manu.

As the principal at a local high school used to say over the PA-system: You know who you are, whoever you are!

 

Crusaders for health

by Steven Garrity

I fear that people would pelt me with rocks and garbage if I rode around town on this thingA recent article from SFWeekly argues in favour of a ban by the San Francisco city council of the Segway from sidewalks and bike paths with the argument that people need more exercise. This has been one of the most common criticisms of the Segway; that it will allow lazy people to avoid even more much needed exercise.

First, I imagine that for many people, the Segway would replace the car for short drives more often than it would replace walking. For example, I have about a 7 minute drive to work, but it would take at least 30 minutes to walk. Should I walk? Maybe – but if so, then you should eat more vegetables (read: mind your own business).

I’m not going to walk a half hour to work everyday. Maybe I’m lazy – but I’m just not going to do it. I would take a Segway to work. Surely taking a Segway to work would be better than driving (fresh air, far more energy efficient).

The argument that Segway’s are bad because they will prevent exercise seems to me to stand atop a slippery slope. Should we not use remote control on our TVs and VCRs because they keep us on our asses?

It has always struck me as odd that we pay people to mow our lawns (and shovel our driveways here in Canada), and then pay to work out in gyms. I’ve always thought that all those people in gyms could be mowing my lawn. It would be a win-win situation (synergastic!). That said – I don’t think we should ban ride-on lawnmowers and force people to mow their own lawns.

To be fair, most people I’ve heard argue that Segways will be bad for our health don’t take the argument so far as to suggest that they should be banned as a result.

I should also acknowledge that the author of the SFWeekly article was likely trying to provoke debate and responses like this one – fair enough. The author refers to the Segway as “ultimate American doomsday machine” and deems it a “national threat at least as grave as Iraq”. He’s clearly trying to ruffle feathers with hyperbole.

While, as a geek, I am enamoured with the Segway from the bits I’ve seen online, I don’t think the biggest hurdle for the device will come from municipal law or health concerns. Rather, my biggest concern about owning a Segway would be looking like a huge dork. Though I imagine early roller-bladers would have had to contend with jeers form their four-wheel-per-foot comrades (“nice rocket boots, future boy!”).

For now, I’ll keep driving myself to work in my five-passenger, 2788-pound car each morning.

 

Bah, Humbug!

by Steven Garrity

I saw a commercial this week that started with a voice-over about a man who thought that Christmas was an excuse to get people to spend their money. Exactly!, I thought.

As the commercial went on, I found myself agreeing more and more with the sentiments of this man.

Then, it said: “Tonight at 8pm, Dicken’s A Christmas Carol“.

 

Juvenile Art Rock Legally Unleashed

by Steven Garrity

The Creative Commons organization gives artists the tools they need to release their work into the public domain with limitations.

As a nod of support to the organization, my old band, Horton’s Choice, has released our recordings under the Creative Commons Attribution-NonCommercial-ShareAlike license. Basically that means that you can use our music for non-commercial use, but you must attribute to work to Horton’s Choice, and any derivative work must also be released under the same type of open licence.

A few things they’ve done well:

I pretend that I think Horton’s Choice was a crappy garage band, but I’m really only using humour to mask my feeling that this was the greatest artistic achievement of my life.

 

Pot Logic: Affirming the Consequent

by Steven Garrity

Canada is debating the decriminalization of the personal possession of small amounts of marijuana. I heard a representative of a police association on the CBC the other day make an argument that I recognized from my Practical Logic philosophy course.

Unfortunately, I don’t have a link to the original quote, but the argument was roughly this: 100% of heroin addicts in Canada started with marijuana. The implied premise here is this: therefore, smoking pot leads to heroin use.

This is called affirming the consequent. If A then B. B therefore, A. It’s wrong. All leprechauns drink Guinness. You drink Guinness, therefore you are a leprechaun.

I know this isn’t a new argument, in fact, it’s quite obvious. That’s exactly why I thought it was notable. It was so obviously a logical fallacy that I was amazed that it was stated so simply.

Perhaps we should be teaching the basics of arguments and fallacies in grade school.

 

Garrity’s Law of Inverse Congregational Intelligence

by Steven Garrity

The intellect of individuals in a group decreases exponentially as the number of individuals in the group increases.

See Garrity’s Law of Eponymous Laws

 

Beyond Justice

by Steven Garrity

I have a friend and co-worker who is, among other things, a recovering lawyer (where is there a snare drum and hi-hat when you need it?). Writing about the recent Canadian Supreme Court ruling denying a patent on a genetically modified mouse, he tells me that “each ruling usually has a key paragraph upon which it turns.”

He was kind enough to cut through the 30,000+ word ruling for us and send the following key excerpt. It’s fascinating to see such a formal institution walk the line between the practical and the metaphysical. I think they did well.

163 It also is significant that the word “matter” captures but one aspect of a higher life form. As defined by the Oxford English Dictionary, supra, vol. IX, at p. 480, “matter” is a “[p]hysical or corporeal substance in general…, contradistinguished from immaterial or incorporeal substance (spirit, soul, mind), and from qualities, actions, or conditions”. “Matière” is defined by the Grand Robert de la langue française, supra, vol. 4, p. 1260, as “[TRANSLATION] “corporeal substance `that is perceptible in space and has mechanical mass'”. Although some in society may hold the view that higher life forms are mere “composition[s] of matter”, the phrase does not fit well with common understandings of human and animal life. Higher life forms are generally regarded as possessing qualities and characteristics that transcend the particular genetic material of which they are composed. A person whose genetic make-up is modified by radiation does not cease to be him or herself. Likewise, the same mouse would exist absent the injection of the oncogene into the fertilized egg cell; it simply would not be predisposed to cancer. The fact that it has this predisposition to cancer that makes it valuable to humans does not mean that the mouse, along with other animal life forms, can be defined solely with reference to the genetic matter of which it is composed. The fact that animal life forms have numerous unique qualities that transcend the particular matter of which they are composed makes it difficult to conceptualize higher life forms as mere “composition[s] of matter”. It is a phrase that seems inadequate as a description of a higher life form.

– From Harvard College v. Canada (Commissioner of Patents)