Extend the 'marker' shorthand to set all of the new marker properties.
authorCameron McCormack <cam@mcc.id.au>
Fri, 25 May 2012 15:25:31 +1000
changeset 156 de9f717cf7f7
parent 155 563edf9d922b
child 157 fd18c50a3ea6
Extend the 'marker' shorthand to set all of the new marker properties.
master/painting.html
master/style/default_svg.css
--- a/master/painting.html	Fri May 25 12:13:28 2012 +1000
+++ b/master/painting.html	Fri May 25 15:25:31 2012 +1000
@@ -1364,42 +1364,40 @@
 table.attrdef { border-left-color: #888; border-left-width: 0; background-color: #eee; font-size: 90% }
 table.attrdef th, table.attrdef td { border-bottom-color: #ccc }
 
-/*
 table.attrdef th:first-child,
-table.attrdef td:first-child { width: 16em }
-*/
-
-table.attrdef th:first-child,
-table.attrdef td:first-child { width: auto }
-
-table.attrdef td:first-child { font-style: normal }
+table.attrdef td:first-child { width: 16em; padding-left: 0 !important }
 
 table.attrdef th:first-child + th,
-table.attrdef td:first-child + td { width: 6em }
+table.attrdef td:first-child + td { width: auto }
 
 table.attrdef th:first-child + th + th,
 table.attrdef td:first-child + td + td { width: 6em }
+
+table.attrdef th:first-child + th + th + th,
+table.attrdef td:first-child + td + td + td { width: 6em; padding-right: 0 !important }
 </style>
 
 <dl class="attrdef-list">
-  <dt><dfn id="MarkerUnitsAttribute">markerUnits</dfn></dt>
-  <dd>
+  <dt>
 
 <table class="propdef attrdef">
   <tr>
-<!--    <th>Name</th>-->
+    <th>Name</th>
     <th>Value</th>
     <th>Lacuna value</th>
     <th>Animatable</th>
   </tr>
   <tr>
-<!--    <td><dfn id="MarkerUnitsAttribute">markerUnits</dfn></td>-->
+    <td><dfn id="MarkerUnitsAttribute">markerUnits</dfn></td>
     <td>strokeWidth | userSpaceOnUse</td>
     <td>strokeWidth</td>
     <td>yes</td>
   </tr>
 </table>
 
+</dt>
+<dd>
+
 <p>The <a>'markerUnits'</a> attribute defines the coordinate system for
 attributes <a>'markerWidth'</a>, <a>'markerHeight'</a> and the
 contents of the <a>'marker element'</a>.  Values have the
@@ -1423,26 +1421,27 @@
 </dl>
 
 </dd>
-<dt><dfn id="MarkerWidthAttribute">markerWidth</dfn>,
-<dfn id="MarkerHeightAttribute">markerHeight</dfn></dt>
-<dd>
+<dt>
 
 <table class="propdef attrdef">
   <tr>
-<!--    <th>Name</th>-->
+    <th>Name</th>
     <th>Value</th>
     <th>Lacuna value</th>
     <th>Animatable</th>
   </tr>
   <tr>
-<!--    <td><dfn id="MarkerWidthAttribute">markerWidth</dfn>,
-    <dfn id="MarkerHeightAttribute">markerHeight</dfn></td>-->
+    <td><dfn id="MarkerWidthAttribute">markerWidth</dfn>,
+    <dfn id="MarkerHeightAttribute">markerHeight</dfn></td>
     <td><a>&lt;length&gt;</a></td>
     <td>3</td>
     <td>yes</td>
   </tr>
 </table>
 
+</dt>
+<dd>
+
 <p>The <a>'markerWidth'</a> and <a>'markerHeight'</a> attributes
 represent the size of the viewport into which the marker is to
 be fitted when it is rendered.  A value of zero for either
@@ -1451,25 +1450,26 @@
 <a href="implnote.html#ErrorProcessing">Error processing</a>).</p>
 
 </dd>
-<dt><dfn id="RefXAttribute">refX</dfn>,
-<dfn id="RefYAttribute">refY</dfn></dt>
-<dd>
+<dt>
 
 <table class="propdef attrdef">
   <tr>
-<!--    <th>Name</th>-->
+    <th>Name</th>
     <th>Value</th>
     <th>Lacuna value</th>
     <th>Animatable</th>
   </tr>
   <tr>
-<!--    <td><dfn id="RefXAttribute">refX</dfn>, <dfn id="RefYAttribute">refY</dfn></td>-->
+    <td><dfn id="RefXAttribute">refX</dfn>, <dfn id="RefYAttribute">refY</dfn></td>
     <td><a>&lt;coordinate&gt;</a></td>
     <td>0</td>
     <td>yes</td>
   </tr>
 </table>
 
+</dt>
+<dd>
+
 <p>The <a>'refX'</a> and <a>'refY'</a> attributes define the reference
 point of the marker which is to be aligned exactly at the marker's
 position on the <a>markable element</a>.  They are interpreted as being in the
@@ -1477,24 +1477,26 @@
 <a>'viewBox'</a> and <a>'preserveAspectRatio'</a> attributes.</p>
 
 </dd>
-<dt><dfn id="OrientAttribute">orient</dfn></dt>
-<dd>
+<dt>
 
 <table class="propdef attrdef">
   <tr>
-<!--    <th>Name</th>-->
+    <th>Name</th>
     <th>Value</th>
     <th>Lacuna value</th>
     <th>Animatable</th>
   </tr>
   <tr>
-<!--    <td><dfn id="MarkerOrientAttribute">orient</dfn></td>-->
+    <td><dfn id="MarkerOrientAttribute">orient</dfn></td>
     <td>auto | <a>&lt;angle&gt;</a></td>
     <td>0</td>
     <td>yes&#160;(non-additive)</td>
   </tr>
 </table>
 
+</dt>
+<dd>
+
 <p>The <a>'orient'</a> attribute indicates how the marker
 is rotated when it is placed at its position on the <a>markable element</a>.
 Values have the following meaning:</p>
@@ -1542,24 +1544,25 @@
 </dl>
 
 </dd>
-<dt><dfn id="PositionAttribute">position</dfn></dt>
-<dd>
-
+
+<dt>
 <table class="propdef attrdef">
   <tr>
-<!--    <th>Name</th>-->
+    <th>Name</th>
     <th>Value</th>
     <th>Lacuna value</th>
     <th>Animatable</th>
   </tr>
   <tr>
-<!--    <td><dfn id="PositionAttribute">position</dfn></td>-->
+    <td><dfn id="PositionAttribute">position</dfn></td>
     <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a></td>
     <td>as&#160;if&#160;not&#160;specified</td>
     <td>yes</td>
   </tr>
 </table>
 
+</dt>
+<dd>
 <p>If the <a>'marker element'</a> element is a child of a <a>markable element</a>,
 then the presence of a <a>'position'</a> attribute indicates that the marker is
 a <a>positioned marker</a> and that it will be painted at the specified
@@ -1572,24 +1575,25 @@
 an "in error" / "unsupported" value?</p>
 
 </dd>
-<dt><dfn id="HrefAttribute">href</dfn></dt>
-<dd>
+<dt>
 
 <table class="propdef attrdef">
   <tr>
-<!--    <th>Name</th>-->
+    <th>Name</th>
     <th>Value</th>
     <th>Lacuna value</th>
     <th>Animatable</th>
   </tr>
   <tr>
-<!--    <td><dfn id="HrefAttribute">href</dfn></td>-->
+    <td><dfn id="HrefAttribute">href</dfn></td>
     <td><a>&lt;iri&gt;</a></td>
     <td>as&#160;if&#160;not&#160;specified</td>
     <td>yes</td>
   </tr>
 </table>
 
+</dt>
+<dd>
 <p>When a <a>'marker element'</a> element is being used as a <a>positioned marker</a>,
 the <a>'href'</a> attribute indicates that the <a>'marker element'</a>
 referenced by the attribute is to be used as the definition of the marker.  The
@@ -1890,15 +1894,10 @@
   <!-- the graph line -->
   <polyline points="50,100 100,20 150,50 200,130 250,80 300,170 350,100"
             fill="none" stroke="deeppink" stroke-width="2"
-            marker-start="url(#Circle)" marker-mid="url(#Circle)"
-            marker-end="url(#Circle)" marker-segment="url(#Cross)"/>
+            marker="url(#Circle)" marker-segment="url(#Cross)"/>
 </svg>
 ]]></pre>
 
