Re: [css3-images] Fwd: CSS Gradient Notation

On Sun, 15 Jan 2012 17:37:52 -0800, Robert Biggs <rbiggs@ymail.com> wrote:
> I was checking out the latest document http://dev.w3.org/csswg/css3-images
> to check up on the status of CSS gradients. I have to say I was shocked and
> dismayed to see that you're proposition the requirement for prepositions to
> be used with the positional keywords. I was scratching my head for quite
> some time. Is that to make it clearer to English speakers what the keywords
> do? Requiring English preposition will not make it clearer to people who
> don't speak English. If you want to make it more grammatical English, you
> should include the indefinite article, e.g. "to the bottom left". Or maybe
> an adverb or a gerund: "flowing towards the bottom right". And for radial
> gradients: "positioned at the closest side". And while you're at it, you
> could get rid of the hyphens in the radial keywords.
>
> I'm being facetious. When the Webkit guys first presented CSS gradients, the
> Mozilla people complained about the notation being too complicated and came
> up with a simpler notation. I'm sure you laughed at being required to write
> from(color), to(color). Funny how you're now suggesting that we have to use
> prepositions ("to" and "at") with keywords. Don't hobble CSS with English
> grammatical requirements. No body needs an understanding of English grammar
> to write HTML or JavaScript or CSS, until now.
>
> By the way, in Spanish, the word for "to" is "a" and the word for at is "a".
> Spanish speakers will not see your prepositions as a clarification of
> anything.

The "to" keyword was added to linear gradients because there was
significant confusion about whether "top" meant "start from the top
(put the 0% color on the top)" or "point toward the top (put the 100%
color on the top)".

Radial gradients gained keywords in an attempt to make the syntax more
flexible and more readable - previously, for example, you could have a
declaration like "radial-gradient(20% 20%, 30% 30%, black, white)".
It's very unclear what that means - even if you know that one of them
is a position and the other is a size, how can you tell which is
which?  Due to this ambiguity, the syntax also disallowed specifying
just a size without a position.

The new syntax, while not ideal in some ways, solves this problem -
you'd write the previous example as "radial-gradient(30% 30% at 20%
20%, black, white)" which gives you some clues as to which is the size
and which is the position.  As well, it's now possible to specify
either a size or a position alone, and have it parsed unambiguously -
"radial-gradient(30% 30%, black, white)" has an explicit size and
default position, while "radial-gradient(at 20% 20%, black, white)"
has an explicit position and default size.

In Images 4 we plan to add back the ability to control the position of
the focus point, which was present in the original webkit proposal.
The keyword approach we're using now will really shine at that point,
while the original approach of unlabeled comma-separated arguments
would have created the potential for *three* consecutive pairs of
percentages.

CSS, and other web technologies, do not optimize for non-English
speakers.  If an author can't speak English, they'll have many more
problems than this keyword.

I've not made a change to the draft based on this feedback.  If this
is acceptable, please reply!  (If it's unacceptable, I expect you'll
reply as well. ^_^)

~TJ

Received on Tuesday, 17 January 2012 22:52:19 UTC