W3C home > Mailing lists > Public > public-css-commits@w3.org > July 2011

csswg/css3-images Overview.html,1.108,1.109 Overview.src.html,1.114,1.115

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 01 Jul 2011 23:00:13 +0000
To: public-css-commits@w3.org
Message-Id: <E1Qcmh3-0005qr-Jd@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv22401

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Swapped keywords back to their earlier meaning and added an issue over them, for WD publication.


Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.108
retrieving revision 1.109
diff -u -d -r1.108 -r1.109
--- Overview.html	9 Jun 2011 23:17:10 -0000	1.108
+++ Overview.html	1 Jul 2011 23:00:11 -0000	1.109
@@ -20,7 +20,7 @@
 
    <h1>CSS Image Values and Replaced Content Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 June 2011</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 July 2011</h2>
 
    <dl>
     <dt>Latest Version:
@@ -433,10 +433,11 @@
     the SVG directly.</small></p>
   </div>
 
-  <p class=note>Note however that a UA that doesn't understand the media
-   fragments notation will display the entirety an image specified with
-   &lsquo;<code class=css>url</code>&rsquo;. However, since URLs with media
-   fragment identifiers can also be used in the &lsquo;<code
+  <p class=note>Unfortunately, a UA that doesn't understand the media
+   fragments notation will ignore the fragment and simply display the
+   entirety of an image specified with &lsquo;<code
+   class=css>url</code>&rsquo;. However, since URLs with media fragment
+   identifiers can also be used in the &lsquo;<code
    class=css>image()</code>&rsquo; notation defined below, authors can take
    advantage of CSS's forward-compatible parsing rules to provide a fallback
    when using an image fragment URL:
@@ -780,28 +781,22 @@
    <a href="#gradient-line"><i>gradient-line</i></a> are determined by
    extending a line in both directions from the center of the box. If a
    single keyword is specified, the line assumes the necessary angle to place
-   the ending-point of the <a href="#gradient-line"><i>gradient-line</i></a>
-   in the center of the side specified by the keyword; if two keywords are
-   specified, the line assumes the necessary angle to place the ending-point
-   of the <a href="#gradient-line"><i>gradient-line</i></a> in the specified
-   corner of the box. The starting-point of the gradient-line is then where
-   the line intersects the opposite side or corner of the box.
-
-  <p class=note>This means that the keyword &lsquo;<code
-   class=property>bottom</code>&rsquo; (the default) makes the gradient point
-   towards the bottom, equivalent to specifying &lsquo;<code
-   class=css>180deg</code>&rsquo;. The keywords &lsquo;<code class=css>top
-   left</code>&rsquo; make the gradient point towards the top-left corner of
-   the box, which is equivalent to an angle somewhere between 0deg and 90deg
-   (exclusive).
+   the starting-point of the <a
+   href="#gradient-line"><i>gradient-line</i></a> in the center of the side
+   specified by the keyword; if two keywords are specified, the line assumes
+   the necessary angle to place the starting-point of the <a
+   href="#gradient-line"><i>gradient-line</i></a> in the specified corner of
+   the box. The ending-point of the gradient-line is then where the line
+   intersects the opposite side or corner of the box.
 
-  <p class=note>The behavior of keywords is now exactly opposite what it has
-   been for a long time. Previously, specifying &lsquo;<code
-   class=property>top</code>&rsquo; made it start at the top and point down,
-   but feedback suggests that this was confusingly different from how
-   &lt;angle>s worked: giving an &lt;angle> makes the gradient point towards
-   the specified direction, while giving keywords made the gradient point
-   <em>away</em> from the specified side/corner.
+  <p class=issue>This usage of keywords appears to be subtly confusing. When
+   you ask solely about how keywords should work, most people prefer the
+   above model (keyword denotes starting point). Similarly, most people
+   prefer the way angles currently work. When you ask about whether "bottom"
+   and "0deg" should be the same direction or opposite, though, most people
+   prefer them to be opposite, despite that being contradictory with one of
+   their previous answers. I am exploring alternate solutions that resolve
+   this problem of expectations.
 
   <div class=example>
    <div style="overflow: hidden"> <img alt="[An image showing a box with a
@@ -849,10 +844,10 @@
    <p>Below are various ways of specifying a basic vertical gradient:</p>
 
    <pre><code>linear-gradient(yellow, blue);
-linear-gradient(bottom, yellow, blue);
+linear-gradient(top, yellow, blue);
 linear-gradient(180deg, yellow, blue);
