Introduce new layout CSS properties x, y, cx, cy, r, rx, ry.
authorDirk Schulze <dschulze@adobe.com>
Thu, 24 Jul 2014 18:40:20 +0200
changeset 689 92ca1fecaf87
parent 688 aa7681741dfa
child 690 92a2d21f546a
Introduce new layout CSS properties x, y, cx, cy, r, rx, ry.
master/definitions.xml
master/layout.html
master/publish.xml
--- a/master/definitions.xml	Fri Jul 04 08:04:54 2014 +1000
+++ b/master/definitions.xml	Thu Jul 24 18:40:20 2014 +0200
@@ -792,7 +792,7 @@
   <attributecategory
     name='presentation'
     href='intro.html#TermPresentationAttribute'
-    presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering, letter-spacing, lighting-color, line-break, line-height, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, overflow-wrap, paint-order, pointer-events, shape-inside, shape-margin, shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dashadjust, stroke-dasharray, stroke-dashcorner, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, tab-size, text-align, text-anchor, text-decoration, text-indent, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-break, word-spacing, word-wrap, writing-mode'/>
+    presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering, letter-spacing, lighting-color, line-break, line-height, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, overflow-wrap, paint-order, pointer-events, shape-inside, shape-margin, shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dashadjust, stroke-dasharray, stroke-dashcorner, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, tab-size, text-align, text-anchor, text-decoration, text-indent, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-break, word-spacing, word-wrap, writing-mode, x'/>
 
   <attributecategory
       name='document event'
@@ -953,6 +953,13 @@
   <property name='vector-effect' href='painting.html#NonScalingStroke'/>
   <property name='word-spacing' href='text.html#WordSpacingProperty'/>
   <property name='writing-mode' href='text.html#WritingModeProperty'/>
