Introduce new <dl class=compact> style
authorAryeh Gregor <AryehGregor+gitcommit@gmail.com>
Wed, 13 Jul 2011 13:53:49 -0600
changeset 422 4d6d09938ea9
parent 421 7fd2d5f4fcb2
child 423 bb55a5618600
Introduce new <dl class=compact> style

I don't know how much I like it, but let's try it out for now.
editcommands.html
implementation.js
source.html
--- a/editcommands.html	Wed Jul 13 12:18:40 2011 -0600
+++ b/editcommands.html	Wed Jul 13 13:53:49 2011 -0600
@@ -2,38 +2,60 @@
 <title>HTML Editing Commands</title>
 <link href=http://www.whatwg.org/style/specification rel=stylesheet>
 <style>
-  pre, code, xmp { font-family:monospace, sans-serif; }
-  h2 code, h3 code, h3 code,
-  h2 :link, h3 :link, h3 :link,
-  h2 :visited, h3 :visited, h3 :visited
-  { font:inherit; color:inherit; font-style:italic; }
-  @media print {
-    :not([data-anolis-spec]) > [data-anolis-spec]::after {
-      content: "[" attr(data-anolis-spec) "]";
-      font-size: 0.6em;
-      vertical-align: super;
-      text-transform: uppercase;
-    }
+pre, code, xmp { font-family:monospace, sans-serif; }
+h2 code, h3 code, h3 code,
+h2 :link, h3 :link, h3 :link,
+h2 :visited, h3 :visited, h3 :visited
+{ font:inherit; color:inherit; font-style:italic; }
[email protected] print {
+  :not([data-anolis-spec]) > [data-anolis-spec]::after {
+    content: "[" attr(data-anolis-spec) "]";
+    font-size: 0.6em;
+    vertical-align: super;
+    text-transform: uppercase;
   }
-  xmp {
-    font-size: inherit;
-    font-variant: normal;
-    margin-left: 2em;
-    white-space: pre-wrap;
-  }
-  div.note > p:first-child::before { content: 'Note: '; }
-  .XXX > :last-child { margin-bottom: 0 }
-  .XXX li {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  dd .XXX p { margin: 1em 0 }
-  ol li { margin: 1em 0 }
-  li li { margin: 0 }
-  table { margin: 1em 0 }
-  /* Overwrite the underline so it's orange instead of blue, thus looks less
-   * silly */
-  a code { text-decoration: underline }
+}
+xmp {
+  font-size: inherit;
+  font-variant: normal;
+  margin-left: 2em;
+  white-space: pre-wrap;
+}
+div.note > p:first-child::before { content: 'Note: '; }
+.XXX > :last-child { margin-bottom: 0 }
+.XXX li {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+dd .XXX p { margin: 1em 0 }
+ol li { margin: 1em 0 }
+li li { margin: 0 }
+table { margin: 1em 0 }
+/* Overwrite the underline so it's orange instead of blue, thus looks less
+ * silly */
+a code { text-decoration: underline }
+/* Make my own compact dl styling because I don't like existing options */
+dl.compact > dt, dl.compact > dd {
+  display: inline;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+dl.compact { margin: 0.5em 0 0.5em 1em }
+dl.compact > dt::before {
+  content: '\2022  ';
+}
+dl.compact > dd::before {
+  content: ': ';
+}
+dl.compact > dd + dt::before {
+  white-space: pre;
+  content: '\A\2022  ';
+}
+dl.compact > dt + dt::before,
+dl.compact > dd + dd::before {
+  content: ', ';
+}
 </style>
 <body class=draft>
 <div class=head id=head>
@@ -1185,21 +1207,21 @@
 
   <li>If <var title="">parent</var> is not a string, return false.
 
-  <li>If <var title="">parent</var> is in the following table, then return true if
-  <var title="">child</var> is listed as an allowed child, and false otherwise.
+  <li>If <var title="">parent</var> is on the left-hand side of an entry on the
+  following list, then return true if <var title="">child</var> is listed on the
+  right-hand side of that entry, and false otherwise.
   <!-- We allow children even where some intervening nodes will be inserted,
   like tr as a child of table. -->
 
-  <table>
-    <tr><th>Parent <th>Allowed children
-    <tr><td>colgroup <td>col
-    <tr><td>table <td>caption, col, colgroup, tbody, td, tfoot, th, thead, tr
-    <tr><td>tbody, tfoot, thead <td>td, th, tr
-    <tr><td>tr <td>td, th
-    <tr><td>dl <td>dt, dd
-    <tr><td>dir, ol, ul <td>dir, li, ol, ul
-    <tr><td>hgroup <td>h1, h2, h3, h4, h5, h6
-  </table>
+  <dl class=compact>
+    <dt>colgroup<dd>col
+    <dt>table<dd>caption<dd>col<dd>colgroup<dd>tbody<dd>td<dd>tfoot<dd>th<dd>thead<dd>tr
+    <dt>tbody<dt>tfoot<dt>thead<dd>td<dd>th<dd>tr
+    <dt>tr<dd>td<dd>th
+    <dt>dl<dd>dt<dd>dd
+    <dt>dir<dt>ol<dt>ul<dd>dir<dd>li<dd>ol<dd>ul
+    <dt>hgroup<dd>h1<dd>h2<dd>h3<dd>h4<dd>h5<dd>h6
+  </dl>
 
   <li>If <var title="">child</var> is "body", "caption", "col", "colgroup", "frame",
   "frameset", "head", "html", "tbody", "td", "tfoot", "th", "thead", or "tr",
@@ -1213,22 +1235,21 @@
   <li>If <var title="">child</var> is "li" and <var title="">parent</var> is not "ol" or "ul",
   return false.
 
-  <li>If <var title="">parent</var> is in the following table and <var title="">child</var> is
-  listed as a prohibited child, return false.
-
-  <table>
-    <tr><th>Parent <th>Prohibited children
-    <tr><td>a <td>a
-    <tr><td>dd, dt <td>dd, dt
-    <tr><td>h1, h2, h3, h4, h5, h6 <td>h1, h2, h3, h4, h5, h6
-    <tr><td>li <td>li
-    <tr><td>nobr <td>nobr
-    <tr><td>all <a href=#name-of-an-element-with-inline-contents title="name of an element with inline contents">names
-          of an element with inline contents</a>
-        <td>All <a href=#prohibited-paragraph-child-name title="prohibited paragraph child name">prohibited
-          paragraph child names</a>
-    <tr><td>td, th <td>caption, col, colgroup, tbody, td, tfoot, th, thead, tr
-  </table>
+  <li>If <var title="">parent</var> is on the left-hand side of an entry on the
+  following list and <var title="">child</var> is listed on the right-hand side of that
+  entry, return false.
+
+  <dl class=compact>
+    <dt>a<dd>a
+    <dt>dd<dt>dt<dd>dd<dd>dt
+    <dt>h1<dt>h2<dt>h3<dt>h4<dt>h5<dt>h6<dd>h1<dd>h2<dd>h3<dd>h4<dd>h5<dd>h6
+    <dt>li<dd>li
+    <dt>nobr<dd>nobr
+    <dt>All <a href=#name-of-an-element-with-inline-contents title="name of an element with inline contents">names of an
+    element with inline contents</a><dd>all <a href=#prohibited-paragraph-child-name title="prohibited
+    paragraph child name">prohibited paragraph child names</a>
+    <dt>td<dt>th<dd>caption<dd>col<dd>colgroup<dd>tbody<dd>td<dd>tfoot<dd>th<dd>thead<dd>tr
+  </dl>
 
   <li>Return true.
 </ol>
@@ -1493,14 +1514,10 @@
   equal to the CSS property name listed for it, return the string listed for
   it.
 
-  <dl class=switch>
-    <dt><code class=external data-anolis-spec=html title="the b element"><a href=http://www.whatwg.org/html/#the-b-element>b</a></code>
-    <dt><code class=external data-anolis-spec=html title="the strong element"><a href=http://www.whatwg.org/html/#the-strong-element>strong</a></code>
-    <dd>font-weight: "bold"
-
-    <dt><code class=external data-anolis-spec=html title="the i element"><a href=http://www.whatwg.org/html/#the-i-element>i</a></code>
-    <dt><code class=external data-anolis-spec=html title="the em element"><a href=http://www.whatwg.org/html/#the-em-element>em</a></code>
-    <dd>font-style: "italic"
+  <dl class=compact>
+    <dt><code class=external data-anolis-spec=html title="the b element"><a href=http://www.whatwg.org/html/#the-b-element>b</a></code><dt><code class=external data-anolis-spec=html title="the strong element"><a href=http://www.whatwg.org/html/#the-strong-element>strong</a></code><dd>font-weight: "bold"
+
+    <dt><code class=external data-anolis-spec=html title="the i element"><a href=http://www.whatwg.org/html/#the-i-element>i</a></code><dt><code class=external data-anolis-spec=html title="the em element"><a href=http://www.whatwg.org/html/#the-em-element>em</a></code><dd>font-style: "italic"
   </dl>
 
   <li>Return null.
@@ -2008,14 +2025,14 @@
   <var title="">new parent</var> to the number from the following table based on
   <var title="">new value</var>:
 
-  <dl class=switch>
-    <dt>xx-small <dd>1
-    <dt>small <dd>2
-    <dt>normal <dd>3
-    <dt>large <dd>4
-    <dt>x-large <dd>5
-    <dt>xx-large <dd>6
-    <dt>xxx-large <dd>7
+  <dl class=compact>
+    <dt>xx-small<dd>1
+    <dt>small<dd>2
+    <dt>normal<dd>3
+    <dt>large<dd>4
+    <dt>x-large<dd>5
+    <dt>xx-large<dd>6
+    <dt>xxx-large<dd>7
   </dl>
 
   <!-- We always use sup/sub elements, even in CSS mode, following Gecko and
@@ -2559,14 +2576,14 @@
     <li>Set <var title="">value</var> to the string here corresponding to
     <var title="">number</var>:
 
-    <dl class=switch>
-      <dt>1 <dd>xx-small
-      <dt>2 <dd>small
-      <dt>3 <dd>medium
-      <dt>4 <dd>large
-      <dt>5 <dd>x-large
-      <dt>6 <dd>xx-large
-      <dt>7 <dd>xxx-large
+    <dl class=compact>
+      <dt>1<dd>xx-small
+      <dt>2<dd>small
+      <dt>3<dd>medium
+      <dt>4<dd>large
+      <dt>5<dd>x-large
+      <dt>6<dd>xx-large
+      <dt>7<dd>xxx-large
     </dl>
 
     <!--
@@ -2583,7 +2600,6 @@
   <li>If <var title="">value</var> is not one of the strings "xx-small", "x-small",
   "small", "medium", "large", "x-large", "xx-large", "xxx-large", and is not a
   valid CSS absolute length, then raise a <code class=external data-anolis-spec=domcore title=dom-DOMException-SYNTAX_ERR><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-domexception-syntax_err>SYNTAX_ERR</a></code> exception.
-
   <!--
   Not sure this is the best way to do it.  We don't want to allow relative
   lengths, because those can have very weird user-visible behavior.  For
--- a/implementation.js	Wed Jul 13 12:18:40 2011 -0600
+++ b/implementation.js	Wed Jul 13 13:53:49 2011 -0600
@@ -1390,8 +1390,9 @@
 		return false;
 	}
 
-	// "If parent is in the following table, then return true if child is
-	// listed as an allowed child, and false otherwise."
+	// "If parent is on the left-hand side of an entry on the following list,
+	// then return true if child is listed on the right-hand side of that
+	// entry, and false otherwise."
 	switch (parent_) {
 		case "colgroup":
 			return child == "col";
@@ -1434,8 +1435,8 @@
 		return false;
 	}
 
-	// "If parent is in the following table and child is listed as a prohibited
-	// child, return false."
+	// "If parent is on the left-hand side of an entry on the following list
+	// and child is listed on the right-hand side of that entry, return false."
 	var table = [
 		[["a"], ["a"]],
 		[["dd", "dt"], ["dd", "dt"]],
--- a/source.html	Wed Jul 13 12:18:40 2011 -0600
+++ b/source.html	Wed Jul 13 13:53:49 2011 -0600
@@ -4,38 +4,60 @@
 <title>HTML Editing Commands</title>
 <link rel=stylesheet href=http://www.whatwg.org/style/specification>
 <style>
-  pre, code, xmp { font-family:monospace, sans-serif; }
-  h2 code, h3 code, h3 code,
-  h2 :link, h3 :link, h3 :link,
-  h2 :visited, h3 :visited, h3 :visited
-  { font:inherit; color:inherit; font-style:italic; }
-  @media print {
-    :not([data-anolis-spec]) > [data-anolis-spec]::after {
-      content: "[" attr(data-anolis-spec) "]";
-      font-size: 0.6em;
-      vertical-align: super;
-      text-transform: uppercase;
-    }
+pre, code, xmp { font-family:monospace, sans-serif; }
+h2 code, h3 code, h3 code,
+h2 :link, h3 :link, h3 :link,
+h2 :visited, h3 :visited, h3 :visited
+{ font:inherit; color:inherit; font-style:italic; }
[email protected] print {
+  :not([data-anolis-spec]) > [data-anolis-spec]::after {
+    content: "[" attr(data-anolis-spec) "]";
+    font-size: 0.6em;
+    vertical-align: super;
+    text-transform: uppercase;
   }
-  xmp {
-    font-size: inherit;
-    font-variant: normal;
-    margin-left: 2em;
-    white-space: pre-wrap;
-  }
-  div.note > p:first-child::before { content: 'Note: '; }
-  .XXX > :last-child { margin-bottom: 0 }
-  .XXX li {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  dd .XXX p { margin: 1em 0 }
-  ol li { margin: 1em 0 }
-  li li { margin: 0 }
-  table { margin: 1em 0 }
-  /* Overwrite the underline so it's orange instead of blue, thus looks less
-   * silly */
-  a code { text-decoration: underline }
+}
+xmp {
+  font-size: inherit;
+  font-variant: normal;
+  margin-left: 2em;
+  white-space: pre-wrap;
+}
+div.note > p:first-child::before { content: 'Note: '; }
+.XXX > :last-child { margin-bottom: 0 }
+.XXX li {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+dd .XXX p { margin: 1em 0 }
+ol li { margin: 1em 0 }
+li li { margin: 0 }
+table { margin: 1em 0 }
+/* Overwrite the underline so it's orange instead of blue, thus looks less
+ * silly */
+a code { text-decoration: underline }
+/* Make my own compact dl styling because I don't like existing options */
+dl.compact > dt, dl.compact > dd {
+  display: inline;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+dl.compact { margin: 0.5em 0 0.5em 1em }
+dl.compact > dt::before {
+  content: '\2022  ';
+}
+dl.compact > dd::before {
+  content: ': ';
+}
+dl.compact > dd + dt::before {
+  white-space: pre;
+  content: '\A\2022  ';
+}
+dl.compact > dt + dt::before,
+dl.compact > dd + dd::before {
+  content: ', ';
+}
 </style>
 <body class=draft>
 <div class=head id=head>
@@ -1143,21 +1165,21 @@
 
   <li>If <var>parent</var> is not a string, return false.
 
-  <li>If <var>parent</var> is in the following table, then return true if
-  <var>child</var> is listed as an allowed child, and false otherwise.
+  <li>If <var>parent</var> is on the left-hand side of an entry on the
+  following list, then return true if <var>child</var> is listed on the
+  right-hand side of that entry, and false otherwise.
   <!-- We allow children even where some intervening nodes will be inserted,
   like tr as a child of table. -->
 
-  <table>
-    <tr><th>Parent <th>Allowed children
-    <tr><td>colgroup <td>col
-    <tr><td>table <td>caption, col, colgroup, tbody, td, tfoot, th, thead, tr
-    <tr><td>tbody, tfoot, thead <td>td, th, tr
-    <tr><td>tr <td>td, th
-    <tr><td>dl <td>dt, dd
-    <tr><td>dir, ol, ul <td>dir, li, ol, ul
-    <tr><td>hgroup <td>h1, h2, h3, h4, h5, h6
-  </table>
+  <dl class=compact>
+    <dt>colgroup<dd>col
+    <dt>table<dd>caption<dd>col<dd>colgroup<dd>tbody<dd>td<dd>tfoot<dd>th<dd>thead<dd>tr
+    <dt>tbody<dt>tfoot<dt>thead<dd>td<dd>th<dd>tr
+    <dt>tr<dd>td<dd>th
+    <dt>dl<dd>dt<dd>dd
+    <dt>dir<dt>ol<dt>ul<dd>dir<dd>li<dd>ol<dd>ul
+    <dt>hgroup<dd>h1<dd>h2<dd>h3<dd>h4<dd>h5<dd>h6
+  </dl>
 
   <li>If <var>child</var> is "body", "caption", "col", "colgroup", "frame",
   "frameset", "head", "html", "tbody", "td", "tfoot", "th", "thead", or "tr",
@@ -1171,22 +1193,21 @@
   <li>If <var>child</var> is "li" and <var>parent</var> is not "ol" or "ul",
   return false.
 
-  <li>If <var>parent</var> is in the following table and <var>child</var> is
-  listed as a prohibited child, return false.
-
-  <table>
-    <tr><th>Parent <th>Prohibited children
-    <tr><td>a <td>a
-    <tr><td>dd, dt <td>dd, dt
-    <tr><td>h1, h2, h3, h4, h5, h6 <td>h1, h2, h3, h4, h5, h6
-    <tr><td>li <td>li
-    <tr><td>nobr <td>nobr
-    <tr><td>all <span title="name of an element with inline contents">names
-          of an element with inline contents</span>
-        <td>All <span title="prohibited paragraph child name">prohibited
-          paragraph child names</span>
-    <tr><td>td, th <td>caption, col, colgroup, tbody, td, tfoot, th, thead, tr
-  </table>
+  <li>If <var>parent</var> is on the left-hand side of an entry on the
+  following list and <var>child</var> is listed on the right-hand side of that
+  entry, return false.
+
+  <dl class=compact>
+    <dt>a<dd>a
+    <dt>dd<dt>dt<dd>dd<dd>dt
+    <dt>h1<dt>h2<dt>h3<dt>h4<dt>h5<dt>h6<dd>h1<dd>h2<dd>h3<dd>h4<dd>h5<dd>h6
+    <dt>li<dd>li
+    <dt>nobr<dd>nobr
+    <dt>All <span title="name of an element with inline contents">names of an
+    element with inline contents</span><dd>all <span title="prohibited
+    paragraph child name">prohibited paragraph child names</span>
+    <dt>td<dt>th<dd>caption<dd>col<dd>colgroup<dd>tbody<dd>td<dd>tfoot<dd>th<dd>thead<dd>tr
+  </dl>
 
   <li>Return true.
 </ol>
@@ -1451,14 +1472,10 @@
   equal to the CSS property name listed for it, return the string listed for
   it.
 
-  <dl class=switch>
-    <dt>[[b]]
-    <dt>[[strong]]
-    <dd>font-weight: "bold"
-
-    <dt>[[i]]
-    <dt>[[em]]
-    <dd>font-style: "italic"
+  <dl class=compact>
+    <dt>[[b]]<dt>[[strong]]<dd>font-weight: "bold"
+
+    <dt>[[i]]<dt>[[em]]<dd>font-style: "italic"
   </dl>
 
   <li>Return null.
@@ -1981,14 +1998,14 @@
   <var>new parent</var> to the number from the following table based on
   <var>new value</var>:
 
-  <dl class=switch>
-    <dt>xx-small <dd>1
-    <dt>small <dd>2
-    <dt>normal <dd>3
-    <dt>large <dd>4
-    <dt>x-large <dd>5
-    <dt>xx-large <dd>6
-    <dt>xxx-large <dd>7
+  <dl class=compact>
+    <dt>xx-small<dd>1
+    <dt>small<dd>2
+    <dt>normal<dd>3
+    <dt>large<dd>4
+    <dt>x-large<dd>5
+    <dt>xx-large<dd>6
+    <dt>xxx-large<dd>7
   </dl>
 
   <!-- We always use sup/sub elements, even in CSS mode, following Gecko and
@@ -2536,14 +2553,14 @@
     <li>Set <var>value</var> to the string here corresponding to
     <var>number</var>:
 
-    <dl class=switch>
-      <dt>1 <dd>xx-small
-      <dt>2 <dd>small
-      <dt>3 <dd>medium
-      <dt>4 <dd>large
-      <dt>5 <dd>x-large
-      <dt>6 <dd>xx-large
-      <dt>7 <dd>xxx-large
+    <dl class=compact>
+      <dt>1<dd>xx-small
+      <dt>2<dd>small
+      <dt>3<dd>medium
+      <dt>4<dd>large
+      <dt>5<dd>x-large
+      <dt>6<dd>xx-large
+      <dt>7<dd>xxx-large
     </dl>
 
     <!--
@@ -2560,7 +2577,6 @@
   <li>If <var>value</var> is not one of the strings "xx-small", "x-small",
   "small", "medium", "large", "x-large", "xx-large", "xxx-large", and is not a
   valid CSS absolute length, then raise a [[SYNTAX_ERR]] exception.
-
   <!--
   Not sure this is the best way to do it.  We don't want to allow relative
   lengths, because those can have very weird user-visible behavior.  For