Tuesday, 14 May 2013

Addressing CSS2.1/CSS3 @font-face 404s in Internet Explorer

And now for something completely different...

My employer works with several large partners of global brand. Recently, we noted a behavior in Internet Explorer versions 6, 7, and 8--note that we have generally retired support for IE6 and IE7, however a global brand can expose our properties to a large audience that is not technically savvy enough, or cares enough, for lofty principles of supporting core web standards.

The behavior was simply that our Performance Engineering team noted a long term trend of HTTP 404s that periodically spiked with ad campaigns for the brands. The 404s all had GET statements like this:

/webfont.woff')%20format('woff'),%20%20url('webfont.ttf')%20format('truetype'),%20%20url('webfont.svg');

I saw the problem immeditately: IE was reading @font-face rule declarations past the supported type. Let's look at a typical @font-face rule used1:

@font-face {
  src: url(FQURI/to/eot/font);
  src: url(FQURI/to/woff/font) format('woff'),
       url(FQURI/to/truetype/font) format('truetype'),
       url(FQURI/to/svg/font) format('svg');
  font-weight:normal;

}

One can see where the 404 is being generated. The above rule is documented as the preferred way to load the supporting font files across browsers supporting @font-face rules introduced in CSS2.1. The basic idea is that by loading the IE Embedded OpenType format first, IE will "see it," fetch it, and ignore the rest of the font files and types.

I set to solving the problem. 

First, I installed Windows XP SP3 with IE6 and IE7 in dedicated VMs. Then I created a test page with a typical @font-face rule. Using Fiddler, I was able to track and reproduce the 404 behavior. After reading the CSS3 specification carefully, I started looking for parsing tricks that would halt IE from reading CSS declarations.

I was not finding any. 

So I set to using the specification precisely and found the local(font-name) property of the src declaration would stop IE from continuing to read src declarations:

@font-face {
  src: url(FQURI/to/eot/font);
  src: local(font-name),
       url(FQURI/to/woff/font) format('woff'),
       url(FQURI/to/truetype/font) format('truetype'),
       url(FQURI/to/svg/font) format('svg');
  font-weight:normal;
}

I call this the Irish Local Name Method after Paul Irish who documented this method in 2009-2010, but I didn't discover until last week.2

Editor's Note: It seems that fontsquirrel.com has found a less obtuse hack and is leveraging a more readily readable parsing hack and exploiting an MSDN note on support for the format property in IE8 and less3:

@font-face {
  font-family: 'Slab Bold';
  src: url('fonts/slabbold.eot');
  src: url('fonts/slabbold.eot?#iefix') format('embedded-opentype'),
        url('fonts/slabbold.woff') format('woff'), 
        url('fonts/eslabbold.ttf') format('truetype'), 
        url('fonts/slabbold.svg#Slab-Bold') format('svg');
}

The use of the format property achieves the same behavior as the use of the local property, but by restating the Embedded OpenType format property that is ignored by IE8 and less.




  1. [1] Brian Hogan in HTML5 and CSS3 recommends this format.

  2. [2] http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

  3. [3] http://msdn.microsoft.com/en-us/library/ie/ms530757(v=vs.85).aspx To specify specific font formats (only for externally referenced font files), use a format hint (format(fontFormat)) where fontFormat is a comma-separated list of format strings that denote supported font formats. Possible fontFormat values are "woff", "truetype", "opentype", and "embedded-opentype". The format hint is optional starting in Internet Explorer 9. (format hints are not supported in Internet Explorer 8 and earlier versions and are ignored.)

Posted by caffeinated at 2:30 PM in 0xDECAF

Friday, 10 May 2013

The 2013 Blogging A-to-Z Collection

As last year, here is the Complete 2013 WFRP Blogging A to Z collection as a single PDF. The PDF includes all the posts and the NPCs.

Download WFRP Blogging A to Z 2013

