Use -webkit-text-stroke instead of SVG filters in Safari

[arnavion]

Use -webkit-text-stroke instead of SVG filters in Safari

[Arnavion]

text-stroke cannot have different dimensions for width and height, and cannot be blurred.

[rcombs]

Which sucks, but it's not as bad as this:

[kunaldes]

Yeah, it's spelled "Whoa".

[Arnavion]

Can you not just set RendererSettings.enableSvg to false then?

[rcombs]

4 text-shadows simulating 1px text stroke (as in libjass):

-webkit-text-stroke: 1px red;

The 4-shadow approach gives more flexibility, but -webkit-text-stroke looks much better in the simple dialogue case. Maybe use it when SVG is disabled, the stroke is the same in both directions, and the stroke is 1px or close to it? (it starts overlapping the fill above 1px, though text-shadow doesn't look much better, having visible holes and squaring off curves)

[Arnavion]

ASS outlines are outside the shape. text-stroke is the width of the pen used to write the shape, so half of it is outside the shape and half inside. So a 1px outline would require a 2px text-stroke, of which 1px will be outside and 1px will be inside. But let's ignore that because it was also the intention of the author to have a 1px border around the shape, not 2px.

http://plnkr.co/edit/qVBgvGPmo5LjtN0LZY8T?p=preview

text-stroke looks worse for both 1px and 3px. Rather than outlining the text it results in shapes appearing thinner (after all, its purpose is to set the pen width, not to create outlines).

text-shadow looks nearly identical to filter for both. In particular, they both have jagged outlines at the extremeties of the shapes, although they're softer with the filter (*).

The above is without blur on the outlines. Authors will usually blur large outlines, which will make the text-shadow lose the jaggedness somewhat and the filter one completely. text-stroke will continue to look terrible.

(Note that libjass did used to use text-stroke. I moved away from it for the above reasons.)

(*) The presence of both softness and jaggedness in the filter outline is because of how it's generated. The SVG dilate operation can take both a horizontal and vertical length to dilate the original shape to, but the dilation is rectangular, not elliptical as ASS outlines are. So instead of using a single dilate to generate the whole outline, libjass stacks multiple dilated rectangles of decreasing width and increasing height to approximate an ellipse. The step of each rectangle is 1px along the shorter dimension, which leads to jaggedness, but the other dimension will have fractional pixel lengths, leading to softness from subpixel rendering.

[rcombs]

Alrighty, thanks for the explanation. Buggy browsers are happy funtimes.