It'll Never Fly

Clever… not good, but clever.

At work last week, it became necessary to develop our own custom message boxes. I wanted the message box to auto-size to its content: an optional image on the left, any number of custom labeled buttons along the bottom, and a label that auto-sizes itself vertically. The message box sizing to fit its content, and the first two criteria were fairly straightforward. The only real challenge was creating a label control that will auto-size itself vertically. It turns out it's actually quite easy, once you realize you have to manually take control of its drawing routine. Looking at examples from the web, it was a simple matter of setting up a region that defines the label's maximum dimensions and then making use of the Graphics.MeasureString and Graphics.DrawString routines in .NET.

But I noticed something amiss between our message boxes and the built-in message boxes. Even with the same font at the same size, our message boxes looked like crap. The text looked like it had been run through some fun house mirror filter. Without getting too technical, it's apparently a difference between Windows' different graphics interfaces, GDI and GDI+, and resolution-independence. This was something Microsoft noticed with .NET 2.0 and thus came out with a TextRenderer object with methods MeasureText and DrawText which accomplish roughly the same effect.

All this examination of fonts lead me to start looking at ClearType, Microsoft's name for sub-pixel rendering technology that attempts to make text more legible at small sizes on a discreet display medium like the computer monitor. It's not a new idea, but it's only become become prevalent in recent history because of the advent of LCD monitors. Any major desktop operating system will have some form of it built-in or at the very least have the ability to turn it on. Having said that though, there's no one right way to accomplish it, because different people perceive things differently. It's actually quite a polarizing topic. There are several different ways to do it, but basically they fall into one of two camps, and it's all about the pixel grid.

Microsoft's theory is essentially a kind of "snap to grid" approach; adjust the font so that it mainly fits along discreet points of the pixel grid. The idea being that this increases the "crispness" of the text, thus making it more legible. In theory, this is good, but in practice there's really one big caveat: unless a font is designed with this in mind, you can end up with some quite jarring results (the fun house mirror effect I alluded to earlier). This is now why you see a whole new rash of fonts coming out of Microsoft, especially designed for ClearType, and quietly replacing their old tried and true fonts with every new Office or Windows product. They themselves know how poorly fonts look with ClearType turned on if they weren't designed for it (and vice versa, I should point out).

Apple's approach is more benign. Rather than cram the font into a box, they elect to display it as best they can keeping the font in tact, potentially at the cost of crispness of display. The net effect is fonts rendered in OS X tend to look "smoother" and more appealing to the eye, but also "blurry" to some people. The upside is you don't need fonts designed especially to work with OS X's rendering technology. It "just works".

So it all boils down to personal preference. Frankly, I find fonts rendered with ClearType to look broken, faint, and/or fuzzy (with multihued outlines) and really distracting as I read (though it's better than turning it off completely). I don't find fonts rendered in OS X to be blurry at all. They look more natural and "intact" to me. Now perhaps it's my monitor at home, which is the new 27" iMac, because when I tried XP with ClearType through VirtualBox it looked way better than it did at work with the same settings (though I could still detect the fuzziness I see, but not as bad). This is even after using the ClearType Tuner, which helped greatly, but I was still never able to find the perfect setting. Though, if you’re going to stick with ClearType on XP, I highly recommend it .

Regardless, I'm stuck using XP at work with aliased fonts, or broken/multi-hued fonts in ClearType. This became even more noticeable when I installed Safari 4 and turned on its built-in "Medium" font-smoothing. It really made me want to find a way to turn that on system-wide. Luckily, some Japanese programmers also came to the conclusion that ClearType sucks for displaying their ligatures and decide to do something about it. GDI++ is a tool that uses the FreeType open source font engine for rendering fonts in Windows, and you can customize it (albeit in a very non-user-friendly way) to your own preference.

Now I'd only advocate using GDI++ if you're like me, and stuck in an XP world. If you're on Vista or Windows 7, their latest advances in DirectWrite and Direct2D appear to me to be a vast improvement over anything you can accomplish in XP, either built-in or through a third-party (mind you, I'm basing that strictly on screenshots I've seen, having never used Vista nor Windows 7). Unfortunately, Microsoft has decided no to support XP at this time with either of those technologies. But if you're up for a little tinkering, GDI++ is the way to go. I'll attach my settings, which attempt to mimc my Mac, once I get back in to work.

Stuff I found funny, interesting, just plain disturbing, or for my own personal benefit.

Rainer Brockerhoff :: Quay

Quay extends the Mac OS X 10.5 (Leopard) Dock to show extended popup menus for most Dock items, including applications, stacks and URLs. Quay also allows you to make folder proxy icons with easily customized icons.

Tags: , , , , ,

tms [fernLightning]

Allows basic cvs style operations on Time Machine volumes.

Tags: , , , , , , , ,

Just a quick note to the readers.

I’ve been tweaking the stylesheet for the site over the last few days, making it a little more efficient and readable hopefully (i.e. making it more about the “C” than the “SS”). There’s a lot about CSS that still throws me for a loop sometimes. I seem to have a hard time with styling technologies in general (but that’s a different story).

I didn’t have too hard a time of it this go around, I think mainly because of the new Web Inspector in Apple’s web browser, Safari. DOM/HTML/CSS inspectors in web browsers is not a new idea, and Apple wasn’t the first to the table with the idea. In fact, their inspector has been around for a couple of years now, in various forms.

It wasn’t just the live-updating of the CSS that helped, but also how it shows the different style rules in play and how they’re being overruled by others, and lastly the ability to see the final computed style. It’s still a little clunky and could use some more features, but it’s definitely usable the way it is now.

If I didn’t find Firefox as a whole rather clunky on my G5 (but only on my G5, for whatever weird reason), I’d probably be using it with Firebug, which looks awesome. Actually, if I was back in the business of coding web pages to make a living, I’d definitely be using that.

Anyway, if you’re still reading this, you shouldn’t really notice too many changes. I’ve pretty much kept all the styles the same, I’ve just reorganized how they cascade in the stylesheet. The biggest change I just implemented, is switching the main font over to a series of various Lucida variants from Verdana (which I’ve used for years now, simply because it was different, and Tahoma looked too cramped). Only problem now is finding the right Lucida variant for the job, as only certain ones came pre-installed with certain OSs or applications at certain times, and some look like utter crap. But I’ve done my research, and I think I’ve chosen the best option that screws all people equally (maybe the Windows people slightly more than others).

I’ve also started using tags, so at least I now appear to be “with it.”

Linklog for Apr 12

In Linklog on April 13th, 2008 by Bob
#, #, #, #, #, #, #
No Comments »

Stuff I found funny, interesting, just plain disturbing, or for my own personal benefit.

Surfin’ Safari – Blog Archive » Downloadable Fonts

WebKit development team announcing downloadable font support for WebKit-based browsers.

Tags: , , , , , ,

A List Apart: Articles: CSS @ Ten: The Next Big Thing

An A List Apart article talking about using embedded fonts in Web pages.

Tags: , , ,

View all my bookmarks on Ma.gnolia