I don't remember who gave me the idea, but I'm pretty sure I got it from a blog in the RPG Blog Alliance before I somehow got dropped from the rolls. Since RPGBA has some pretty crappy support channels--yeah yeah all volunteer, I get it, but then don't advertise your twitter account for support questions--I'm still not back on the roll. Maybe I'll pursue relisting soon.

Until then, don't forget you can always subscribe to the RSS feed to got all my current and previous attachments. There's even some old actual plays on that feed.

Posted by caffeinated at 8:27 PM in d10

2013 Blogging A-to-Z Retrospective

Another Caffeinated Day entered into the 2013 Blogging from A to Z challenge excited about the milestone, three years! Each year presented challenges, though for 2013 the greatest was just plain old discipline.

My biggest challenge in 2011 was wrapping my head around the ideas and focusing on a coherent topic. For 2012 it was scheduling. Each year's challenges welcome and the topic, Warhammer Fantasy Role Play, something that engaged me and my readers.

This year I hit the challenge running with a topic that I hope Warhammer fans could also take with them in the form of deeper fiction and NPCs, Non-Player Characters, for games they may be playing. And getting the NPCs out the door each day mid challenge became more difficult with each day due to daily demands of life.

Daily demands aside I can say that I never missed a EDT Midnight deadline--GMT doesn't count!

2013 also marks another milestone: introducing fans of Warhammer to more WFRP voices. JMT and Roger's A Life Full of Adventure and Mark's A Song of Middenheim expanded their audiences and introduced new and exciting Warhammer perspectives and fiction.

Each year finding a coherent topic focus with entries that start with the known Latin alphabet--no pedantics please!--is itself a challenge. It's my goal to rise to that challenge each year.

Til 2014...

Posted by caffeinated at 2:20 PM in d10

Monday, 6 May 2013

Missing NPCs

Update

All NPCs now have a complete character sheet. Enjoy

--

Apologies to the Blogging A-to-Z readers that subscribed to the RSS feed for ACD. It seems, as I prepare my 2013 retrospective and 2013 PDF collection, I have missed three NPCs!

A problem I will soon fix for the collection.

Posted by caffeinated at 6:37 PM in d10

Wednesday, 1 May 2013

April Referral Search Round Up

I always promise myself to do one of these entries a month as I like seeing what brings people to Another Caffeinated Day.

No question that Warhammer Fantasy Role Play is a big draw. But there is the occasional "What the Fuck?" that is at both times literal and ironic.

Last month, ACD ranks number 5 and 6 for Google searches for "ben 10 bestiality fanfic". That's right, proof you can find, at least look for, anything on the internet. I admit that fan fiction where in a teenage boy with an oversized Timex is paired with ... beasts is disturbing. Yet I wonder, having seen the cartoon, but never read such fan fiction, could the pairings be some sort of self gratification as well?

Top Ten April 2013 Searches

  1. inns of the empire
  2. fantasy inn names
  3. another caffeinated day wiki
  4. anothercaffeinatedday
  5. ben 10 bestiality fanfic
  6. business names for fantasy establishments
  7. expansion for scwcd
  8. http://www.anothercaffeinatedday.com/blog/default/2009/06/18/recognize.html
  9. inn generator wfrp
  10. inns of the empire generator

Posted by caffeinated at 4:00 PM in Bohemian Breakfast

We survived the 2013 A-to-Z Blogging Challenge

The 2013 A-to-Z Blogging Challenge is done.

I survived a third year diving into the grim and perilous world of Warhammer Fantasy as a fan and gamemaster of the Warhammer Fantasy Role Play 2e role playing game.

In the next week I'll be posting my reflections on this year's effort along with a downloadable PDF collecting all the entries and NPCs (available to readers of the RSS feed now!). 

I want to thank Roger Brasslett (+Roger Brasslett), Mark Torley (+Mark Torley), and jm tommasi (+jm tommasi) for joining me this year on their respective blogs below.

Til next year!

Posted by caffeinated at 2:28 PM in kaffehaus