-<p class="issue">Once the <a>'marker property'</a> shorthand is sorted out,
-we might want to use it instead of the four separate presentation attributes
-above.</p>
-
   <div class="figure">
     <img class="bordered" src="images/painting/markers-segment.svg"/>
     <p class="caption">Segment markers are used to place crosses at the center
@@ -1992,7 +1991,7 @@
           viewBox="-4 -6 8 12" markerUnits="userSpaceOnUse" orient="auto">
     <rect x="-3" y="-5" width="2" height="10"/>
     <rect x="1" y="-5" width="2" height="10"/>
-  </g>
+  </marker>
   <marker id="SingleDash" markerWidth="4" markerHeight="12" refX="0" refY="0"
           viewBox="-2 -6 4 12" markerUnits="userSpaceOnUse" orient="auto">
     <rect x="-1" y="-5" width="2" height="10"/>
@@ -2013,10 +2012,6 @@
   </div>
 </div>
 
-</edit:with>
-</div>
-<edit:with element='marker'>
-
 <h3 id="MarkerShorthand">Marker shorthand: the <span class="property">'marker'</span>
 property</h3>
 
@@ -2027,7 +2022,15 @@
   </tr>
   <tr>
     <th>Value:</th>
-    <td>none | <a>&lt;funciri&gt;</a></td>
+    <td style="white-space: nowrap">
+      <div>
+        [ none | <a>&lt;funciri&gt;</a> ]{1,4}
+        [ / <a class="property" href="#MarkerPatternProperty">&lt;‘marker-pattern’&gt;</a> ]?
+      </div>
+      <div style="margin-left: 2em">
+        | <a>&lt;funciri&gt;</a>{0,4} [ <a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a> ] [ <a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a> | <a>&lt;funciri&gt;</a> ]*
+      </div>
+    </td>
   </tr>
   <tr>
     <th>Initial:</th>
