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

csswg/css3-images Overview.html,1.214,1.215 Overview.src.html,1.222,1.223

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 11 Nov 2011 23:28:46 +0000
To: public-css-commits@w3.org
Message-Id: <E1RP0Wc-0004bG-6K@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv17648

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Moved the sectiong about image() and ltr/rtl down, and added an example showing its use.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.214
retrieving revision 1.215
diff -u -d -r1.214 -r1.215
--- Overview.html	11 Nov 2011 23:04:44 -0000	1.214
+++ Overview.html	11 Nov 2011 23:28:43 -0000	1.215
@@ -463,14 +463,6 @@
    Additionally, the author can specify a color as an ultimate fallback to be
    used when none of the images can be.
 
-  <p>Along with each URL, the author may specify a directionality, similar to
-   adding a <code>dir</code> attribute to an element in HTML. The image
-   represented by the function takes on the directionality of the used URL.
-   If a directional image is used on or in an element with opposite
-   directionality, the image must be flipped in the inline direction (as if
-   it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline
-   direction is the X axis).
-
   <p>So that authors can take advantage of CSS's forwards-compatible parsing
    rules to provide a fallback for image slices, implementations that support
    the &lsquo;<code class=css>image()</code>&rsquo; notation <em>must</em>
@@ -549,6 +541,32 @@
    <p>In the above, the background is the image "bg-image.png", overlaid with
     partially-transparent blue.
   </div>
+
+  <p>Along with each URL, the author may specify a directionality, similar to
+   adding a <code>dir</code> attribute to an element in HTML. The image
+   represented by the function takes on the directionality of the used URL.
+   If a directional image is used on or in an element with opposite
+   directionality, the image must be flipped in the inline direction (as if
+   it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline
+   direction is the X axis).
+
+  <div class=example>
+   <p>A list may use an arrow for a bullet that points into the content. If
+    the list can contain both ltr and rtl text, though, the bullet may be on
+    the left or the right, and an image designed to point into the text on
+    one side will point out of the text on the other side. This can be fixed
+    with code like:</p>
+
+   <pre>
+&lt;ul style="list-style-image: image("arrow.png" ltr);">
+	&lt;li dir='ltr'>My bullet is on the left!&lt;/li>
+	&lt;li dir='rtl'>MY BULLET IS ON THE RIGHT!&lt;/li>
+&lt;/ul></pre>
+
+   <p>In ltr list items, the image will be used as-is. In the rtl list items,
+    however, it will be flipped in the inline direction, so it still points
+    into the content.</p>
+  </div>
   <!-- ====================================================================== -->
 
   <h3 id=element-reference><span class=secno>3.3. </span> Using Elements as

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.222
retrieving revision 1.223
diff -u -d -r1.222 -r1.223
--- Overview.src.html	11 Nov 2011 23:04:45 -0000	1.222
+++ Overview.src.html	11 Nov 2011 23:28:44 -0000	1.223
@@ -218,8 +218,6 @@
 
 	<p>The ''image()'' function allows an author to specify an image with fallback images to be used if the original image can't be decoded or is a type that the browser doesn't recognize.  Additionally, the author can specify a color as an ultimate fallback to be used when none of the images can be.</p>
 
-	<p>Along with each URL, the author may specify a directionality, similar to adding a <code>dir</code> attribute to an element in HTML.  The image represented by the function takes on the directionality of the used URL.  If a directional image is used on or in an element with opposite directionality, the image must be flipped in the inline direction (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis).</p>
-
 	<p>So that authors can take advantage of CSS's forwards-compatible parsing
 	rules to provide a fallback for image slices, implementations that support
 	the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
@@ -266,6 +264,20 @@
 		<p>In the above, the background is the image "bg-image.png", overlaid with partially-transparent blue.
 	</div>
 
+	<p>Along with each URL, the author may specify a directionality, similar to adding a <code>dir</code> attribute to an element in HTML.  The image represented by the function takes on the directionality of the used URL.  If a directional image is used on or in an element with opposite directionality, the image must be flipped in the inline direction (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis).</p>
+
+	<div class='example'>
+		<p>A list may use an arrow for a bullet that points into the content.  If the list can contain both ltr and rtl text, though, the bullet may be on the left or the right, and an image designed to point into the text on one side will point out of the text on the other side.  This can be fixed with code like:</p>
+
+		<pre>
+&lt;ul style="list-style-image: image("arrow.png" ltr);">
+	&lt;li dir='ltr'>My bullet is on the left!&lt;/li>
+	&lt;li dir='rtl'>MY BULLET IS ON THE RIGHT!&lt;/li>
+&lt;/ul></pre>
+
+		<p>In ltr list items, the image will be used as-is.  In the rtl list items, however, it will be flipped in the inline direction, so it still points into the content.</p>
+	</div>
+
 <!-- ====================================================================== -->
 
 <h3 id='element-reference'>
Received on Friday, 11 November 2011 23:28:47 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 11 November 2011 23:28:49 GMT