470547 - Spread (4th length) for text-shadow not supported

Status: RESOLVED DUPLICATE of bug 655590

(Core :: Layout: Text and Fonts, defect)

Description

[Henri Sivonen (:hsivonen)]

Build ID:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2a1pre) Gecko/20081220 Minefield/3.2a1pre

Steps to reproduce:
 1) Load http://hsivonen.iki.fi/test/moz/text-outline.html

Actual results:
No outline.

Expected results:
Green outline.

See:
http://dev.w3.org/cvsweb/~checkout~/csswg/css3-text/Overview.html?&content-type=text/html;%20charset=utf-8#text-outline

Additional info:
Video subtitling commonly uses white text with a thick black outline to make the text visible on all backgrounds without having to resort to a solid rectangle background box for the text. If/when captioning/subtitling support is added for <video> in Gecko, it would be good to have this CSS feature available. (I'm assuming that timed text will be laid out using the CSS formatter one way or another.)

Comment 1

[jeffm]

I wish I knew c++ so I could lend a hand - but I do have a question: I see in reading the specs that essentially the text-outline can be achieved through the same sort of mechanism as text-shadow (in fact text-outline can even take a blur radius in addition to a width).  Would it therefore be possible to re-use the existing mechanism for text-shadows in Moz 1.9.1 to implement text-outlines in a fairly straightforward manner?

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

A much better (and equivalent) spec URL is
http://dev.w3.org/csswg/css3-text/#text-outline

Comment 3

[jeffm]

Thanks dbaron,

That's actually the version of the spec I was looking at without realizing it. =)  Following this version a text-outline is basically a text-shadow with the added feature of a spread-radius (ala box-shadows) but with slightly different css-syntax needing parsed to get there.

Now a follow on question - I know this is a spec related issue and not a moz-related issue but I'm wondering if the following would be a hard thing to implement technically or not. (I'd like to propose this to the CSS WG and I know that "difficulty of implementing a feature" can be an issue) -  I have seen a style of text outlining with a double outline that looks very cool when done well.  You have the color of the letter, than a different outline color, and then a second "outline" beyond that that is the same color as the initial text. (For instance white text, with a green outline with a little bit of a white outline beyond that). 

I tried to find an example online but didn't come up with one in my quick skimming.  The effect is that the outer outline/color seems to be a continuation of the character.

This could be easily achieved if multiple text-outlines were possible (as multiple text-shadows are) but the spec doesn't have the option to contain multiple text-outlines.

How hard would it be to pull off multiple text-outlines? (especially if you can reuse a lot of the same machinery as for text-shadows)?

Thanks for any input.

Comment 4

[fantasai]

One thing to consider in that example is whether the text outline is an outline the way 'text-outline' is defined (i.e. drawn outside the glyph bounds) or if it's actually stroking the glyph outline (i.e. drawn inside or on the glyph bounds). That would be a separate feature, I think jdaggett considering it for the fonts spec. The main use case for text-outline is to make the text more visible on a noisy background; the original requirement came from the Timed Text WG for closed captioning.

Comment 5

[Jordan Osete]

It seems to me that text-shadow and text-outline are quite redundant, with needless limitations:
- you can only have one outline
- you cannot offset the outline
Why not simply add a spread radius to text-shadow instead ? The number of effects that can be achieved are much higher this way. I've made a prototype of what could be done with the Canvas tag (and I think I got a little carried away, but still, it's fun to play with): http://www.fruitsofts.com/testcases/canvas_text-shadow.htm

Comment 6

[Eric A. Meyer]

Though I agree with Jjordan that the two properties seem a bit redundant, I also agree that this seems like a really easy thing to implement, given support for text-shadow already exists.  Is there something missing from that assumption?

Comment 7

[Jason Ng]

The line in the css text level 3 spec about text-shadow, now says it's the same as box-shadow except that inset is not allowed.  Which means that spread radius can be used.

That same document is also mentioning how text-outline might be redundant because of this.

Comment 8

[Thomasy]

(In reply to David Baron [:dbaron] from comment #2)
> A much better (and equivalent) spec URL is
> http://dev.w3.org/csswg/css3-text/#text-outline

It seems that text-outline is removed from http://www.w3.org/TR/css3-text/ 

So we can close this bug?

Comment 9

[Henri Sivonen (:hsivonen)]

CSS WG minutes say:

   - RESOLVED: Drop 'text-outline' since the new spread argument to
               'text-shadow' can handle it.

Morphing bug accordingly.

Comment 10

[Jean-Yves Perrier [:teoli]]

AFAIK this decision of 2011 has never been reflected in a draft (even an ED). The latest draft (of the CSS Text Decoration Module Level 3 now) still have:
"Values are interpreted as for ‘box-shadow’ [CSS3BG]. (But note that spread values are not allowed.)"

This is coherent with the syntax (Draft date 2012/09/05):
none | [ <length>{2,3} && <color>? ]# 

and not

none | [ <length>{2,4} && <color>? ]# 

See http://dev.w3.org/csswg/css3-text-decor/#text-shadow

Maybe the decision has been reverted?

Comment 11

[Henri Sivonen (:hsivonen)]

(In reply to Jean-Yves Perrier [:teoli] from comment #10)
> Maybe the decision has been reverted?

No. The feature is on Level 4 instead of Level 3: http://dev.w3.org/csswg/css4-text/#text-shadow