@@ -2059,15 +2062,48 @@
   </tr>
 </table>
 
-<p class="issue">Extend the shorthand so that it can set
-<a>'marker-start'</a>, <a>'marker-mid'</a> and <a>'marker-end'</a>
-separately, and also set <a>'marker-segment'</a> and <a>'marker-pattern'</a>.</p>
-
-<p>The <a>'marker property'</a> property specifies
-the marker symbol that shall be used for all points on the given
-element.  It is a shorthand for setting the three individual marker
-properties – <a>'marker-start'</a>, <a>'marker-mid'</a> and <a>'marker-end'</a> –
-to the same value.</p>
+<p>The <a>'marker property'</a> property sets values for the
+<a>'marker-start'</a>, <a>'marker-mid'</a>, <a>'marker-end'</a>,
+<a>'marker-segment'</a> and <a>'marker-pattern'</a> properties.
+Values for have the following meanings:</p>
+
+<dl>
+  <dt><span class="prop-value">none | <a>&lt;funciri&gt;</a></span></dt>
+  <dd>Sets <a>'marker-start'</a>, <a>'marker-mid'</a> and <a>'marker-end'</a>
+  to the specified value, and sets <a>'marker-segment'</a> and
+  <a>'marker-pattern'</a> to <span class="prop-value">none</span>.</dd>
+
+  <dt><span class="prop-value">[ none | <a>&lt;funciri&gt;</a> ]{2}</span></dt>
+  <dd>Sets <a>'marker-start'</a> and <a>'marker-end'</a> to the two
+  values specified, and sets <a>'marker-mid'</a>, <a>'marker-segment'</a> and
+  <a>'marker-pattern'</a> to <span class="prop-value">none</span>.</dd>
+    
+  <dt><span class="prop-value">[ none | <a>&lt;funciri&gt;</a> ]{3}</span></dt>
+  <dd>Sets <a>'marker-start'</a>, <a>'marker-mid'</a> and <a>'marker-end'</a> to
+  the three values specified, and sets <a>'marker-segment'</a> and
+  <a>'marker-pattern'</a> to <span class="prop-value">none</span>.</dd>
+    
+  <dt><span class="prop-value">[ none | <a>&lt;funciri&gt;</a> ]{4}</span></dt>
+  <dd>Sets <a>'marker-start'</a>, <a>'marker-segment'</a>, <a>'marker-mid'</a>
+  and <a>'marker-end'</a> to the four <a>&lt;funciri&gt;</a> values
+  specified, and sets <a>'marker-pattern'</a> to
+  <span class="prop-value">none</span>.</dd>
+
+  <dt><span class="prop-value">[ none | <a>&lt;funciri&gt;</a> ]{4} / <a class="property" href="#MarkerPatternProperty">&lt;‘marker-pattern’&gt;</a></span></dt>
+  <dd>Sets <a>'marker-start'</a>, <a>'marker-segment'</a>, <a>'marker-mid'</a>
+  and <a>'marker-end'</a> to the four <a>&lt;funciri&gt;</a> values
+  specified before the slash, and sets <a>'marker-pattern'</a> to
+  the value after the slash.</dd>
+
+  <dt>anything else</dt>
+  <dd>Sets <a>'marker-start'</a>, <a>'marker-segment'</a>, <a>'marker-mid'</a>
+  and <a>'marker-end'</a> to <span class="prop-value">none</span>,
+  and sets <a>'marker-pattern'</a> to the specified value.</dd>
+</dl>
+
+</edit:with>
+</div>
+<edit:with element='marker'>
 
 <h3 id="MarkerAlgorithm">Details on how markers are rendered</h3>
 
--- a/master/style/default_svg.css	Fri May 25 12:13:28 2012 +1000
+++ b/master/style/default_svg.css	Fri May 25 15:25:31 2012 +1000
@@ -248,7 +248,7 @@
 img.bordered { border: 1px solid #888; background-color: white }
 
 dl.attrdef-list dl { margin-top: 1em }
-dl.attrdef-list > dt { font-size: 90% }
+dl.attrdef-list > dt { font-weight: normal }
 
 /*
  * Temporary styles for use only while the spec is in development: