Add 'layout-grid-char' property

Add 'layout-grid-measure' property

Author: kojiishi

css-line-grid/Overview.html

@@ -39,13 +39,13 @@
 
    <h1>CSS Line Grid Module</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 May 2011</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 May 2011</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110514/">
-     http://www.w3.org/TR/2011/ED-unknown-shortname-20110514</a> <!--
+    <dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110521/">
+     http://www.w3.org/TR/2011/ED-unknown-shortname-20110521</a> <!--
   <dt>Latest version:
     <dd><a href="http://www.w3.org/TR/css-line-grid">
     http://www.w3.org/TR/css-line-grid</a>
@@ -171,10 +171,24 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
      <li><a href="#grid-length-unit"><span class=secno>3.3. </span>The
       &lsquo;<code class=css>gd</code>&rsquo; length unit</a>
 
-     <li><a href="#round-length"><span class=secno>3.4. </span>Rounding
-      Lengths to Multiple of Units: &lsquo;<code
-      class=css>rounddown()</code>&rsquo; and &lsquo;<code
-      class=css>roundup()</code>&rsquo; </a>
+     <li><a href="#forcing-line-width-to-multiple-of-em"><span
+      class=secno>3.4. </span>Forcing Line Width to Multiple of
+      <em>em</em></a>
+      <ul class=toc>
+       <li><a href="#round-length"><span class=secno>3.4.1. </span>Rounding
+        Lengths to Multiple of Units: &lsquo;<code
+        class=css>rounddown()</code>&rsquo; and &lsquo;<code
+        class=css>roundup()</code>&rsquo; </a>
+
+       <li><a href="#rounding-lengths-to-multiple-of-units-th"><span
+        class=secno>3.4.2. </span>Rounding Lengths to Multiple of Units: the
+        &lsquo;<code class=property>layout-grid-measure</code>&rsquo;
+        property</a>
+
+       <li><a href="#character-grid-the-layout-grid-char-prop"><span
+        class=secno>3.4.3. </span>Character Grid: the &lsquo;<code
+        class=property>layout-grid-char</code>&rsquo; property</a>
+      </ul>
     </ul>
 
    <li><a href="#conformance"><span class=secno>4. </span> Conformance</a>
@@ -675,11 +689,17 @@ <h3 id=grid-length-unit><span class=secno>3.3. </span>The &lsquo;<code
 <!-- --></code></pre>
   </div>
 
-  <h3 id=round-length><span class=secno>3.4. </span>Rounding Lengths to
+  <h3 id=forcing-line-width-to-multiple-of-em><span class=secno>3.4.
+   </span>Forcing Line Width to Multiple of <em>em</em></h3>
+
+  <p class=issue>There are multiple ideas for this, and all ideas are listed
+   here for disucssions.
+
+  <h4 id=round-length><span class=secno>3.4.1. </span>Rounding Lengths to
    Multiple of Units: &lsquo;<code class=css><span class=index id=rounddown
    title="length unit::rounddown()">rounddown()</span></code>&rsquo; and
    &lsquo;<code class=css><span class=index id=roundup title="length
-   unit::rounddown()">roundup()</span></code>&rsquo;</h3>
+   unit::rounddown()">roundup()</span></code>&rsquo;</h4>
 
   <p>The &lsquo;<code class=property>width</code>&rsquo; and &lsquo;<code
    class=property>height</code>&rsquo; properties accept &lsquo;<code
@@ -708,8 +728,6 @@ <h3 id=round-length><span class=secno>3.4. </span>Rounding Lengths to
    class=property>float</code>&rsquo; property is &lsquo;<code
    class=css>left</code>&rsquo;, the fraction is added to the right margins.
 
-  <p class=issue>Should this be a property instead?
-
   <p class=issue>Is this design appropriate to solve text with floats case?
 
   <p class=issue>Are there requirements for table cell width?
@@ -738,6 +756,114 @@ <h3 id=round-length><span class=secno>3.4. </span>Rounding Lengths to
 <!-- --></code></pre>
   </div>
 
