added support for unlimited and blurred text-shadows

[mikyter]

This patch adds support for "blurry" text-shadows and unlimted shadows in IE.
The canvas engine uses the g.shadowColor, g.shadowBlur, ... properties to draw the shadow. When using multiple shadows, it simply draws the text off-screen and adjusts the shadow offset to render the shadow on the right spot for all except the last shadow.
The vml engine clones the v:shape-tags and uses IE's filters to set opacity and blur. It also manages the tag order to get the right rendering order.

Known Issues:

• Antialising doesn't work with alpha values below 1.0 in IE (only for the shadows). When used with filters the text gets an ugly black outline.
• Antialising is deactivated for the shadows when using blurring in IE but this shouldn't be a problem.
• When changing the textShadow option on hover, the number of shadows must remain the same or the vml engine will screw up. (It fails to find the right shadow/text tags.)

This patch needs probably some more testing but it works at least with IE 6-8 and Firefox 5.0. A demo page is here: http://dev.gptest.de/fonts/

[rehandalal]

I would really like to see this added in. This would be extremely useful and seems to be a glaring deficiency in the current version.

[sorccu]

Hi,

Could you do some more testing? One of the main issues I have right now is that the amount of supported browsers (and especially their many versions) are becoming too cumbersome to test, which is part of the reason why there have been no new releases for quite some time. Obviously, this will not work on older versions of Firefox or any other older browser that doesn't support canvas shadows. Might want to make sure that they at least fail silently if nothing else. You don't have to test all the browsers but please at least try to get to a level where you are fairly confident (in your mind) that it would work anywhere, if it isn't so yet :)

I do like your code, but could you perhaps change it so that there is always a space between "if" and "(", and the same for "for" and others? Also, in the filter styles there are no spaces before/after the + operator. I'd like to have them there. Yeah, these are very small issues but I'd like to keep the style the same everywhere.

Also, unless it was like that from the start, I would like to avoid known issue number 3.

Great work otherwise!

Simo

[rehandalal]

I have tested the following:
FF5.0 - Works
FF6.0 - Works
Chrome 13.0 - Works
iOS 4.3 Safari - Partial (The red shadow displays, all other shadows are hidden)
Safari for Windows 5.1 - Works
Opera 11.5 - Works
IE9 - Failed

[mikyter]

I'll look into the problems with IE9 and the hover issue. The extra spaces won't be a problem. Hopefully I'll have the changes up tomorrow.

Thanks for the great feedback!

[mikyter]

Well, it took longer than I expected.

The hover issue in IE is fixed by simply adding invisible transparent shadows to the state (normal / hover) with less shadows. This solution avoids adding or removing shapes from the canvas which caused a mess in my tests.
The issues with IE9 could be fixed by adding a doctype to the test HTML file and putting the Vegur.font.js file on the same domain. I don't know what happens if you use another doctype than HTML5 but the worst thing that could happen would be that transparency and blurring would no longer work.

The patch should revert to solid shadows if the browser doesn't support blurred shadows.
The only problems with unsupported browsers so far are:

• No shadows at all (The fallback doesn't seem to be used).
• Only the red shadow is shown without blurring (I think the canvas support in those browsers is broken).

Until now, the script just checks if the property g.shadowBlur exists to decide if the browser is capable of drawing blurred shadows. I don't know if there's any better way but if I can find one the aforementioned problems should be solved by that.

I'm still testing but at least it doesn't break Cufon so far.

[mikyter]

It should now work in all browsers supported by Cufon. The only browsers I couldn't test are iOS and Opera Mobile.

[rehandalal]

I have tested in iOS 4.3 Safari and it works however only the first (red) shadow shows. It has blur supported but the secondary and tertiary shadows are not displayed.

[mikyter]

Weird, is the offset right? I updated the test site and it should use the fallback for now.

[rehandalal]

The offset was right but only the red shadow was showing.

Now when I check it I see the red and the green shadow but not the light grey shadow and there is no blurring.

[mikyter]

@rehandalal: Could you please test the new patch?

The red shadow should be blurred again and the other shadows should be showing without blurring. I don't know how to fix the issue with the other shadows but most people will probably need only one shadow, wouldn't they?

Are there any issues left?

[rehandalal]

@mikyter I checked it again in iOS 4.3 Safari and the red shadow appears blurred. The green shadow appears but is not blurred. The grey shadow does not appear at all.

[mikyter]

The grey shadow appears but can't be seen without blur because it is in the same place as the normal text.

It seems the trick I used for multiple shadows doesn't work on iOS but at least one shadow is blurred. As long as you don't need more there shouldn't be a problem.

I think that's the only problem left.

[martinbethann]

Just wanted to let you know that you're using -10000in for the text-indent and that breaks safari and mobile chrome when -webkit-transform: translateZ(0) is used on the page. The max for this property is -9999px. Updating to this fixed it. Google maps uses translate z to turn on hardware acceleration so any page that uses and cufon and a map will result in a weird white rending issue.

Also, this script adds a white square between words on android. All versions from what I can tell. A fix has not yet been found.

Thanks!