Big news for web fonts and video today

WebM Video

The codec wars around the HTML5 video element might be settled sooner than you think:

Basically, Google just open-sourced VP8, a video codec. VP8 is being combined with the Vorbis audio codec to create a new video format called WebM.

This wouldn’t be news at all except that a ton of groups have already pledged to support it, including Firefox, Chrome, Opera, and Youtube(!). YouTube has committed to encoding EVERY video on their service to WebM, including the back catalog.

Given that kind of support, I would be shocked if it didn’t get back-ported into Safari, and then IE9 announced support as well. Whatever happens, this is worth keeping an eye on.

Typekit and Google

Google released a bunch of open source fonts (including the Droid fonts and Inconsolata, the finest monospace font I’ve ever used). They also released the Google Font API, which is really just Google doing all the @font-face generation and declarations, as well as encoding the fonts for all browsers.

Then Typekit announced that they were open-sourcing their javascript font-loading API, which fires events at various points in the font-loading process, so you can make a more consistent cross-browser experience. That library is now an open-source collaboration with Google, the WebFont Loader, and can be used through Google’s ajax library.

Pretty cool that Typekit would open their doors like this, and it speaks to their (and Google’s) commitment to making fonts easy to use for everyone, not just paying members.

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.

Ryan Got Married on Halloween

If my brother is married, then I’m Superman.

Yesterday, sometime before noon on this coast, Ryan and Molli went and got married. They did it at a justice of the peace, and I don’t actually know much more than that because we haven’t spoken since then (he just left us a phone message). Mom said they’re going to do a honeymoon kind of thing at some nice place in the area, but I can’t remember the name. Maybe next time Ryan gets online he’ll reply to this and fill me in.

Last night, Annie and I got together with Daniel to go see Ghostbusters at a theatre pub. Once we got there, we found out the projector was broken, so we made Daniel rent Dude, Where’s My Car? with us. He was somewhat unimpressed, and we, of course, loved it again. This time I noticed that the guy with the ostriches (“Pierre”) is played by Brent Spiner (the guy who played Data on Star Trek).

And today, I created a new icon for Mozilla. Mozilla is the open-source backbone that Netscape is built on. I just installed the latest version on my computer, and I’m very happy with it. It’s much more stable than the last version I tested. The only problem is that it comes with a really ugly icon. It’s blue and gray and I guess it’s supposed to be a gecko (the name of their rendering engine), but it’s hard to tell. So I went to their website, where they have a great red and black logo of a dinosaur, and I created an icon based on that art. I submitted it to the webmaster at the Mozilla site, but I doubt I’ll hear back from them. If you want the icon, you can download it here. (you might have to right click on the link and select “save as”).

Tables Don't Have a HEIGHT Attribute

I am absolutely stunned. For a few months now, I’ve been discovering that some of my websites don’t render correctly on Netscape. Now, like any web designer, I’m aware that none of the major browsers render HTML exactly according to the standards, let alone CSS. So I chalked it up to IE being slightly ahead in the browser wars and blamed Netscape for not being standard-compliant. However, I recently found out that Mozilla also has some problems with some of my sites. This is cause for alarm, since Mozilla’s major feature is an HTML rendering engine that is supposedly 100% compliant. I did a little detective work and found out that all of the bugs could be blamed on Netscape except for one thing. There’s an odd bug that shows up in the way some table cells are rendered on Mozilla (as well as Netscape) that I couldn’t explain away. My code appeared to be correct. Tonight, I stumbled across the answer while working on a new site for work.

There is no HEIGHT attribute for tables or table cells in HTML

Everyone uses height tags in their tables. It’s common practice. But while checking my manuals, I found out that it’s a non-standard tag. There’s a width attribute, but no height attribute. WHY? THIS MAKES NO SENSE.

I stumbled onto this because Netscape would render table cells set to HEIGHT=100% way too large, as if it was setting it to 100% of the screen size, rather than 100% of the space available. And in some circumstances, Netscape would ignore the HEIGHT attribute altogether. IE would render it with 100% of the space available. Mozilla would ignore the height tag altogether in all circumstances. So Netscape and IE had different ways of dealing with this non-standard tag, and Mozilla was the only one doing things the way it was supposed to. The only problem is that suddenly I’m left without a tag that I’ve been using frequently.

And there’s no substitute! Let’s say you want to position an element in the middle of the screen, no matter what size window the viewer has. CSS allows for exacting control over elements, but it will not accept general terms like align right or left or center. You have to enter exact distances from the top left corner. To get around this you need tables. Well, you can set the table cell to 100% width and height, and then align to the center both vertically and horizontally. Well, according to the HTML specs (and therefore, according to Mozilla), you can do that horizontally, but not vertically.

I love web design. It is my passion. But I swear, if anything ever drives me insane someday, it’s going to be things like this.