+  <h4 id=rounding-lengths-to-multiple-of-units-th><span class=secno>3.4.2.
+   </span>Rounding Lengths to Multiple of Units: the &lsquo;<a
+   href="#layout-grid-measure"><code
+   class=property>layout-grid-measure</code></a>&rsquo; property</h4>
+
+  <table class=propdef>
+   <tbody>
+    <tr>
+     <th>Name:
+
+     <td><dfn id=layout-grid-measure>layout-grid-measure</dfn>
+
+    <tr>
+     <th>Value:
+
+     <td>none | auto | &lt;length&gt; || up | down
+
+    <tr>
+     <th>Initial:
+
+     <td>none
+
+    <tr>
+     <th>Applies to:
+
+     <td>block containers
+
+    <tr>
+     <th>Inherited:
+
+     <td>no
+
+    <tr>
+     <th>Percentages:
+
+     <td>N/A
+
+    <tr>
+     <th>Media:
+
+     <td>visual
+
+    <tr>
+     <th>Computed&nbsp;value:
+
+     <td>specified value
+  </table>
+
+  <h4 id=character-grid-the-layout-grid-char-prop><span class=secno>3.4.3.
+   </span>Character Grid: the &lsquo;<a href="#layout-grid-char"><code
+   class=property>layout-grid-char</code></a>&rsquo; property</h4>
+
+  <table class=propdef>
+   <tbody>
+    <tr>
+     <th>Name:
+
+     <td><dfn id=layout-grid-char>layout-grid-char</dfn>
+
+    <tr>
+     <th>Value:
+
+     <td>none | auto | &lt;length&gt;
+
+    <tr>
+     <th>Initial:
+
+     <td>none
+
+    <tr>
+     <th>Applies to:
+
+     <td>block containers
+
+    <tr>
+     <th>Inherited:
+
+     <td>no
+
+    <tr>
+     <th>Percentages:
+
+     <td>N/A
+
+    <tr>
+     <th>Media:
+
+     <td>visual
+
+    <tr>
+     <th>Computed&nbsp;value:
+
+     <td>specified value
+  </table>
+
+  <p>This property defines a character grid for the element. Possible values
+   are:
+
+  <p>When a character grid is defined, the start and end edge of a line box
+   snap to the nearest grid in the direction to shorten the line box.
+
+  <div class=figure> <object data=line-length.svg height=158
+   type="image/svg+xml" width=340> </object>
+   <p class=caption>The gray part of a line box is rounded down to snap to
+    the grid. The second line box has a float on the left (green), and
+    therefore its start edge snaps to the grid as well.</p>
+  </div>
+
   <h2 id=conformance><span class=secno>4. </span> Conformance</h2>
 
   <h3 id=conformance-classes><span class=secno>4.1. </span> Conformance
@@ -957,6 +1083,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>authoring tool, <a href="#authoring-tool" title="authoring
     tool"><strong>4.1.</strong></a>
 
+   <li>layout-grid-char, <a href="#layout-grid-char"
+    title=layout-grid-char><strong>3.4.3.</strong></a>
+
    <li>layout-grid-line, <a href="#layout-grid-line"
     title=layout-grid-line><strong>2.1.</strong></a>
     <ul>
@@ -973,6 +1102,9 @@ <h2 class=no-num id=index>Index</h2>
       percent"><strong>2.1.</strong></a>
     </ul>
 
+   <li>layout-grid-measure, <a href="#layout-grid-measure"
+    title=layout-grid-measure><strong>3.4.2.</strong></a>
+
    <li>layout-grid-mode, <a href="#layout-grid-mode"
     title=layout-grid-mode><strong>3.1.</strong></a>
     <ul>
@@ -994,8 +1126,8 @@ <h2 class=no-num id=index>Index</h2>
      <li>gd, <a href="#gd" title="length unit, gd">3.3.</a>
 
      <li>rounddown(), <a href="#rounddown" title="length unit,
-      rounddown()">3.4.</a>, <a href="#roundup" title="length unit,
-      rounddown()">3.4.</a>
+      rounddown()">3.4.1.</a>, <a href="#roundup" title="length unit,
+      rounddown()">3.4.1.</a>
     </ul>
 
    <li>renderer, <a href="#renderer" title=renderer><strong>4.1.</strong></a>
@@ -1030,7 +1162,22 @@ <h2 class=no-num id=property-index>Property index</h2>
      <th>Media
 
    <tbody>
