- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Tue, 26 Aug 2014 04:21:42 -0700 (PDT)
- To: public-svg-wg@w3.org
https://github.com/w3c/svgwg/commit/3291d1230b0f7551927138ff67071a4328eeb861 commit 3291d1230b0f7551927138ff67071a4328eeb861 Author: Dirk Schulze <dschulze@chromium.org> Date: Tue Aug 26 12:09:33 2014 +0100 Update text section and use proper CSS basic shape defintions. diff --git a/master/text.html b/master/text.html index f584009..810cd36 100644 --- a/master/text.html +++ b/master/text.html @@ -1839,7 +1839,7 @@ swash forms, old-style figures etc. while also ensuring that a font is provided of shifting x and y (e.g. using baseline='text-before-edge') by not allowing this option. It is trivial to define a rectangluar box content area using - shape-inside="rectangle(x,y,width,height)" as shown in + shape-inside="inset(<offset-values>)" as shown in the example in the <a>'shape-inside'</a> section. </p> </dd> @@ -2018,7 +2018,7 @@ swash forms, old-style figures etc. while also ensuring that a font is provided <dt><span class="attr-value"><basic-shape></span></dt> <dd> The shape is computed based on the values of one of - ‘rectangle’,‘ circle’, ‘ellipse’ or ‘polygon’. + inset,‘ circle’, ‘ellipse’ or ‘polygon’. <div class="example"> <p> @@ -2029,18 +2029,18 @@ swash forms, old-style figures etc. while also ensuring that a font is provided <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100"> - <text shape-inside="rectangle(50,10,200,80)" + <text shape-inside="circle(100 at 100 100)" font-family="sans-serif" - font-size="20px" >This text wraps in a rectangle.</text> + font-size="20px">Lorem ipsum dolor sit amet, consec-tetuer adipiscing elit...</text> </svg> ]]></pre> <div class="figure"> - <img class="bordered" src="images/text/text-wrap-rectangle.svg" - alt="Image showing text wrapped inside a rectangle."/> + <img class="bordered" src="images/text/text-wrap-circle.svg" + alt="Image showing text wrapped inside a circle."/> <p class="caption"> - Horizontal text wrapping inside a CSS rectangle shape. + Horizontal text wrapping inside a CSS circle shape. The light-blue lines indicate the limits of the <a>content area</a>. </p> @@ -2049,13 +2049,13 @@ swash forms, old-style figures etc. while also ensuring that a font is provided <div class="issue"> <p> - Shapes also defines 'inset-rectangle'. It might be + Shapes also defines 'inset'. It might be interesting to be able to write: </p> <pre><![CDATA[ <rect ...> - <text shape-inside="inset-rectangle(20px,10px,20px,10px)">...</text> + <text shape-inside="inset(20px 10px 20px 10px)">...</text> </rect> ]]></pre> @@ -2194,7 +2194,7 @@ swash forms, old-style figures etc. while also ensuring that a font is provided <dt><span class="attr-value"><basic-shape></span></dt> <dd> The shape is computed based on the values of one of - ‘rectangle’,‘ circle’, ‘ellipse’ or ‘polygon’. + ‘inset’,‘ circle’, ‘ellipse’ or ‘polygon’. </dd> <dt><span class="attr-value"><uri></span></dt>
Received on Tuesday, 26 August 2014 11:22:05 UTC