At the peril of falling into the get-a-life category I climb out on a trembling branch of the Web tree to investigate a phenomenon which has annoyed me for years: The, for the lack of a better word, fattening of lightly coloured normal text on dark backgrounds. The 2nd and 4th rows in Figure 1 illustrate the abomination and has everything to do with how the user agent applies sub-pixel rendering.
Fig. 1. Rendering of text in Safari.
Whenever text with a light shade of colour sits on a darker background it stands in danger of being rendered approaching bold font characteristics. How light and how dark and limits of what it takes for the algorithm to kick in, lie buried in programming code and is not something we can be bothered with in our daily struggles. This is not restricted to Safari; Firefox and Opera both cry “Me, too.”
Fig. 2. Rendering of text in Firefox.
Fig. 3. Rendering of text in Opera.
So, what is going on in the four bottom rows of Figure 1? The problem seems to be solved, you may say. And right you are. At least as far as Safari is concerned. Take the ability to stroke text, for instance. It has been available in Safari via WebKit since late 2006. Yes, in web development the race is on in some quarters – while real world implementation slows to the speed of plate tectonics. Not that I will use regular stroking on text to any extent as the effect reminds me only too well of what could be accomplished with early versions of QuarkXPress.
Fig. 4. Stroking text in Safari.
The traditional computer screen thus suffers from too low a resolution as compared to the printed page (and what can be had with InDesign these days). That said, we can make good use of a none too obvious side effect of text stroking to slim down our prose. To burn some fat. To remove XXL from the shelves. All it takes is one CSS rule:
.defat { -webkit-text-stroke: 1px transparent; }
Magic! And, like I mentioned, far from intuitive. It just works. As it has been working in Safari since version 3. Which explains rows 5 and 6 in Figure 1.
I will not recommend body tags populated with this rule for global antialiasing. Partly because I have not tried it. Partly because I suspect that it mooches off a user agents’s potentially limited resources.
Fast forward to 2010 and Safari 5. And WebKit – the Merlin of our age. In what can not be anything but an intuitivination (never mind “The Oxford Dictionay”) of the old rule from four years back, the open source evangelists have built a new rule on the foundation of what was already working (see Figure 5). As of today, we can write:
.defat { -webkit-font-smoothing: antialiased; }
and be well rewarded. As I was with rows 7 and 8 in Figure 1.
Fig. 5. Details of text stroking (upper) and font smoothing.
Conclusion: If you want to bleed on the edge, use font-smoothing. If you need to drag versions 3 and 4 along on your safari, use text-stroke. The rest of the world is none the wiser.
During the time when the first incandescent light bulb was demonstrated by Thomas Alva Edison in 1879, he was quoted as saying “We will make electricity so cheap that only the rich will burn candles.” Now, at 4am some 130 years later, it is by his inventions that I can write these words in an otherwise dark room.
He must have been a man with a keen eye for details and I think of him now because of a different attention to detail, however subtle, given by Apple, the computer company. Not surprising to anyone who has used their hardware and software for any length of time, but nevertheless, it is an admirable thing when the common mediocrity is challenged.
These days Leopards are substituted for Snow Leopards, at least as far as computer operating systems go. The shy felix is, however, only comfortable in Intel environments, and I am not fortunate enough to phase out my elderly, nay, distinguished, Macintosh G5 with its IBM PowerPC heart. Back to the old routine: Upgrade as far as possible. Remember System 9.2.2?
As of this writing, Mac OS 10.5.8 promises to be the final version of Leopard and well worth the time and energy (a returning word in this article) spent on going from version 10.5.5. I do not know if the detail was introduced anywhere between 10.5.5 and 10.5.8 but the old light bulb was still there (in the System Preferences panel illuminating Hardware > Energy Saver) in the former and it had been replaced with an image of a politically correct, energy conserving bulb come 10.5.8. As already stated: Subtle. I cannot say why it caught my eye, but it sure brought a smile to my face.
Is it only a matter of time before The Walt Disney Company replaces the 60 watts of Gyro Gearloose’s companion, Little Helper? They might even pull the plug on their maker in his cryogenic habitat – if what is said is true.
I am not in the know as to whether The Edison Electric Light Company would have propagated the idea of energy concervation. My own ultimate energy conservation would, of course, be to stick with the aging G5, defying every customer demanding the latest and the flashiest, turn off the lights and go to bed. I’ll think about it.
I round this off, freely granting Mr. Edison one more quote as it injects hope into my own feeble struggles with so many things: “Genius is one percent inspiration and ninety-nine percent perspiration.”
JavaScript must be enabled and Flash Player installed to appreciate the snow.
A few scattered flakes fell a week ago but melted on touchdown and were lost. Now, that special childhood feeling has returned and I look forward to snug nights and cold whites. Ah, a rhyme, too!
So, this customer wanted an update to an animated GIF advertisment. It was an aging file made by a different designer with ImageReady, the now discontinued Photoshop companion. I said, sure, no problem, send the file.
Of cource, it did not open in Photoshop, or rather, it did not open as the sequence of images I so sorely remember from those days when not every advertiser accepted Flash animations. All I got was a single index-layer with only the first frame of the animation showing. What about import options, then? Video Frames to Layers… looked (somewhat) promising, but alas, the GIF-file was greyed out, not willing to become part of a questionable plot. I cast a sidelong glance at the dusty G4 in the corner, seriously considering a step back in time.
As it turned out, however, I was not the only one with this problem. People had been scratching their heads since the CS3 suit was released in 2007, and had found means to battle the obstacle. At least as far as Windows users are concerned. It seems that Macintosh users (that is me, in there) are more on their own in this matter, but, for some, a change of suffix from “gif” to “mov” combined with a video import as described above, might cut the mustard. For me, it did not.
Adobe washes its hands in the matter and have moved on. Or probably moved sideways if one ponders their solution to the problem: Use Fireworks! A strange move in their effort to streamline Photoshop (an impossible undertaking, by the way). An admirable thing it is to get rid of ImageReady, but leaving things to Fireworks? Hmmm.
Anyway, I will not spend too much energy on this. To save myself the trouble of once more going through it all when next time the problem pops up, I will transfer it all from memory to the archives of these web pages for later retrieval.
The solution
Let us use Eadweard Muybridge’s amazing animation of galloping thoroughbred bay mare Annie G. If we have to go back in time, let us at least do so in style!
1. Fire up Fireworks, no pun intended.
2. From the menu bar, choose:
File > Open…
3. In the Open File window, navigate to the gif-animation, uncheck Open as "Untitled", and hit the <Open> button.
4. When the file opens in Fireworks, hit the Play-button to test the animation. If it does not run, bang your head against a wall, make a cup of tea and join the heroic ranks of researchers. If it runs, choose:
File > Export…
and demand Export: Frames to Files (in Fireworks 9/CS3) or Export: States to Files (in Fireworks 10/CS4). You may want to experiment with the Trim Images option.
That is all there is to it. The original, single file GIF-animation has been broken down into two or more separate “frames”, named something like “muybridge_f01.gif”, “muybridge_f02.gif” etc. If you had not unchecked the Open as "Untitled" option, your sequence would have been named “Untitled_f01.gif” etc.
If you download anything from this site and find it useful, please consider a small donation to Marcelino Norge. They contribute to the schooling of children of poor families in the Andes of Northern Peru.
Today
Tomorrow
Rasta, Norway
Weather forecast unavailable
Quote
Strange about learning; the further I go the more I see that I never knew even existed. A short while ago I foolishly thought I could learn everything – all the knowledge in the world. Now I hope only to be able to know of its existence, and to understand one grain of it.
Charlie in Daniel Keyes’ Flowers for Algernon
Ka of Isis
The tumbling barrel for Bjørn Sortland – graphic designer, lecturer, and former chemical engineer – wherein he can play at handcrafting web sites, experiment at will and ramble on. When you trust him with an assignment, work is delivered on time. And – given a problem is technically sane – he will not give up until a solution is found.
Leave a comment
