Add layout-grid-mode: baseline

Author: kojiishi

css-line-grid/Overview.html

@@ -418,7 +418,7 @@ <h3 id=layout-grid-mode-prop><span class=secno>3.1. </span>Grid Mode: the
     <tr>
      <th>Value:
 
-     <td>none | block | line
+     <td>none | baseline | block | line
 
     <tr>
      <th>Initial:
@@ -460,6 +460,17 @@ <h3 id=layout-grid-mode-prop><span class=secno>3.1. </span>Grid Mode: the
 
    <dd>Do not align any objects to the grids.
 
+   <dt><dfn id=baseline title="layout-grid-mode::baseline">&lsquo;<code
+    class=css>baseline</code>&rsquo;</dfn>
+
+   <dd>Align baselines to the line grids. <!--
+        The line in this definition is a line box
+        with before margin included if it is the first line of a block,
+        and with after margin if last.
+        -->
+    The height is the height of the line box. Increasing heights to fit to
+    grids is done by increasing the computed height of the line box.
+
    <dt><dfn id=block title="layout-grid-mode::block">&lsquo;<code
     class=css>block</code>&rsquo;</dfn>
 
@@ -484,12 +495,22 @@ <h3 id=layout-grid-mode-prop><span class=secno>3.1. </span>Grid Mode: the
   <p class=issue>Handling margins and borders needs review
 
   <p>When this property is set to anything other than &lsquo;<code
-   class=css>none</code>&rsquo;, the object to align is vertically centered
-   within the grid row. If the computed height is larger than the grid space,
-   then the object is centered within the smallest number of grid rows
-   necessary for the object to fit in. The starting alignment point is moved
-   accordingly. This is illustrated below, where <em>a</em> represents the
-   numerical &lsquo;<a href="#layout-grid-line"><code
+   class=css>none</code>&rsquo;, the computed height of the object is
+   increased to the smallest multiple of the grid heights that is equal to or
+   smaller than the original computed height.
+
+  <p>When the value of this property is &lsquo;<code
+   class=css>baseline</code>&rsquo;, the line box is then moved so that its
+   baseline is aligned to the next closest grid.
+
+  <p>When the value of this property is either &lsquo;<code
+   class=css>block</code>&rsquo; or &lsquo;<code
+   class=css>line</code>&rsquo;, the object is vertically centered within the
+   grid row. If the computed height is larger than the grid space, then the
+   object is centered within the smallest number of grid rows necessary for
+   the object to fit in. The starting alignment point is moved accordingly.
+   This is illustrated below, where <em>a</em> represents the numerical
+   &lsquo;<a href="#layout-grid-line"><code
    class=property>layout-grid-line</code></a>&rsquo; value, <em>b</em> and
    <em>c</em> are half the difference between the computed line-heights and
    either the layout-grid-line value or twice the value respectively.:
@@ -518,7 +539,8 @@ <h3 id=layout-grid-mode-prop><span class=secno>3.1. </span>Grid Mode: the
    baselines to grids rather than center of line boxes if we consider cases
    like only a word in a line is large. But how can we align baselines to
    grids? Align baselines to center of grids? Lines may not fit within one
-   grid.
+   grid. Align baselines to grids might work better, but it may not work well
+   with settings headigns to &lsquo;<code class=css>block</code>&rsquo;.
 
   <div class=example>
    <div class=sidefigure> <img alt="Large text wraps within line grids"
@@ -866,6 +888,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>layout-grid-mode, <a href="#layout-grid-mode"
     title=layout-grid-mode><strong>3.1.</strong></a>
     <ul>
+     <li>baseline, <a href="#baseline" title="layout-grid-mode,
+      baseline"><strong>3.1.</strong></a>
+
      <li>block, <a href="#block" title="layout-grid-mode,
       block"><strong>3.1.</strong></a>
 
@@ -935,7 +960,7 @@ <h2 class=no-num id=property-index>Property index</h2>
     <tr valign=baseline>
      <td><a class=property href="#layout-grid-mode">layout-grid-mode</a>
 
-     <td>none | block | line
+     <td>none | baseline | block | line
 
      <td>none
 

css-line-grid/Overview.src.html

@@ -262,7 +262,7 @@ <h3 id="layout-grid-mode-prop">Grid Mode: the 'layout-grid-mode' property</h3>
       <td><dfn>layout-grid-mode</dfn>
     <tr>
       <th>Value:
-      <td>none | block | line
+      <td>none | baseline | block | line
     <tr>
       <th>Initial:
       <td>none
@@ -289,6 +289,17 @@ <h3 id="layout-grid-mode-prop">Grid Mode: the 'layout-grid-mode' property</h3>
   <dl>
     <dt><dfn title="layout-grid-mode::none">''none''</dfn></dt>
       <dd>Do not align any objects to the grids.</dd>
+    <dt><dfn title="layout-grid-mode::baseline">''baseline''</dfn></dt>
+      <dd>Align baselines to the line grids.
+        <!--
+        The line in this definition is a line box
+        with before margin included if it is the first line of a block,
+        and with after margin if last.
+        -->
+        The height is the height of the line box.
+        Increasing heights to fit to grids is done by
+        increasing the computed height of the line box.
+      </dd>
     <dt><dfn title="layout-grid-mode::block">''block''</dfn></dt>
       <dd>Align blocks to the line grids.
         <!--
@@ -313,7 +324,16 @@ <h3 id="layout-grid-mode-prop">Grid Mode: the 'layout-grid-mode' property</h3>
   <p class="issue">Handling margins and borders needs review</p>
 
   <p>When this property is set to anything other than ''none'',
-    the object to align is vertically centered within the grid row.
+    the computed height of the object is increased to
+    the smallest multiple of the grid heights
+    that is equal to or smaller than the original computed height.</p>
+
+  <p>When the value of this property is ''baseline'',
+    the line box is then moved so that its baseline is aligned
+    to the next closest grid.</p>
+
+  <p>When the value of this property is either ''block'' or ''line'',
+    the object is vertically centered within the grid row.
     If the computed height is larger than the grid space,
     then the object is centered within the smallest number of grid rows
     necessary for the object to fit in.
@@ -349,7 +369,8 @@ <h3 id="layout-grid-mode-prop">Grid Mode: the 'layout-grid-mode' property</h3>
     to align baselines to grids rather than center of line boxes
     if we consider cases like only a word in a line is large.
     But how can we align baselines to grids?
-    Align baselines to center of grids? Lines may not fit within one grid.</p>
+    Align baselines to center of grids? Lines may not fit within one grid.
+    Align baselines to grids might work better, but it may not work well with settings headigns to ''block''.</p>
 
   <div class="example">
     <div class="sidefigure">