- From: Sebastian Zartner via GitHub <sysbot+gh@w3.org>
- Date: Thu, 02 Jun 2022 20:00:08 +0000
- To: public-css-archive@w3.org
I workmate helped me create a mockup showing two different approaches regarding text decorations.  It shows several things: * The paint order is fill, then shadow(s), then stroke. _But_ SVG defines a `paint-order` property which lets you change the order of fill and stroke. (This property [seems to apply to HTML elements as well](https://drafts.fxtf.org/fill-stroke/#strokes).) In that case the order would be stroke, fill, shadow(s). * The point above emphasizes that the text shadow should start at the edge of the fill and not be influenced by the stroke's edge. If people want the shadow to start at the stroke's edge, they can specify a spread radius. * The upper example shows what I meant in my previous comment. I.e. first the shadows are painted, then the compositing happens. Or more precisely, the paint order and composition steps (for line-through) are 1. fill of text 2. inset text shadows of text 3. stroke of text 4. fill of decoration 5. inset text shadows of decoration 6. stroke of decoration 7. composite everything The order of 1-3 and 4-6 varies between decorations as some are painted below the text, others above. * The lower example composites first and then applies the shadows. The steps for that are 1. fill of text 2. fill of decoration 3. composite those two 4. inset text shadows of composition 6. stroke of composition 7. composite everything Here, the order of 1 and 2 vary depending on the type of decoration. The mockup doesn't show an outset shadow but that would be painted in an eigth step. Though the order would be first the shadow then the composition. I know this would complicate the rendering, though I believe that's what authors expect and what provides the best results. @jensimmons I can't completely follow your example but I assume you mean the lower one. Please correct me if I'm wrong. Though after bringing up this real life example, a photo of you standing in the sun and holding some giant letters cut out of a cardboard to illustrate what you wrote would make my day! 😆 Sebastian -- GitHub Notification of comment by SebastianZ Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7251#issuecomment-1145287101 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 2 June 2022 20:00:09 UTC