Experiment more with attribute definition list formatting.
authorCameron McCormack <cam@mcc.id.au>
Fri, 25 May 2012 12:13:28 +1000
changeset 155 563edf9d922b
parent 154 83819f5392da
child 156 de9f717cf7f7
Experiment more with attribute definition list formatting.
master/painting.html
master/style/default_svg.css
--- a/master/painting.html	Fri May 25 11:45:04 2012 +1000
+++ b/master/painting.html	Fri May 25 12:13:28 2012 +1000
@@ -1364,28 +1364,36 @@
 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 th:first-child + th,
-table.attrdef td:first-child + td { width: auto }
+table.attrdef td:first-child + td { width: 6em }
 
 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 }
 </style>
 
+<dl class="attrdef-list">
+  <dt><dfn id="MarkerUnitsAttribute">markerUnits</dfn></dt>
+  <dd>
+
 <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>
@@ -1414,16 +1422,21 @@
   <a>marker property</a>).</dd>
 </dl>
 
+</dd>
+<dt><dfn id="MarkerWidthAttribute">markerWidth</dfn>,
+<dfn id="MarkerHeightAttribute">markerHeight</dfn></dt>
+<dd>
+
 <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>
@@ -1437,15 +1450,20 @@
 for either attribute is an error (see
 <a href="implnote.html#ErrorProcessing">Error processing</a>).</p>
 
+</dd>
+<dt><dfn id="RefXAttribute">refX</dfn>,
+<dfn id="RefYAttribute">refY</dfn></dt>
+<dd>
+
 <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>
@@ -1458,15 +1476,19 @@
 coordinate system of the marker contents, after application of the
 <a>'viewBox'</a> and <a>'preserveAspectRatio'</a> attributes.</p>
 
+</dd>
+<dt><dfn id="OrientAttribute">orient</dfn></dt>
+<dd>
+
 <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>
@@ -1519,15 +1541,19 @@
   </dd>
 </dl>
 
+</dd>
+<dt><dfn id="PositionAttribute">position</dfn></dt>
+<dd>
+
 <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>
@@ -1545,15 +1571,19 @@
 <p class="issue">Should a negative or greater than path length value be
 an "in error" / "unsupported" value?</p>
 
+</dd>
+<dt><dfn id="HrefAttribute">href</dfn></dt>
+<dd>
+
 <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>
@@ -1576,11 +1606,16 @@
 element-referencing thing that you can do with gradients, with selective
 overriding of attributes, I'm not sure.</p>
 
+</dd>
+</dl>
+
+<!--
 <style>
 hr.break { border: none; margin: 2em 0 }
 hr.break:before { display: block; text-align: center; content: "*\a0\a0\a0\a0*\a0\a0\a0\a0*"; }
 </style>
 <hr class="break"/>
+-->
 
 <p>The contents of the <a>'marker element'</a> are relative to a new
 coordinate system. The <a>'markerUnits'</a> attribute determines an initial
--- a/master/style/default_svg.css	Fri May 25 11:45:04 2012 +1000
+++ b/master/style/default_svg.css	Fri May 25 12:13:28 2012 +1000
@@ -247,6 +247,9 @@
 /* A border to be used around images. */
 img.bordered { border: 1px solid #888; background-color: white }
 
+dl.attrdef-list dl { margin-top: 1em }
+dl.attrdef-list > dt { font-size: 90% }
+
 /*
  * Temporary styles for use only while the spec is in development:
  */