-    <tr valign=baseline>
+    <tr>
+     <td><a class=property href="#layout-grid-char">layout-grid-char</a>
+
+     <td>none | auto | &lt;length&gt;
+
+     <td>none
+
+     <td>block containers
+
+     <td>no
+
+     <td>N/A
+
+     <td>visual
+
+    <tr>
      <td><a class=property href="#layout-grid-line">layout-grid-line</a>
 
      <td>none | auto | &lt;length&gt; | &lt;percentage&gt;
@@ -1045,7 +1192,23 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>visual
 
-    <tr valign=baseline>
+    <tr>
+     <td><a class=property
+      href="#layout-grid-measure">layout-grid-measure</a>
+
+     <td>none | auto | &lt;length&gt; || up | down
+
+     <td>none
+
+     <td>block containers
+
+     <td>no
+
+     <td>N/A
+
+     <td>visual
+
+    <tr>
      <td><a class=property href="#layout-grid-mode">layout-grid-mode</a>
 
      <td>none | baseline | block | line

css-line-grid/Overview.src.html

@@ -491,10 +491,12 @@ <h3 id="grid-length-unit">The ''<span class="index" title="length unit::gd">gd</
 <!-- --></code></pre>
   </div>
 
-<h3 id="round-length">Rounding Lengths to Multiple of Units:
+<h3>Forcing Line Width to Multiple of <em>em</em></h3>
+  <p class="issue">There are 3 ideas for this, and all ideas are listed here for disucssions.</p>
+<h4 id="round-length">Rounding Lengths to Multiple of Units:
   ''<span class="index" title="length unit::rounddown()">rounddown()</span>''
   and ''<span class="index" title="length unit::rounddown()">roundup()</span>''
-  </h3>
+  </h4>
 
   <p>The 'width' and 'height' properties
     accept ''rounddown(<em>length</em>)''
@@ -520,7 +522,6 @@ <h3 id="round-length">Rounding Lengths to Multiple of Units:
     For example, if the 'float' property is ''left'',
     the fraction is added to the right margins.</p>
 
-  <p class="issue">Should this be a property instead?</p>
   <p class="issue">Is this design appropriate to solve text with floats case?</p>
   <p class="issue">Are there requirements for table cell width?</p>
   <p class="issue">Should have an option to left/right align instead of center?
@@ -547,6 +548,87 @@ <h3 id="round-length">Rounding Lengths to Multiple of Units:
 <!-- --></code></pre>
   </div>
 
+<h4>Rounding Lengths to Multiple of Units: the 'layout-grid-measure' property</h4>
+
+  <table class=propdef>
+    <tr>
+      <th>Name:
+      <td><dfn>layout-grid-measure</dfn>
+    <tr>
+      <th>Value:
+      <td>none
+        | auto
+        | &lt;length&gt;
+        || up | down
+    <tr>
+      <th>Initial:
+      <td>none
+    <tr>
+      <th>Applies to:
+      <td>block containers
+    <tr>
+      <th>Inherited:
+      <td>no
+    <tr>
+      <th>Percentages:
+      <td>N/A
+    <tr>
+      <th>Media:
+      <td>visual
+    <tr>
+      <th>Computed&nbsp;value:
+      <td>specified value
+  </table>
+
+<h4>Character Grid: the 'layout-grid-char' property</h4>
+
+  <table class=propdef>
+    <tr>
+      <th>Name:
+      <td><dfn>layout-grid-char</dfn>
+    <tr>
+      <th>Value:
+      <td>none
+        | auto
+        | &lt;length&gt;
+    <tr>
+      <th>Initial:
+      <td>none
+    <tr>
+      <th>Applies to:
+      <td>block containers
+    <tr>
+      <th>Inherited:
+      <td>no
+    <tr>
+      <th>Percentages:
+      <td>N/A
+    <tr>
+      <th>Media:
+      <td>visual
+    <tr>
+      <th>Computed&nbsp;value:
+      <td>specified value
+  </table>
+
+  <p>This property defines a character grid for the element. Possible values are:</p>
+
+  <p>When a character grid is defined,
+    start and end edges of a line box snap to the nearest grid
+    in the direction to shorten the line box.</p>
+
+  <div class="figure">
+    <object
+      data="line-length.svg" type="image/svg+xml"
+      width="340" height="158">
+    </object>
+    <p class="caption">The gray part of a line box is rounded down to snap to the grid.
+      The second line box has a float on the left (green),
+      and therefore its start edge snaps to the grid as well.</p>
+  </div>
+
+  
+
 <h2 id="conformance">
 Conformance</h2>