- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 29 Feb 2012 18:59:23 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv5345
Modified Files:
Overview.html Overview.src.html
Log Message:
Editorial tweaking to the way I describe the scaling of radial-gradient() ellipses, based on discussed in the thread. Editorial tweaking to the way I describe the linear-gradient() arguments to make it less wall-of-text. Added actual normative definition of how to render both gradients (how did I miss this previous?). Minor random wording tweaks throughout this section.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.320
retrieving revision 1.321
diff -u -d -r1.320 -r1.321
--- Overview.html 29 Feb 2012 00:59:32 -0000 1.320
+++ Overview.html 29 Feb 2012 18:59:20 -0000 1.321
@@ -1085,6 +1085,8 @@
<h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
linear-gradient() syntax</h4>
+ <p>The linear gradient syntax is:
+
<pre class=prod><code>
<dfn
id=linear-gradient-type><linear-gradient></dfn> = linear-gradient(
@@ -1100,43 +1102,49 @@
and determines how color-stops are positioned. It may be omitted; if so,
it defaults to "to bottom".
- <p>The <a href="#gradient-line"><i>gradient line</i></a> may be specified
- in two different ways. The first is by specifying the angle the <a
- href="#gradient-line"><i>gradient line</i></a> should assume; for the
- purposes of this argument, 0deg points upwards, 90deg points toward the
- right, and positive angles go clockwise. The starting-point and
- ending-point of the <a href="#gradient-line"><i>gradient line</i></a> are
- determined by extending a line in both directions from the center of the
- <a href="#gradient-box"><i>gradient box</i></a> at the angle specified. In
- the direction of the angle, the ending-point is the point on the <a
- href="#gradient-line"><i>gradient line</i></a> where a line drawn
- perpendicular to the <a href="#gradient-line"><i>gradient line</i></a>
- would intersect the corner of the <a href="#gradient-box"><i>gradient
- box</i></a> in that direction. The starting-point is determined
- identically, except in the opposite direction of the angle.
+ <p>The <a href="#gradient-line"><i title="gradient line">gradient
+ line's</i></a> direction may be specified in two ways:
- <p>Alternately, the direction may be specified with keywords that denote
- the direction. If the argument is ‘<code class=css>to
- top</code>’, ‘<code class=css>to right</code>’,
- ‘<code class=css>to bottom</code>’, or ‘<code
- class=css>to left</code>’, the gradient must be rendered identically
- to ‘<code class=css>0deg</code>’, ‘<code
- class=css>90deg</code>’, ‘<code
- class=css>180deg</code>’, or ‘<code
- class=css>270deg</code>’, respectively. If the argument specifies a
- corner to angle towards, the gradient must be rendered identically to an
- angle-based gradient with an angle chosen such that the endpoint of the
- gradient is in the same quadrant as the indicated corner, and a line drawn
- perpendicular to the gradient line through the center of the <a
- href="#gradient-box"><i>gradient box</i></a> intersects the two
- neighboring corners.
+ <dl>
+ <dt>by angle
+
+ <dd>For the purpose of this argument, 0deg points upward, and positive
+ angles represent clockwise rotation, so 90deg point toward the right.
+
+ <dt>by keyword
+
+ <dd>
+ <p>If the argument is ‘<code class=css>to top</code>’,
+ ‘<code class=css>to right</code>’, ‘<code class=css>to
+ bottom</code>’, or ‘<code class=css>to left</code>’,
+ the angle of the <a href="#gradient-line"><i>gradient line</i></a> is
+ ‘<code class=css>0deg</code>’, ‘<code
+ class=css>90deg</code>’, ‘<code
+ class=css>180deg</code>’, or ‘<code
+ class=css>270deg</code>’, respectively.</p>
+
+ <p>If the argument instead specifies a corner of the box such as
+ ‘<code class=css>to top left</code>’, the gradient line must
+ be angled such that it points into the same quadrant as the specified
+ corner, and a line drawn perpendicular to the <a
+ href="#gradient-line"><i>gradient line</i></a> through the center of the
+ <a href="#gradient-box"><i>gradient box</i></a> intersects the two
+ neighboring corners.</p>
+ </dl>
+
+ <p>Starting from the center of the <a href="#gradient-box"><i>gradient
+ box</i></a>, extend a line at the specified angle in both directions. The
+ ending-point is the point on the <a href="#gradient-line"><i>gradient
+ line</i></a> where a line drawn perpendicular to the <a
+ href="#gradient-line"><i>gradient line</i></a> would intersect the corner
+ of the <a href="#gradient-box"><i>gradient box</i></a> in the specified
+ direction. The starting-point is determined identically, but in the
+ opposite direction.
<p class=note>It is expected that the next level of this module will
provide the ability to define the gradient's direction relative to the
current text direction and writing-mode.
- <p>
-
<div class=example>
<div style="overflow: hidden"> <img
alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box. The starting-point and ending-point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]"
@@ -1164,7 +1172,13 @@
arbitrary location markers - the starting-point defines where 0%, 0px, etc
are located when specifying color-stops, and the ending-point defines
where 100% is located. Color-stops are allowed to have positions before 0%
- or after 100%.</p>
+ or after 100%.
+
+ <p>The color of the gradient at any point is determined by first finding
+ the unique line passing through that point that is perpendicular to the <a
+ href="#gradient-line"><i>gradient line</i></a>. The point's color is then
+ the color of the <a href="#gradient-line"><i>gradient line</i></a> at the
+ point where this line intersects it.</p>
<!-- ====================================================================== -->
<h4 class=no-toc id=linear-gradient-examples><span class=secno>4.1.2.
@@ -1239,14 +1253,14 @@
given as a list, just as for ‘<code
class=css>linear-gradient()</code>’. Starting from the <i>center</i>
and progressing towards (and potentially beyond) the <a
- href="#ending-shape"><i>ending shape</i></a> concentric ellipses are drawn
- and colored according to the specified color stops.</p>
+ href="#ending-shape"><i>ending shape</i></a> uniformly-scaled concentric
+ ellipses are drawn and colored according to the specified color stops.</p>
<!-- ====================================================================== -->
<h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
radial-gradient() Syntax</h4>
- <p>The radial gradient syntax is defined as follows:
+ <p>The radial gradient syntax is:
<pre>
<dfn
@@ -1300,6 +1314,9 @@
extending infinitely in both directions, rather than being finite line
segments.
+ <p>If the ending-shape is an ellipse, its axises are aligned with the
+ horizontal and vertical axises.</p>
+
<p>Both ‘<code class=css>circle</code>’ and ‘<code
class=css>ellipse</code>’ gradients accept the following keywords
as their <a href="#size"><i><size></i></a>:
@@ -1413,9 +1430,11 @@
yellow. Locations greater than 100% simply specify a location a
correspondingly greater distance from the center of the gradient.
- <p>When drawing the concentric ellipses of the gradient, the color of each
- ellipse is the color of the <a href="#gradient-ray"><i>gradient
- ray</i></a> at the point where the ellipse intersects the ray.
+ <p>The color of the gradient at any point is determined by first finding
+ the unique ellipse passing through that point with the same center and
+ ratio between major and minor axises as the ending-shape. The point's
+ color is then the color of the <a href="#gradient-ray"><i>gradient
+ ray</i></a> at the point where this ellipse intersects it.
<h4 class=no-toc id=degenerate-radials><span class=secno>4.2.3. </span>
Degenerate Radial Gradients</h4>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.330
retrieving revision 1.331
diff -u -d -r1.330 -r1.331
--- Overview.src.html 29 Feb 2012 00:59:32 -0000 1.330
+++ Overview.src.html 29 Feb 2012 18:59:21 -0000 1.331
@@ -565,6 +565,8 @@
<h4 class='no-toc' id='linear-gradient-syntax'>
linear-gradient() syntax</h4>
+ <p>The linear gradient syntax is:</p>
+
<pre class=prod><code>
<dfn id='linear-gradient-type'><linear-gradient></dfn> = linear-gradient(
[ [ <angle> | to <side-or-corner> ] ,]?
@@ -577,23 +579,23 @@
which gives the gradient a direction and determines how color-stops are
positioned. It may be omitted; if so, it defaults to "to bottom".</p>
- <p>The <i>gradient line</i> may be specified in two different ways. The
- first is by specifying the angle the <i>gradient line</i> should assume;
- for the purposes of this argument, 0deg points upwards, 90deg points toward
- the right, and positive angles go clockwise.
- The starting-point and ending-point of the <i>gradient line</i> are
- determined by extending a line in both directions from the center of the
- <i>gradient box</i> at the angle specified. In the direction of the angle, the ending-point
- is the point on the <i>gradient line</i> where a line drawn perpendicular
- to the <i>gradient line</i> would intersect the corner of the <i>gradient box</i> in that
- direction. The starting-point is determined identically, except in the
- opposite direction of the angle.</p>
+ <p>The <i title="gradient line">gradient line's</i> direction may be specified in two ways:</p>
- <p>Alternately, the direction may be specified with keywords that denote the direction. If the argument is ''to top'', ''to right'', ''to bottom'', or ''to left'', the gradient must be rendered identically to ''0deg'', ''90deg'', ''180deg'', or ''270deg'', respectively. If the argument specifies a corner to angle towards, the gradient must be rendered identically to an angle-based gradient with an angle chosen such that the endpoint of the gradient is in the same quadrant as the indicated corner, and a line drawn perpendicular to the gradient line through the center of the <i>gradient box</i> intersects the two neighboring corners.</p>
+ <dl>
+ <dt>by angle</dt>
+ <dd>For the purpose of this argument, 0deg points upward, and positive angles represent clockwise rotation, so 90deg point toward the right.</dd>
- <p class='note'>It is expected that the next level of this module will provide the ability to define the gradient's direction relative to the current text direction and writing-mode.</p>
+ <dt>by keyword</dt>
+ <dd>
+ <p>If the argument is ''to top'', ''to right'', ''to bottom'', or ''to left'', the angle of the <i>gradient line</i> is ''0deg'', ''90deg'', ''180deg'', or ''270deg'', respectively.</p>
- <p>
+ <p>If the argument instead specifies a corner of the box such as ''to top left'', the gradient line must be angled such that it points into the same quadrant as the specified corner, and a line drawn perpendicular to the <i>gradient line</i> through the center of the <i>gradient box</i> intersects the two neighboring corners.</p>
+ </dd>
+ </dl>
+
+ <p>Starting from the center of the <i>gradient box</i>, extend a line at the specified angle in both directions. The ending-point is the point on the <i>gradient line</i> where a line drawn perpendicular to the <i>gradient line</i> would intersect the corner of the <i>gradient box</i> in the specified direction. The starting-point is determined identically, but in the opposite direction.</p>
+
+ <p class='note'>It is expected that the next level of this module will provide the ability to define the gradient's direction relative to the current text direction and writing-mode.</p>
<div class=example>
<div style="overflow: hidden">
@@ -619,6 +621,8 @@
the ending-point defines where 100% is located. Color-stops are allowed
to have positions before 0% or after 100%.</p>
+ <p>The color of the gradient at any point is determined by first finding the unique line passing through that point that is perpendicular to the <i>gradient line</i>. The point's color is then the color of the <i>gradient line</i> at the point where this line intersects it.</p>
+
<!-- ====================================================================== -->
<h4 class='no-toc' id='linear-gradient-examples'>
@@ -676,20 +680,14 @@
of the <i>gradient box</i> to the other as with linear gradients, they instead emerge from
a single point and smoothly spread outward in a circular or elliptical shape.</p>
- <p>A radial gradient is specified by indicating the center
- of the gradient (where the 0% ellipse will be) and the size
- and shape of the <dfn>ending shape</dfn> (the 100% ellipse). Color stops
- are given as a list, just as for ''linear-gradient()''.
- Starting from the <i>center</i> and progressing towards (and potentially
- beyond) the <i>ending shape</i> concentric ellipses are drawn and colored
- according to the specified color stops.</p>
+ <p>A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the <dfn>ending shape</dfn> (the 100% ellipse). Color stops are given as a list, just as for ''linear-gradient()''. Starting from the <i>center</i> and progressing towards (and potentially beyond) the <i>ending shape</i> uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.</p>
<!-- ====================================================================== -->
<h4 class='no-toc' id='radial-gradient-syntax'>
radial-gradient() Syntax</h4>
- <p>The radial gradient syntax is defined as follows:
+ <p>The radial gradient syntax is:
<pre>
<dfn id='radial-gradient-type'><radial-gradient></dfn> = radial-gradient(
@@ -727,6 +725,8 @@
<i>gradient box</i> edges as extending infinitely in both directions, rather than
being finite line segments.
+ <p>If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises.</p>
+
<p>Both ''circle'' and ''ellipse'' gradients accept the following keywords
as their <i><size></i>:
@@ -799,7 +799,7 @@
<p>Color-stops are placed on a <dfn>gradient ray</dfn>, similar to the <i>gradient line</i> of linear gradients. The <i>gradient ray</i> is anchored at the center of the gradient and extends toward the right. The 0% location is at the start of the <i>gradient ray</i>, and the 100% location is on the point where the <i>gradient ray</i> intersects the <i>ending shape</i>. Negative locations can be specified; though negative locations are never directly consulted for rendering, they can affect the color of non-negative locations on the <i>gradient ray</i> through interpolation. For example, ''radial-gradient(red -50px, yellow 100px)'' produces an elliptical gradient that starts with a reddish-orange color in the center (specifically, #f50) and transitions to yellow. Locations greater than 100% simply specify a location a correspondingly greater distance from the center of the gradient.</p>
- <p>When drawing the concentric ellipses of the gradient, the color of each ellipse is the color of the <i>gradient ray</i> at the point where the ellipse intersects the ray.</p>
+ <p>The color of the gradient at any point is determined by first finding the unique ellipse passing through that point with the same center and ratio between major and minor axises as the ending-shape. The point's color is then the color of the <i>gradient ray</i> at the point where this ellipse intersects it.</p>
<h4 class="no-toc" id="degenerate-radials">
Degenerate Radial Gradients</h4>
Received on Wednesday, 29 February 2012 18:59:28 UTC