+  <property name='x' href='layout.html#XProperty'/>
+  <property name='y' href='layout.html#YProperty'/>
+  <property name='cx' href='layout.html#CxProperty'/>
+  <property name='cy' href='layout.html#CyProperty'/>
+  <property name='r' href='layout.html#RProperty'/>
+  <property name='rx' href='layout.html#RxProperty'/>
+  <property name='ry' href='layout.html#RyProperty'/>
 
   <!-- ... properties defined elsewhere but described in this spec ........ -->
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/master/layout.html	Thu Jul 24 18:40:20 2014 +0200
@@ -0,0 +1,382 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+  <title>Filter Effects</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <link rel="stylesheet"           title="Default"               type="text/css" media="screen" href="style/default_svg.css"/>
+  <link rel="alternate stylesheet" title="No issues/annotations" type="text/css" media="screen" href="style/default_no_issues.css"/>
+  <!--
+  <link rel="alternate stylesheet" title="CSS3 Unmodified"       type="text/css" media="screen" href="style/default.css"/>
+  <link rel="alternate stylesheet" title="SVG 1.1"               type="text/css" media="screen" href="style/svg-style.css"/>
+  -->
+  <!-- W3C style sheet will be added here during processing. -->
+</head>
+<body>
+
+<h1>SVG's layout properties</h1>
+
+<p>Beside SVG's styling properties, SVG also defines
+<dfn id='layout-properties'>layout properties</dfn>. Layout properties
+describe graphics elements position and dimension.</p>
+
+<h2>Horizontal center coordinate: The
+<span class="property">'cx'</span> property</h2>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="CxProperty">cx</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>0</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>'circle'</a>, <a>'ellipse'</a>, <a>'radialGradient'</a>
+    </td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>no</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see
+    <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a>Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+
+<p>The <a>'cx'</a> property describes the horizontal center coordinate
+of the position of the element. For <a>'radialGradient'</a> it defines
+the horizontal center coordinate of the radial gradient.</p>
+
+<h2>Vertical center coordinate: The <span class="property">'cy'</span>
+property</h2>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="CyProperty">cy</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>0</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>'circle'</a>, <a>'ellipse'</a>, <a>'radialGradient'</a>
+    </td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>no</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see
+    <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a>Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+
+<p>The <a>'cy'</a> property describes the vertical center coordinate
+of the position of the element. For <a>'radialGradient'</a> it defines
+the vertical center coordinate of the radial gradient.</p>
+
+<h2>Radius: The <span class="property">'r'</span> property</h2>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="RProperty">r</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>0</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>'circle'</a>, <a>'radialGradient'</a></td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>no</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see
+    <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a>Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+
+<p>The <a>'r'</a> property describes the radius of the <a>'circle'</a>
+element and the radius of the radial gradient of the
+<a>'radialGradient'</a> element. The radius must be bigger or equal
+to zero.</p>
+
+<h2>Horizontal radius: The <span class="property">'rx'</span>
+property</h2>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="RxProperty">rx</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>0</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>'ellipse'</a>, <a>'rect'</a></td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>no</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see
+    <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a>Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+
+<p>The <a>'rx'</a> property describes the horizontal radius of the
+<a>'ellipse'</a> element and the curve radius of the <a>'rect'</a>
+element. The horizontal radius must be bigger or equal to zero.</p>
+
+<h2>Vertical radius: The <span class="property">'ry'</span>
+property</h2>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="RyProperty">ry</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>0</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>'ellipse'</a>, <a>'rect'</a></td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>no</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see
+    <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a>Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+
+<p>The <a>'ry'</a> property describes the vertical radius of the
+<a>'ellipse'</a> element and the curve radius of the <a>'rect'</a>
+element. The vertical radius must be bigger or equal to zero.</p>
+
+<h2>Horizontal coordinate: The <span class="property">'x'</span> property</h2>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="XProperty">x</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>0</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>'pattern element'</a>, <a>'mask element'</a>,
+    <a>'filter element'</a>, <a>'svg'</a>, <a>'rect'</a>,
+    <a>'image'</a>, <a>'foreignObject'</a></td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>no</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see
+    <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a>Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+
+<p>The <a>'x'</a> property describes the horizontal coordinate of
+the position of the element.</p>
+
+<div class="issue">
+<p>In opposite to all other usage, the <a>'text'</a>
+element and the <a>'tspan'</a> element do have x and y
+attributes with length lists. So far, there are four proposals:</p>
+<ol>
+  <li>Make <a>'x'</a> accept a list of length|percentage values rather than a
+  single length|percentage value. For the elements <a>'pattern'</a>,
+  <a>'mask element'</a>, <a>'filter element'</a>, <a>'svg'</a>, <a>'rect'</a>,
+  <a>'image'</a>, <a>'foreignObject'</a> we would specify that all but the
+  first list item must be ignored.</li>
+  <li>Don't make <a>'x'</a> a presentation attribute for the
+  <a>'text'</a> element and the <a>'tspan'</a> element. We
+  had experience with that on the width and height attribute for
+  HTMLCanvas. The position of the two elements could not be set by the
+  CSS properties that apply every where else otherwise.</li>
+  <li>Introduce a value of 'auto' to <a>'x'</a>. For the <a>'text'</a>
+  element and the <a>'tspan'</a>: If the computed value of
+  the 'x' property is 'auto', take the value of the 'x' attribute.
+  Otherwise, let the <a>'x'</a> property override the value of the 'x'
+  attribute. For all other elements, <a>'x'</a> behaves like a normal
+  presentation attribute.</li>
+  <li>For the <a>'text'</a> element and the
+  <a>'tspan'</a>: Map the x and y attributes to different
+  CSS properties like 'text-x' and 'text-y'.</li>
+</ol>
+</div>
+
+<h2>Vertical coordinate: The <span class="property">'y'</span>
+property</h2>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="YProperty">y</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>0</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>'pattern element'</a>, <a>'mask element'</a>,
+    <a>'filter element'</a>, <a>'svg'</a>, <a>'rect'</a>,
+    <a>'image'</a>, <a>'foreignObject'</a></td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>no</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see
+    <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a>Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+
+<p>The <a>'y'</a> property describes the vertical coordinate of
+the position of the element.</p>
+
+<p class="issue">See issue for the <a>'x'</a> property.</p>
+
+<p class="issue">Consider turning more attributes to presentation
+attributes like <span class="property">'fx'</span>,
+<span class="property">'fy'</span>, <span class="property">'dx'</span>
+and <span class="property">'dy'</span>.</p>
+</body>
+</html>
--- a/master/publish.xml	Fri Jul 04 08:04:54 2014 +1000
+++ b/master/publish.xml	Thu Jul 24 18:40:20 2014 +0200
@@ -51,6 +51,7 @@
   <chapter name='types'/>
   <chapter name='struct'/>
   <chapter name='styling'/>
+  <chapter name='layout'/>
   <chapter name='coords'/>
   <chapter name='paths'/>
   <chapter name='shapes'/>