[css4-background][css4-text] @pattern rule

In a previous mail[1] I already exposed the idea of having an @pattern rule
for defining arbitrary filling patterns as you can see them in many
graphics processing tools. I was asked to split that discussion from the
rule for defining arbitrary text decorations. So here it is again plus some
additional information and ideas about what I have in mind.

@pattern IDENT {
  form: <form> [ , <form> ]*;
  amount: random | <number> | <percentage>;
  distribution: [ random | even ] [ linear | area ];
  size-variation: <percentage>{1, 2};
  rotate: <angle>;
  rotation-variation: <percentage>;

<form> = <url> || line || dot || circle || square || triangle || wavy ||
zigzag || chess || brick

*IDENT* is the name of the pattern.
*'form'* allows specifying an image url and offers several predefined
forms, which are related to the line decorations as well as patterns in
illustration programs.
*'amount'* can be a random number of duplicates, a precise number or a
percentage (relative to the size of the element it is applied to).
*'distribution'* describes the positioning of the duplicates, which can be
randomly or evenly spreaded in one or two dimensions.
*'size-variation'* defines the percentual alternation of the width and
height of the duplicates.
*'rotate'* rotates the duplicates to a specific angle.
*'rotation-variation'* means the percentual alternation of the rotation of
the duplicates.

*Usage examples:*
background-image: stars;
text-fill: stripes; (Just made that property up, but it represents text

All this should be possible with the rule:
[image: Inline image 1]
*Not covered by this draft:*
- exact positioning of individual forms
- colors (text-decoration-color may be enough for this but will need to be
extended to allow keeping the original form color and allow color
- mirroring of patterns
- procedural patterns (wood, marble, noise, etc.)


[1] http://lists.w3.org/Archives/Public/www-style/2012Sep/0462.html

Received on Wednesday, 17 October 2012 21:38:22 UTC