-linear-gradient(top, blue, yellow);
-linear-gradient(bottom, yellow 0%, blue 100%);</code></pre>
+linear-gradient(bottom, blue, yellow);
+linear-gradient(top, yellow 0%, blue 100%);</code></pre>
 
    <p><img alt="" src=linear1.png></p>
   </div>
@@ -860,7 +855,7 @@
   <div class=example>
    <p>This gradient goes from the top-left to the bottom-right corner.</p>
 
-   <pre><code>linear-gradient(bottom right, yellow, blue);</code></pre>
+   <pre><code>linear-gradient(top left, yellow, blue);</code></pre>
 
    <p><img alt="" src=linear2.png></p>
   </div>
@@ -2355,26 +2350,26 @@
       explicit form.
 
      <li>Otherwise, if the direction is specified as a single keyword, change
-      &lsquo;<code class=property>top</code>&rsquo; to &lsquo;<code
+      &lsquo;<code class=property>bottom</code>&rsquo; to &lsquo;<code
       class=css>0deg</code>&rsquo;, &lsquo;<code
-      class=property>right</code>&rsquo; to &lsquo;<code
+      class=property>left</code>&rsquo; to &lsquo;<code
       class=css>90deg</code>&rsquo;, &lsquo;<code
-      class=property>bottom</code>&rsquo; to &lsquo;<code
+      class=property>top</code>&rsquo; to &lsquo;<code
       class=css>180deg</code>&rsquo;, or &lsquo;<code
-      class=property>left</code>&rsquo; to &lsquo;<code
+      class=property>right</code>&rsquo; to &lsquo;<code
       class=css>270deg</code>&rsquo;.
 
      <li>Otherwise, if the direction is specified as two keywords, change the
       direction to an &lt;angle> in the following ranges that would produce
-      an equivalent gradient: for &lsquo;<code class=css>top
-      right</code>&rsquo; or &lsquo;<code class=css>right top</code>&rsquo;,
+      an equivalent gradient: for &lsquo;<code class=css>bottom
+      left</code>&rsquo; or &lsquo;<code class=css>left bottom</code>&rsquo;,
       the angle must be between 0deg and 90deg; for &lsquo;<code
-      class=css>bottom right</code>&rsquo; or &lsquo;<code class=css>right
-      bottom</code>&rsquo;, the angle must be between 90deg and 180deg; for
-      &lsquo;<code class=css>bottom left</code>&rsquo; or &lsquo;<code
-      class=css>left bottom</code>&rsquo;, the angle must be between 180deg
-      and 270deg; for &lsquo;<code class=css>top left</code>&rsquo; or
-      &lsquo;<code class=css>left top</code>&rsquo;, the angle must be
+      class=css>top left</code>&rsquo; or &lsquo;<code class=css>left
+      top</code>&rsquo;, the angle must be between 90deg and 180deg; for
+      &lsquo;<code class=css>top right</code>&rsquo; or &lsquo;<code
+      class=css>right top</code>&rsquo;, the angle must be between 180deg and
+      270deg; for &lsquo;<code class=css>bottom right</code>&rsquo; or
+      &lsquo;<code class=css>right bottom</code>&rsquo;, the angle must be
       between 270deg and 360deg.
     </ul>
 
@@ -2382,7 +2377,7 @@
      keywords, and the absolute difference between the angles their
      directions mapped to is greater than 180deg, add 360deg to the direction
      of the gradient with the smaller angle. <span class=note>This ensures
-     that a transition from, for example, "left" (270deg) to "top" (0deg)
+     that a transition from, for example, "right" (270deg) to "bottom" (0deg)
      rotates the gradient a quarter-turn clockwise, as expected, rather than
      rotating three-quarters of a turn counter-clockwise.</span></p>
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.114
retrieving revision 1.115
diff -u -d -r1.114 -r1.115
--- Overview.src.html	1 Jul 2011 22:16:46 -0000	1.114
+++ Overview.src.html	1 Jul 2011 23:00:11 -0000	1.115
@@ -519,25 +519,14 @@
 	Similar to the previous case, 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 box.  If a single keyword is specified, the line 
-	assumes the necessary angle to place the ending-point of the <i>gradient-line</i>
+	assumes the necessary angle to place the starting-point of the <i>gradient-line</i>
 	in the center of the side specified by the keyword; if two keywords are specified,
-	the line assumes the necessary angle to place the ending-point of the
-	<i>gradient-line</i> in the specified corner of the box.  The starting-point
+	the line assumes the necessary angle to place the starting-point of the
+	<i>gradient-line</i> in the specified corner of the box.  The ending-point
 	of the gradient-line is then where the line intersects the opposite side or
 	corner of the box.</p>
 
