Dropcap fails on first page load in new tab

[robjlucas]

To reproduce (tested in Firefox):

• open a new tab and go to an article URL; the dropcap should be broken
• navigating to any orther article should show the dropcap broken
• now refresh the page; the dropcap should appear
• now navigating to any article should show the dropcap working
• close the tab and open a new one, and the dropcap is broken again

I have localised the problem to the following lines in dropcap.js. In particular, on the first run _isBlack(middleYline, y) never returns true, so bottomL is null, and so is the resulting ratio:

 92     // From the bottom, go up until we fnd the first black pixel
 93     for (var y = canvas.height-1; y >= 0; y--) {
 94         if (_isBlack(middleYline, y)) {
 95             bottomL = y;
 96             break;
 97         }
 98     }
 99 
100     // From the top, go down until the first black pixel
101     for (var y = 0; y < canvas.height; y++) {
102         if (_isBlack(middleYline, y)) {
103             ratio = (bottomL + 1 - y)/height;
104             break;
105         }
106     }

I have been assuming the problem was with our own setup, but upon fairly extensive investigation I've been unable to determine what.

[robjlucas]

It turned out that the root problem was that dropcap.js was running before the relevant font had loaded. The solution was thus of course to make it conditional on the availability of the font. I accomplished this using Web Font Loader's fontactive event.