meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Archive: February 2003

Upgrading Designs

The Amaya team has recently said they’re very willing to accept contributions of redesigned icons and color choices for the browser.  So those of you with talent in that area, get to it!  Since the WThRemix contest closes today, you should have plenty of time to devote to Amaya, right?  Right?  Right.

I recently had a very interesting conversation with Ian Hickson about fonts and font-sizing.  Both of us have thought a lot about fonts in CSS and Web typography over the years, but I think we both realized that we had more thinking to do.  When you get right down to it, there is no good solution regarding font sizing on the Web today.  Every authorial choice has a drawback for some visitors, and every choice has a lot of benefits.  Pixels penalize high-resolution visitors who can’t (or won’t) use text zooming.  Percentages and ems can penalize visitors who have changed their default font size.  Leaving the text at user default looks stupidly big for visitors who haven’t changed their default font size.

It doesn’t help matters that there are huge differences in how serif and sans-serif fonts look at the same value of font-size, and that the commonly-available fonts on the Web today are not suitable for really nice typography.  I know some people think typography isn’t something we need to worry about, but it’s critical to good visual design and our current capabilites are laughably crude.  In fiddling with some test pages, I rapidly came to the conclusion that there just isn’t a good answer.  I’m not entirely thrilled with how this site’s typography is handled, for example, but I was even less thrilled by the other approaches I tested.

Is waiting for a downloadable-font mechanism our only hope?  I wish there were another answer, but right now, I don’t see one.  It seems we’ll have to accept and work with what little typographic control we have, and cede the rest of our textual desires to future improvements in both specifications and the browsers that implement them.

An Eon of Silence

Pioneer 10 has fallen silent after traveling 7.6 billion miles.  Its mission started when I was just a couple of weeks past the age of two.  It will reach Aldebaran in about two million years.

I wonder if we’ll already have been there and gone.

Try This On For Size

Ian Hickson complains that he can’t read meyerweb.com due to his high-resolution display being placed too far away.  Two words, Ian: Text Zoom.  Two more words: user stylesheet.  (Three words, if you prefer “style sheet.”)  You can make the Web more legible with this simple rule:

html, body {font-size: 1em !important;}

That will reset this site’s text to match your browser’s default font size setting, because I do use ems and percentages for all elements that descend from the body element.  On the body, I use a pixel value for font-size, thus establishing the basic size of text for the site, and every other element scales from there.  Reset that element’s size, and you change the baseline from which the rest of the site is sized (which is how the “advanced setup” text-sizing feature works).  The same will happen on the new DevEdge, as it happens, and on any other site that intelligently uses inheritance and CSS to size text.  The tools are there.  Use them to your advantage.

(Aside: I find it weirdly funny that Ian’s complaining about not being able to read my site, which uses valid CSS, when his site is almost completely unreadable in IE5/Mac thanks to his valid CSS.)

I’ve been trying to come up with a name for this font-sizing approach.  “Baseline sizing” is too evocative of the baseline used to lay out lines of text, which has nothing to do with this technique.  “Body sizing” sounds like it’s a weight-loss program.  “Right sizing” probably hits too close to home for a lot of unemployed IT folks.  Something to mull over as I nurse back muscles sore from shoveling wet, heavy snow and ice.

Voices in the Wilderness

I’m back from Los Alamos and out from under the worst of the e-mail avalanche.  Northern New Mexico is beautiful in its own way, although a touch too barren for my tastes.  But only a touch.  For a landscape junkie like me, the cliffs, river gorges, and mountains were definitely a potent mix.  The far better mix was the conversations with Jeff and Carrie about the Web, the world, and our lives.  Sometimes the best way to discover yourself is by talking to someone else.

The presentations the three of us gave at the Los Alamos National Laboratories seemed to be very well received, and the people there couldn’t be a nicer bunch.  Which seems a little odd, when you think about what they do there.  I subconsciously expected a bunch of white-coated square-jawed men with clipboards and cold eyes talking about the amazing potential of the atom to bring about world peace and the inevitable triumph of American science.  Perhaps I watched a few too many 1950′s-era science fiction movies as a kid.

