W3C home > Mailing lists > Public > www-style@w3.org > October 2012

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

From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 17 Oct 2012 23:37:54 +0200
Message-ID: <CAERejNZ8OOcwCBkkUoQtRMxjb1ajCwJYiA1UicgG6wJZya8qjg@mail.gmail.com>
To: www-style list <www-style@w3.org>
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.

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

where
<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
filling.)

*Examples:*
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
variations)
- mirroring of patterns
- procedural patterns (wood, marble, noise, etc.)

Sebastian

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


Patterns.png
(image/png attachment: Patterns.png)

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

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT