[css-text-decor] @text-decoration rule (was Re: [css3-text-decor][css4-background] @pattern for defining filling and decoration patterns)

Rafal Pietrak had some questions related to this.[1] So I thought I pick
this topic up again.

1. The syntax looks elaborated (and capable), but I cannot see how did
> you achieved the "party" and "water splalsh" effects. Can you pls
> provide relevant styling snippets for those effects?


They could look like this (some properties may not follow exactly the
syntax rules defined earlier like e.g. form allowing multiple values:

Party:
@text-decoration party {
  form: url(partyhat1.png), url(partyhat2.png);
  amount: random;
  distribution: random area;
  size-variation: 0;
  rotate: 20deg;
  rotation-variation: 10%;
  position: overline;
  order: in-front;
}

Water splash:
@text-decoration splash {
  form: url(splash.png);
  amount: 1;
  distribution: even area;
  position: line-through 50%;
  order: in-front;
}

(BTW: effects like party & water splash are spectacular, but how to control
> them over line
> breaks?)
>
For 'Party' it's easy as the party hats would be distributed over the
lines. Decorations like 'Water splash' or 'Crossed out' would probably just
be cut off at the end of the line and continue on the next line, i.e. the
decorations only vertically expand over one line, not multiple lines.


> 2. I don't see how you define the z-index positioning of your
> text-decoration with respect to front-text and background (possibly with
> images). Can you elaborate?
>
The order property handles this.
'in-front': The decoration will be in front of the text, so it may cover
parts of the text.
'behind': The decoration will be behind the text (but in front of a
possible background).


> 3. have you considered supporting text shadowing over underlines the
> guys at medium did?
>
Text shadowing would work the same as it does now. So it styles the text
and also the decoration.
The guys at Medium actually use a background image (a linear gradient) for
underlining, so this is unrelated.

Sebastian

[1] http://lists.w3.org/Archives/Public/www-style/2014Jul/0154.html