In a post on Webdesign-L, Karl Dubost has reminded me just how smart Chris Lilley really is.  From a post Chris made to www-html in late May 1994:

As soon as images were allowed inline in HTML documents, the web became a new graphical design medium. Some people will just want to put out text, but some will want to apply graphical design skills and make a document….  If style sheets or similar information are not added to html, the inevitable price will be documents that only look good on a particular browser, at a particular window size, with the default fonts, etc.
—Chris Lilley

Karl’s post arose in the context of a conversation about the concept of “graceful degradation,” which is the idea that a properly created document will be usable in older user agents, even if it doesn’t look quite the same.  (Well, okay, it’s a lot more than that, but in the context of Web design, that’s what most people mean.)  Karl rightly points out that the term needs to be replaced with something that doesn’t sound quite so bad.  Of his suggestions, I think the best is “graceful flexibility,” and it’s a term I intend to start using from now on.

I updated the Color Blender to accept three different CSS color value formats (four if you count shorthand hex as separate from regular hex).  Thanks to Steve Champeon and Holly Marie for spurring me to do so.  I can think of two more things to add to it—a swatch-picker as suggested by Roberto Díez, and a color-wheel type picker—but they probably won’t happen any time soon.

The Nature of Progress

A redesigned Netscape DevEdge has been launched.  Look, ma, no tables.  Well, hardly any, and none in the basic design.  I was a primary project manager for this one, and the design is a from-scratch effort.  It’s nothing visually groundbreaking, and of course using positioning for a major site has been done, but we’ve gone a step further into using positioning to make the design come together.  The site didn’t quite validate at launch thanks to some deeply stupid oversights on my part, but hopefully they’ll have been fixed by the time you read this entry.

As for the design approach we took… that’s a subject for another day, and also the subject of an article I wrote.  I predict that we’ll draw fire for using HTML 4.01 Transitional, for not validating when we launched, for our font sizing approach, and for our dropdown menus.  On the other hand, we’ll probably draw praise for making the markup accessible (once one of my stupid mistakes is fixed), for using CSS in a sophisticated manner, for pushing the envelope in reasonable ways, and for our dropdown menus.  For myself, I’m very much satisfied with and proud of the result, and very grateful for all the effort and help I got from the other members of the team.

On a less important but possibly more amusing front, yesterday I hacked together a color-blending tool after Matt Haughey asked on Webdesign-L how to calculate the midpoint between two colors, and Steve Champeon explained how to do it in some detail.  The JavaScript is no doubt inefficient and clumsy, the tool may not work in your browser, and for all I know it will lock up your computer.  It was just a quick hack.  Well, not quick, actually; I’m not very skilled at JavaScript.  Enjoy it, or don’t, as you like.  Just don’t expect me to fix or add anything unless you mail me the code needed to do whatever you want the tool to do.

Lucas Gonze over the O’Reilly Network mentioned a fascinating paper on “cascade attacks” and how they can be used to take down a distributed network.  So the Internet can suffer cascade failure, eh?  I wonder how much effort would be required to take down the Internet’s starboard power coupling.  Or, worse yet, trigger a coolant leak.

It’s been revealed that the blurry, grainy image of the Space Shuttle Columbia wasn’t taken using any advanced telescopes or military systems after all, but three engineers who used some off-the-shelf parts to put together a personal experiment.  CNN says: ‘Hi-tech’ shuttle pic really low-tech.  Let’s think about that for a second.  Three guys took an eleven-year-old Macintosh, hooked it up to a telescope that probably cost no more than a couple hundred dollars, and took a picture of an object almost 40 miles away moving 18 times the speed of sound.  That’s low-tech?  The fact that you can even recognize the object they imaged is astounding.  Hell, the fact that they imaged anything at all is astounding.  No criticism of the three men intended; I’m sure they’re brilliant guys who know what they’re doing.  But think about it!

