[css3-values] More "random" issues

An idea for the "Values and units" module: random values.

(For the record: The idea is due to a colleague of mine, François 
Daoust.)

Properties with numeric (real) values are probably easiest to give 
random values, e.g., like this:

    P { margin-left: calc(2em + random * 1em) }
    SPAN { transform: rotate(calc(random * 6deg - 3deg)) }

Properties with integer values, keywords, colors, or strings are a bit 
harder, at least in terms of syntax, but not impossible. Maybe they are 
also less interesting in practice.

Random selectors and random media queries are probably not useful.

A single, uniform random distribution is probably enough, but a normal 
(Gaussian) distribution could also be added.

The Specified Value in this case is the keyword 'random' and the 
Computed Value is a specific number. In other words, child elements 
inherit a concrete value and do not compute a new random value 
themselves.


There are many possibilities for the syntax, I don't know yet which one 
would be easiest to remember:

A) The keyword 'random', which produces a number between 0 and 1 (both 
inclusive) with uniform distribution. It is only recognized within 
calc(), min() and max(), i.e., something like 'counter-increment: 
random' or 'font-family: random' would still refer to a counter called 
"random" and a font called "random" just as they do now.

B) A functional notation 'random(<number>)', which produces a random 
number uniformly distributed between 0 and <number> (both inclusive). 
The number may not be negative. The notation may only occur inside 
calc(), min() and max().

C) A functional notation 'random(<number> [ , <number> ]? )', which 
stands for a random number uniformly distributed between the first and 
the second number (both inclusive). If the second is missing, it is 0. 
The numbers do not have to be in increasing order. The notation may only 
occur inside calc(), min() and max().

D) A functional notation 'random(<integer>)' which produces a random 
integer, rather than a real number, between 0 and <integer> (both 
inclusive). The <integer> must not be negative. The notation may only 
occur inside calc(), min() and max(). This one is maybe the most 
flexible, as you can either randomly choose between a small number of 
discreet values ('random(1)' gives either 0 or 1) or simulate real 
numbers ('calc(random(2147483648) / 2147483648)'). You could create dice 
in CSS with this...

Etc.



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Wednesday, 12 October 2011 12:53:44 UTC