-	<p class='note'>This means that the keyword 'bottom' (the default) makes the
-	gradient point towards the bottom, equivalent to specifying '180deg'.  The 
-	keywords 'top left' make the gradient point towards the top-left corner of 
-	the box, which is equivalent to an angle somewhere between 0deg and 90deg
-	(exclusive).</p>
-
-	<p class='note'>The behavior of keywords is now exactly opposite what it has
-	been for a long time.  Previously, specifying 'top' made it start at the top
-	and point down, but feedback suggests that this was confusingly different
-	from how &lt;angle>s worked: giving an &lt;angle> makes the gradient point
-	towards the specified direction, while giving keywords made the gradient 
-	point <em>away</em> from the specified side/corner.</p>
+	<p class='issue'>This usage of keywords appears to be subtly confusing.  When you ask solely about how keywords should work, most people prefer the above model (keyword denotes starting point).  Similarly, most people prefer the way angles currently work.  When you ask about whether "bottom" and "0deg" should be the same direction or opposite, though, most people prefer them to be opposite, despite that being contradictory with one of their previous answers.  I am exploring alternate solutions that resolve this problem of expectations.</p>
 
 	<div class=example>
 		<div style="overflow: hidden">
@@ -575,10 +564,10 @@
 		<p>Below are various ways of specifying a basic vertical gradient:</p>
 
 		<pre><code>linear-gradient(yellow, blue);
-linear-gradient(bottom, yellow, blue);
+linear-gradient(top, yellow, blue);
 linear-gradient(180deg, yellow, blue);
-linear-gradient(top, blue, yellow);
-linear-gradient(bottom, yellow 0%, blue 100%);</code></pre>
+linear-gradient(bottom, blue, yellow);
+linear-gradient(top, yellow 0%, blue 100%);</code></pre>
 
 		<p><img src="linear1.png" alt="" ></p>
 	</div>
@@ -586,7 +575,7 @@
 	<div class=example>	
 		<p>This gradient goes from the top-left to the bottom-right corner.</p>
 
-		<pre><code>linear-gradient(bottom right, yellow, blue);</code></pre>
+		<pre><code>linear-gradient(top left, yellow, blue);</code></pre>
 
 		<p><img src="linear2.png" alt="" ></p>
 	</div>
@@ -1865,26 +1854,26 @@
 						is already in its explicit form.</li>
 
 						<li>Otherwise, if the direction is specified as a single
-						keyword, change 'top' to '0deg', 'right' to '90deg', 
-						'bottom' to '180deg', or 'left' to '270deg'.</li>
+						keyword, change 'bottom' to '0deg', 'left' to '90deg', 
+						'top' to '180deg', or 'right' to '270deg'.</li>
 
 						<li>Otherwise, if the direction is specified as two
 						keywords, change the direction to an &lt;angle> in the 
 						following ranges that would produce an equivalent
-						gradient: for 'top right' or 'right top', the angle must
-						be between 0deg and 90deg; for 'bottom right' or
-						'right bottom', the angle must be between 90deg and 
-						180deg;	for 'bottom left' or 'left bottom', the angle
-						must be between 180deg and 270deg; for 'top left' or
-						'left top', the angle must be between 270deg and 360deg.</li>
+						gradient: for 'bottom left' or 'left bottom', the angle must
+						be between 0deg and 90deg; for 'top left' or
+						'left top', the angle must be between 90deg and 
+						180deg;	for 'top right' or 'right top', the angle
+						must be between 180deg and 270deg; for 'bottom right' or
+						'right bottom', the angle must be between 270deg and 360deg.</li>
 
 						<p>If both the start and end gradients had their direction
 						specified with keywords, and the absolute difference 
 						between the	angles their directions mapped to is greater 
 						than 180deg, add 360deg to the direction of the gradient 
 						with the smaller angle.  <span class='note'>This ensures 
-						that a transition from, for example, "left" (270deg) to 
-						"top" (0deg) rotates the gradient a quarter-turn 
+						that a transition from, for example, "right" (270deg) to 
+						"bottom" (0deg) rotates the gradient a quarter-turn 
 						clockwise, as expected, rather than rotating 
 						three-quarters of a turn counter-clockwise.</span></p>
 					</ul>
Received on Friday, 1 July 2011 23:00:14 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 1 July 2011 23:00:15 GMT