I refer to moments like this as “technological vertigo.”  They’re those points where you suddenly come to a dead halt while you realize the incredible complexity of the world, and just how much we take for granted.  For that one moment, you stop taking it for granted.  Here’s an example: a couple of years ago, I was driving south through suburban Columbus.  In the back yard of a house just off the interstate, I spotted an old satellite dish lying on its side, obviously no longer in use.  Then it hit me: whoever lived there once had the ability to receive information from orbit, and decided to throw it away.  Their garbage was so much more advanced than anything their parents had ever even envisioned that the gap was barely comprehensible.  Any general in the Second World War would have given anything, including men’s lives, to have the kind of communication capability that now lay discarded in somebody’s back yard.

The even more remarkable thing about this trashed satellite dish is that there was nothing remarkable about it.  So somebody threw out an old satellite dish—so what?  They can always get another one, and one that’s a lot smaller, better, and more capable than the piece of junk they tossed, right?

And that is perhaps the most incredible part of it all.

New Review, Old Author?

There’s an interesting review of Eric Meyer on CSS at Linux Journal.  Instead of just reviewing the book, Russell Dyer also asked me some interview questions and wove my responses into the review.  I really like the format; it allows him to make points about how and why the book was written in a certain way without just guessing.  It also means that a reader will get a better sense of the book’s purpose through the author’s words.

Thanks to Nick, I found out what operating system I am.  [You are HP/UX: You're still strong despite the passage of time.  Though few understand you, those who do love you deeply and appreciate you.]  I’m wondering how much time constitutes a passage, since I don’t feel that old.  Yet.  As for few understanding me, that’s no surprise.  Nobody gets me.  I’m the wind, baby.

I thought about incorporating a graphic displaying the current U.S. Homeland Security Advisory System level into my site design, but in the end decided I didn’t want John Ashcroft getting anywhere near my Web site.  Thus I continue to shore up a pleasant illusion that he couldn’t have someone crack into the server’s file system and download everything in about nine seconds if he felt like it.  All in the interests of defending liberty from those who would destroy it, of course.

Although it occurs to me to wonder who that someone might be.  The Department of Justice?  The National Security Agency?  (Side note: one of the funniest things I’ve seen lately is that the NSA has a privacy and security notice on their Web site, and it’s sort of a shame that it doesn’t just say: “You have none.  Get over it.”)  The Department of Homeland Security?  Probably any of them.  It bothers me that the only safeguard to my personal privacy could well be an interdepartmental fight over who gets to invade it first.

The Silence of the Fat Lady

Fabian Valkenburg sent in e-mail letting me know that my comments on Opera 7′s CSS support got used in the talkback to an evolt.org article, and that I’m wrong about Opera 7′s display of the dates on this page being a bug.  As it turns out, the answer to that is “maybe.”

First, a word on how I set up the title and date styling in the basic site theme.  Both are contained in successive h5 elements, each with an appropriate class value (title and date, in fact).  I make the title inline so I can wrap a border around it that “shrink-wraps” the text.  Then, since I want to move it upward, I relatively position it upward two-third of an em.  Since it has been relatively positioned, for the purposes of laying out other elements, browsers should act as though the element wasn’t positioned at all.  (See CSS2:9.4.3 for details.)  So, in that sense, the relative positioning should have no impact on how the date is laid out, and in fact it doesn’t in the browsers I tested; I only brought it up to show that the title wasn’t floated.  On the other hand, I float the date to the right and right-align its text.  Since I’m floating the date to the right from below the place where the date’s h5 would have been (because the date comes after the title), I give it a negative top margin to pull it upward, so that it sits just below the top border on the entry.

Now here’s where things get fuzzy.  According to CSS2:9.5.1, the outer top edge of a float may not be any higher than the top of preceding float or block boxes.  It doesn’t say anything about inline boxes.  Remember that with CSS, it’s possible to have inline and block boxes for sibling elements.  So the effect of that portion of CSS2 is to allow floats to ignore preceding inline boxes when they float.  Or not ignore them, as the case may be.

Let me frame it another way: here’s a testcase that shows h3 and h4 elements in the normal flow, and then with the h4 elements floated.  To my way of thinking, both floats should sit below the h3 elements that precede them, regardless of the type of box those h3 elements generate.  This is because my conception of floats is that they start from their place in the normal flow, and then move to the right (or left).  From there, they move downward if they must, but not up.  Unless I give them a negative top margin to move them up, of course.

The behavior I just described is what IE5.5/Win and Gecko-based browsers do, to pick two examples.  But what Opera 7 (and, in many cases, IE5/Mac) does is not a bug, because it doesn’t violate the CSS specification, so I retract my earlier statement.  I believe that what it does is not what  site authors would want, but it isn’t wrong.  Thanks to the wording in CSS2:9.5.1, neither are the browsers that don’t agree with Opera 7 wrong, although I would accept that they’re further away from the letter of the specification.  Whether or not they violate its spirit isn’t clear, and it’s in cases like this that browsers tend to do whatever their programmers thought best.

So what we have here is a gray area in which I believe the letter and spirit of CSS are pulling in different directions, and browsers are splitting over which path they choose.  Hopefully CSS2.1 will be clarified to address what should happen, and we won’t have to bother arguing about who’s doing what better in which way for whom.

As for css/edge, yes, I hear you.  Opera 7 gets most or all of the demos correct, and may in fact reveal some erroneous assumptions on my part in the pure CSS menus demo (or maybe not; I don’t know yet).  When I get time to actually run Opera 7 through all the demos and evaluate its behavior, I’ll see if I can get the support information updated.  Unless of course I finally decide that the support information is becoming too much trouble to have around, in which case I’ll update it into oblivion.  It never really helped prevent people from misrepresenting what the demos were supposed to do anyway.

Personally, I like Opera 7 (or did once I switched its skin to the classic look), and my comments weren’t meant to cast it into the junkbin of bad browsers.  If I were a Windows user, I’d probably use it a lot more than I do.  There are rough edges, as with any browser, but overall it’s quite good—I think I said that already, but some people don’t seem to have heard that part.  Opera 7 handles a site redesign project I’m working on a lot better than Opera 6 does, I’ll say that much.

Keeping Perspective

Wow.  The attendance at last night’s talk was overwhelming, probably a hundred or so people; we ended up having to break down an airwall and spill into an adjoining room to provide space (not to mention seats) for everyone.  My deepest thanks go out to everyone who was there to hear me run over my allotted time.  The talk file will soon be available on the Talks page.  Thanks also to Al Wasco for making the event possible.

Just before the talk, an audience member told me he’d read my journal entry where I talked about the Xupiter toolbar and what it can do to IE/Win, and that he’s basically moving to the Macintosh platform as a result of all the security problems in Microsoft.  I’d worry about my apparent power to mold people’s thinking, except I have to remember that’s what it is: an illusion.  There’s not only the Xupiter thing, but SQL Slammer hit the news (and Microsoft’s internal network) in the last week, and shortly thereafter a security consultant mentioned he’s thinking of migrating to the Macintosh because it has far fewer security problems.  So it’s not just me saying this.  If anything, it’s probably just me sailing with the prevailing winds.

None of this really seems terribly important, though, what with tragedies national and personal among those I know.  I even find it hard to get worked up over the whole Opera/MSN thing, which feels to me more like a broken browser detect than a deliberate act on Microsoft’s part.  As a friend likes to say, “Never ascribe to malice that which can be more easily explained by stupidity.”  Sniffing user agent strings to send them different style sheets is, as I may have opined once or twice before, pretty stupid.

I finally managed to pick out frames for my glasses and started wearing them today.  All I can say is that I don’t understand how anyone thought this was a good idea.  My vision is much sharper in the center, and then gets rapidly distorted towards the frame… and then, beyond the frame, the world looks like it always has.  The whole package is messing with my depth perception, balance, and ability to see at all.  No wonder prescriptions have to get strong over time; the glasses are wrecking your vision!  It’s all an optometristic conspiracy, I tell ya!  Aliens would doubtlessly be involved except life isn’t The X-Files.

I wonder how much it actually costs to rent a country.  I suppose that’s one of those “if you have to ask, you can’t afford it” deals.

February 2003
SMTWTFS
January March
 1
2345678
9101112131415
16171819202122
232425262728  

Archives

Feeds

Extras