Last Comment Bug 470547 - Spread (4th length) for text-shadow not supported
: Spread (4th length) for text-shadow not supported
Status: NEW
: access, css3, dev-doc-needed
Product: Core
Classification: Components
Component: Layout: Text (show other bugs)
: Trunk
: All All
: -- normal with 11 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2008-12-20 05:50 PST by Henri Sivonen (:hsivonen) (Not doing reviews or reading bugmail until 2016-08-01)
Modified: 2012-11-17 01:28 PST (History)
16 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description Henri Sivonen (:hsivonen) (Not doing reviews or reading bugmail until 2016-08-01) 2008-12-20 05:50:54 PST
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 2009-07-16 18:17:32 PDT
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+8 (review requests must explain patch) 2009-07-16 18:40:32 PDT
A much better (and equivalent) spec URL is
http://dev.w3.org/csswg/css3-text/#text-outline
Comment 3 jeffm 2009-07-17 10:58:17 PDT
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 2009-07-17 13:51:40 PDT
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 2010-12-18 15:24:35 PST
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 2011-01-13 09:32:38 PST
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 2011-04-14 15:04:29 PDT
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 2012-09-16 02:22:43 PDT
(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) (Not doing reviews or reading bugmail until 2016-08-01) 2012-09-17 02:27:53 PDT
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] 2012-09-18 00:27:16 PDT
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) (Not doing reviews or reading bugmail until 2016-08-01) 2012-09-18 01:09:41 PDT
(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

Note You need to log in before you can comment on or make changes to this bug.