W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2011

csswg/css3-writing-modes Overview.html,1.75,1.76 Overview.src.html,1.79,1.80

From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
Date: Sat, 12 Feb 2011 04:33:06 +0000
To: public-css-commits@w3.org
Message-Id: <E1Po7AQ-0004Ab-IM@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-writing-modes
In directory hutz:/tmp/cvs-serv15993

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Add first cut of baseline alignment section

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-writing-modes/Overview.html,v
retrieving revision 1.75
retrieving revision 1.76
diff -u -d -r1.75 -r1.76
--- Overview.html	28 Jan 2011 20:04:08 -0000	1.75
+++ Overview.html	12 Feb 2011 04:33:04 -0000	1.76
@@ -28,14 +28,14 @@
 
    <h1>CSS Writing Modes Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 01 February
+   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 12 February
     2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110201">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110201</a>
+     href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110212">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110212</a>
      
 
     <dt>Latest version:
@@ -173,70 +173,86 @@
       property</a>
     </ul>
 
-   <li><a href="#intro-text-layout"><span class=secno>4. </span> Introduction
+   <li><a href="#inline-alignment"><span class=secno>4. </span> Inline-level
+    Alignment</a>
+    <ul class=toc>
+     <li><a href="#intro-baselines"><span class=secno>4.1. </span>
+      Introduction to Baselines</a>
+
+     <li><a href="#text-baselines"><span class=secno>4.2. </span> Text
+      Baselines</a>
+
+     <li><a href="#replaced-baselines"><span class=secno>4.3. </span> Atomic
+      Inline Baselines</a>
+
+     <li><a href="#baseline-alignment"><span class=secno>4.4. </span>
+      Baseline Alignment</a>
+    </ul>
+
+   <li><a href="#intro-text-layout"><span class=secno>5. </span> Introduction
     to Intrinsic Text Layout</a>
     <ul class=toc>
-     <li><a href="#text-orientation"><span class=secno>4.1. </span>Orienting
+     <li><a href="#text-orientation"><span class=secno>5.1. </span>Orienting
       Text: the &lsquo;<code class=property>text-orientation</code>&rsquo;
       property</a>
     </ul>
 
-   <li><a href="#abstract-box"><span class=secno>5. </span> Abstract Box
+   <li><a href="#abstract-box"><span class=secno>6. </span> Abstract Box
     Terminology</a>
     <ul class=toc>
-     <li><a href="#abstract-dimensions"><span class=secno>5.1. </span>
+     <li><a href="#abstract-dimensions"><span class=secno>6.1. </span>
       Logical Dimensions</a>
 
-     <li><a href="#abstract-directions"><span class=secno>5.2. </span>
+     <li><a href="#abstract-directions"><span class=secno>6.2. </span>
       Abstract and Physical Directions</a>
 
-     <li><a href="#line-directions"><span class=secno>5.3. </span>
+     <li><a href="#line-directions"><span class=secno>6.3. </span>
       Line-relative Directions</a>
 
-     <li><a href="#logical-directions"><span class=secno>5.4. </span>
+     <li><a href="#logical-directions"><span class=secno>6.4. </span>
       Flow-relative Directions</a>
 
-     <li><a href="#logical-to-physical"><span class=secno>5.5. </span>
+     <li><a href="#logical-to-physical"><span class=secno>6.5. </span>
       Abstract-to-Physical Mappings</a>
     </ul>
 
-   <li><a href="#abstract-layout"><span class=secno>6. </span> Abstract Box
+   <li><a href="#abstract-layout"><span class=secno>7. </span> Abstract Box
     Layout</a>
     <ul class=toc>
-     <li><a href="#vertical-layout"><span class=secno>6.1. </span> Principles
+     <li><a href="#vertical-layout"><span class=secno>7.1. </span> Principles
       of Layout in Vertical Writing Modes</a>
 
-     <li><a href="#dimension-mapping"><span class=secno>6.2. </span>
+     <li><a href="#dimension-mapping"><span class=secno>7.2. </span>
       Dimensional Mapping</a>
 
-     <li><a href="#orthogonal-flows"><span class=secno>6.3. </span>
+     <li><a href="#orthogonal-flows"><span class=secno>7.3. </span>
       Orthogonal Flows</a>
       <ul class=toc>
-       <li><a href="#orthogonal-auto"><span class=secno>6.3.1. </span>
+       <li><a href="#orthogonal-auto"><span class=secno>7.3.1. </span>
         Auto-sizing in Orthogonal Flows</a>
 
-       <li><a href="#orthogonal-multicol"><span class=secno>6.3.2. </span>
+       <li><a href="#orthogonal-multicol"><span class=secno>7.3.2. </span>
         Multi-column Layout in Orthogonal Flows</a>
 
-       <li><a href="#orthogonal-pagination"><span class=secno>6.3.3. </span>
+       <li><a href="#orthogonal-pagination"><span class=secno>7.3.3. </span>
         Paginating Orthogonal Flows</a>
       </ul>
 
-     <li><a href="#logical-direction-layout"><span class=secno>6.4. </span>
+     <li><a href="#logical-direction-layout"><span class=secno>7.4. </span>
       Flow-Relative Mappings</a>
 
-     <li><a href="#line-mappings"><span class=secno>6.5. </span>
+     <li><a href="#line-mappings"><span class=secno>7.5. </span>
       Line-Relative Mappings</a>
 
-     <li><a href="#physical-only"><span class=secno>6.6. </span> Purely
+     <li><a href="#physical-only"><span class=secno>7.6. </span> Purely
       Physical Mappings</a>
 
-     <li><a href="#caption-side"><span class=secno>6.7. </span> Table Caption
+     <li><a href="#caption-side"><span class=secno>7.7. </span> Table Caption
       Mappings: the &lsquo;<code class=property>caption-side</code>&rsquo;
       property </a>
     </ul>
 
-   <li><a href="#text-combine"><span class=secno>7. </span>Glyph Composition:
+   <li><a href="#text-combine"><span class=secno>8. </span>Glyph Composition:
     the &lsquo;<code class=property>text-combine</code>&rsquo; property</a>
 
    <li class=no-num><a href="#acknowledgements">Acknowledgements</a>
@@ -1057,12 +1073,182 @@
     src=vertical-lr.png width=300></p>
   </div>
 
-  <h2 id=intro-text-layout><span class=secno>4. </span> Introduction to
+  <h2 id=inline-alignment><span class=secno>4. </span> Inline-level Alignment</h2>
+
+  <p>When different kinds of inline-level content are placed together on a
+   line, the baselines of the content and the settings of the &lsquo;<code
+   class=property>vertical-align</code>&rsquo; property control how they are
+   aligned in the transverse direction of the line box. This section
+   discusses what baselines are, how to find them, and how they are used
+   together with the &lsquo;<code class=property>vertical-align</code>&rsquo;
+   property to determine the alignment of inline-level content.
+
+  <h3 id=intro-baselines><span class=secno>4.1. </span> Introduction to
+   Baselines</h3>
+
+  <p><em>This section is non-normative.</em>
+
+  <p>A <dfn id=baseline>baseline</dfn> is a line along the <i>inline axis</i>
+   of a line box along which individual glyphs of text are aligned. Baselines
+   guide the design of glyphs in a font (for example, the bottom of most
+   alphabetic glyphs typically align with the alphabetic baseline), and they
+   guide the alignment of glyphs from different fonts or font sizes when
+   typesetting.
+
+  <div class=figure> Alphabetic text in two font sizes with the baseline and
+   emboxes indicated</div>
+
+  <p>Different writing systems prefer different baseline tables.
+
+  <div class=figure>
+   <p><img alt="Latin prefers the alphabetic baseline, on top of which most
+    letters rest, though some have descenders that dangle below it. Indic
+    scripts are sometimes typeset with a hanging baseline, since their glyph
+    shapes appear to be hanging from a horizontal line. Han-based systems,
+    whose glyphs are designed to fill a square, tend to align on their
+    bottoms." src=script-preferred-baselines.gif></p>
+
+   <p class=caption>Preferred baselines in various writing systems</p>
+  </div>
+
+  <p>A well-constructed font contains a <dfn id=baseline-table>baseline
+   table</dfn>, which indicates the position of one or more baselines within
+   the font's design coordinate space. (This coordinate space is scaled with
+   the font size.)
+
+  <div class=figure>
+   <p><img alt="" src=baselines.gif></p>
+
+   <p class=caption>In a well-designed mixed-script font, the glyphs are
+    positioned in the coordinate space to harmonize with one another when
+    typeset together. The baseline table is then constructed to match the
+    shape of the glyphs, each baseline positioned to match the glyphs from
+    its preferred scripts.</p>
+  </div>
+
+  <p>The baseline table is a property of the font, and the positions of the
+   various baselines apply to all glyphs in the font.
+
+  <p>Different baseline tables can be provided for alignment in horizontal
+   and vertical text.
+
+  <h3 id=text-baselines><span class=secno>4.2. </span> Text Baselines</h3>
+
+  <p>In this specification, only the following baselines are considered:
+
+  <dl>
+   <dt>alphabetic
+
+   <dd>The alphabetic baseline, which typically aligns with the bottom of
+    uppercase Latin glyphs. In horizontal typographic mode, this is the
+    dominant baseline. If the font is missing this baseline, it is assumed to
+    be <span class=issue>what's a good assumption? Zero in the coord space?
+    Bottom of the embox? Something else?</span>
+
+   <dt>central
+
+   <dd>The central baseline, which typically crosses the center of the em
+    box. In vertical typographic mode, this is the dominant baseline. If the
+    font is missing this baseline, it is assumed to be halfway between the
+    ascender (<a href="#over"><i>over</i></a>) and descender (<a
+    href="#under"><i>under</i></a>) edges of the em box.
+  </dl>
+
+  <p class=note>A future CSS module will deal with baselines in more detail
+   and allow the choice of other dominant baselines and alignment options.
+
+  <h3 id=replaced-baselines><span class=secno>4.3. </span> Atomic Inline
+   Baselines</h3>
+
+  <p>If an <a
+   href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">atomic
+   inline</a> (such as an inline-block, inline-table, or replaced inline
+   element) is not capable of providing its own baseline information, then
+   the UA synthesizes a baseline table thus:
+
+  <dl>
+   <dt>alphabetic
+
+   <dd>The alphabetic baseline is assumed to be at the <a
+    href="#under"><i>under</i></a> margin edge.
+
+   <dt>central
+
+   <dd>The central baseline is assumed to be halfway between the <i>under<i>
+    and <i>over<i> margin edges of the box. </i></i></i></i>
+  </dl>
+
+  <h3 id=baseline-alignment><span class=secno>4.4. </span> Baseline Alignment</h3>
+
+  <p>The dominant baseline is used in CSS for alignment in two cases:
+
+  <ul>
+   <li>Aligning glyphs from different fonts within the same inline box. The
+    glyphs are aligned by matching up the positions of the dominant baseline.
+    
+
+   <li>Aligning a child inline within its parent. The child is aligned to the
+    parent by matching the parent's dominant baseline to the same baseline in
+    the child. (E.g. if the parent's dominant baseline is alphabetic, then
+    the child's alphabetic baseline is matched to the parent's alphabetic
+    baseline, even if the child's dominant baseline is something else.)
+    <div class=example>
+     <p>Given following sample markup:
+
+     <pre>&lt;p&gt;&lt;span class="outer"&gt;Ap &lt;span class="inner"&gt;<i>ji</i>&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;</pre>
+
+     <pre>
+        </pre>
+
+     <p>And the following style rule:
+
+     <pre>span.inner { font-size: .75em; }</pre>
+
+     <p>The baseline tables of the parent (<code>.outer</code>) and the child
+      (<code>.inner</code>) will not mach up due to the font size difference.
+      Since the dominant baseline is the alphabetic baseline, the child box
+      is aligned to its parent by matching up their alphabetic baselines.
+
+     <div class=figure>
+      <p><img alt="" src=baseline-align-sizes.gif>
+     </div>
+    </div>
+
+    <p>Basline alignment in this fashion is used with the following values of
+     &lsquo;<code class=property>vertical-align</code>&rsquo;: &lsquo;<a
+     href="#baseline"><code class=css>baseline</code></a>&rsquo;,
+     &lsquo;<code class=css>sub</code>&rsquo;, &lsquo;<code
+     class=css>super</code>&rsquo;, &lt;length&gt;, &lt;percentage&gt;. In
+     the latter cases, the baselines are aligned as for &lsquo;<a
+     href="#baseline"><code class=css>baseline</code></a>&rsquo;, but the
+     child is shifted according to the offset given by its &lsquo;<code
+     class=property>vertical-align</code>&rsquo; value.
+
+    <div class=example>
+     <p>If we assign &lsquo;<code class=css>vertical-align:
+      super</code>&rsquo; to the <code>.inner</code> element from the example
+      above, the same rules are used to align the <code>.inner</code> child
+      to its parent; the only difference is in addition to the baseline
+      alignment, the child is shifted to the superscipt position.
+
+     <pre>span.inner { vertical-align: super; font-size: .75em; }</pre>
+
+     <div class=figure>
+      <p><img alt="In this example, the resulting alignment is equivalent to
+       shifting the parent baseline table upwards by the superscript offset,
+       and then aligning the child's alphabetic baseline to the shifted
+       position of the parent's alphabetic baseline."
+       src=baseline-align-super.gif>
+     </div>
+    </div>
+  </ul>
+
+  <h2 id=intro-text-layout><span class=secno>5. </span> Introduction to
    Intrinsic Text Layout</h2>
 
   <p>[Describe here any necessary concepts from UTN22]
 
-  <h3 id=text-orientation><span class=secno>4.1. </span>Orienting Text: the
+  <h3 id=text-orientation><span class=secno>5.1. </span>Orienting Text: the
    &lsquo;<a href="#text-orientation0"><code
    class=property>text-orientation</code></a>&rsquo; property</h3>
 
@@ -1239,7 +1425,7 @@
   <p class=issue>Add appendix that describes interaction with OpenType
    features and font layout?
 
-  <h2 id=abstract-box><span class=secno>5. </span> Abstract Box Terminology</h2>
+  <h2 id=abstract-box><span class=secno>6. </span> Abstract Box Terminology</h2>
 
   <p><a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines
    the box layout model of CSS in detail. However, it only defines the box
@@ -1252,7 +1438,7 @@
    modes, and to provide terminology for future specs to define their layout
    concepts abstactly.
 
-  <h3 id=abstract-dimensions><span class=secno>5.1. </span> Logical
+  <h3 id=abstract-dimensions><span class=secno>6.1. </span> Logical
    Dimensions</h3>
 
   <dl>
@@ -1302,7 +1488,7 @@
     typography</a>.)
   </dl>
 
-  <h3 id=abstract-directions><span class=secno>5.2. </span> Abstract and
+  <h3 id=abstract-directions><span class=secno>6.2. </span> Abstract and
    Physical Directions</h3>
 
   <p>The terms <dfn id=left>left</dfn>, <dfn id=right>right</dfn>, <dfn
@@ -1320,7 +1506,7 @@
    href="#direction0"><code class=property>direction</code></a>&rsquo;
    properties.
 
-  <h3 id=line-directions><span class=secno>5.3. </span> Line-relative
+  <h3 id=line-directions><span class=secno>6.3. </span> Line-relative
    Directions</h3>
 
   <p>Although the block flow direction given by &lsquo;<a
@@ -1380,7 +1566,7 @@
    and &lsquo;<a href="#text-orientation0"><code
    class=property>text-orientation</code></a>&rsquo;.
 
-  <h3 id=logical-directions><span class=secno>5.4. </span> Flow-relative
+  <h3 id=logical-directions><span class=secno>6.4. </span> Flow-relative
    Directions</h3>
 
   <p>The <dfn id=flow-relative-directions>flow-relative directions</dfn> are
@@ -1460,7 +1646,7 @@
     </pre>
   </div>
 
-  <h3 id=logical-to-physical><span class=secno>5.5. </span>
+  <h3 id=logical-to-physical><span class=secno>6.5. </span>
    Abstract-to-Physical Mappings</h3>
 
   <p>The following table summarizes the abstract-to-physical mappings:
@@ -1654,9 +1840,9 @@
      <td colspan=2>bottom
   </table>
 
-  <h2 id=abstract-layout><span class=secno>6. </span> Abstract Box Layout</h2>
+  <h2 id=abstract-layout><span class=secno>7. </span> Abstract Box Layout</h2>
 
-  <h3 id=vertical-layout><span class=secno>6.1. </span> Principles of Layout
+  <h3 id=vertical-layout><span class=secno>7.1. </span> Principles of Layout
    in Vertical Writing Modes</h3>
 
   <p>CSS box layout in vertical writing modes is analogous to layout in the
@@ -1715,7 +1901,7 @@
 
   <p>The details of these mappings are provided below.
 
-  <h3 id=dimension-mapping><span class=secno>6.2. </span> Dimensional Mapping</h3>
+  <h3 id=dimension-mapping><span class=secno>7.2. </span> Dimensional Mapping</h3>
   <!--
   <p>Properties that are named in terms of the x and y axes are
     logical with respect to the block flow direction rather than absolute
@@ -1774,7 +1960,7 @@
    CSS2.1, are calculated with respect to the <a
    href="#measure"><em>measure</em></a> of the containing block in CSS3.
 
-  <h3 id=orthogonal-flows><span class=secno>6.3. </span> Orthogonal Flows</h3>
+  <h3 id=orthogonal-flows><span class=secno>7.3. </span> Orthogonal Flows</h3>
 
   <p>When an element has a different &lsquo;<a href="#writing-mode1"><code
    class=property>writing-mode</code></a>&rsquo; from its containing block
@@ -1818,7 +2004,7 @@
    calculate such percentages instead. <span class=issue>Is this definition
    of percentages a good idea?</span>
 
-  <h4 id=orthogonal-auto><span class=secno>6.3.1. </span> Auto-sizing in
+  <h4 id=orthogonal-auto><span class=secno>7.3.1. </span> Auto-sizing in
    Orthogonal Flows</h4>
 
   <p>If the computed measure of an element establishing an orthogonal flow is
@@ -1833,7 +2019,7 @@
    sized, can be aligned or centered within its containing block just like
    other block-level elements by using auto margins.
 
-  <h4 id=orthogonal-multicol><span class=secno>6.3.2. </span> Multi-column
+  <h4 id=orthogonal-multicol><span class=secno>7.3.2. </span> Multi-column
    Layout in Orthogonal Flows</h4>
 
   <p>If the UA supports CSS Multi-column Layout <a href="#CSS3COL"
@@ -1864,7 +2050,7 @@
     with the element's content.
   </ul>
 
-  <h4 id=orthogonal-pagination><span class=secno>6.3.3. </span> Paginating
+  <h4 id=orthogonal-pagination><span class=secno>7.3.3. </span> Paginating
    Orthogonal Flows</h4>
 
   <p><em>This section is informative.</em>
@@ -1892,7 +2078,7 @@
     sure it'll all print. T-shaped documents tend not to print well.
   </div>
 
-  <h3 id=logical-direction-layout><span class=secno>6.4. </span>
+  <h3 id=logical-direction-layout><span class=secno>7.4. </span>
    Flow-Relative Mappings</h3>
 
   <p>Flow-relative directions are calculated with respect to the writing mode
@@ -1941,7 +2127,7 @@
     indents from the start edge of the line box.
   </ul>
 
-  <h3 id=line-mappings><span class=secno>6.5. </span> Line-Relative Mappings</h3>
+  <h3 id=line-mappings><span class=secno>7.5. </span> Line-Relative Mappings</h3>
 
   <p>The <dfn id=line-relative-directions>line-relative directions</dfn> are
    <a href="#over">over</a>, <a href="#under">under</a>, <a
@@ -1996,7 +2182,7 @@
     
   </ul>
 
-  <h3 id=physical-only><span class=secno>6.6. </span> Purely Physical
+  <h3 id=physical-only><span class=secno>7.6. </span> Purely Physical
    Mappings</h3>
 
   <p>The following values are purely physical in their definitions and do not
@@ -2015,7 +2201,7 @@
     class=property>text-shadow</code>&rsquo; properties
   </ul>
 
-  <h3 id=caption-side><span class=secno>6.7. </span> Table Caption Mappings:
+  <h3 id=caption-side><span class=secno>7.7. </span> Table Caption Mappings:
    the &lsquo;<code class=property>caption-side</code>&rsquo; property</h3>
 
   <p>This module introduces two new values to the &lsquo;<code
@@ -2115,7 +2301,7 @@
 -->
    
 
-  <h2 id=text-combine><span class=secno>7. </span>Glyph Composition: the
+  <h2 id=text-combine><span class=secno>8. </span>Glyph Composition: the
    &lsquo;<a href="#text-combine0"><code
    class=property>text-combine</code></a>&rsquo; property</h2>
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-writing-modes/Overview.src.html,v
retrieving revision 1.79
retrieving revision 1.80
diff -u -d -r1.79 -r1.80
--- Overview.src.html	28 Jan 2011 20:00:08 -0000	1.79
+++ Overview.src.html	12 Feb 2011 04:33:04 -0000	1.80
@@ -731,6 +731,159 @@
             src="vertical-lr.png" height="191" width="300" ></p>
   </div>
 
+<h2 id="inline-alignment">
+Inline-level Alignment</h2>
+
+  <p>When different kinds of inline-level content are placed together on a
+    line, the baselines of the content and the settings of the 'vertical-align'
+    property control how they are aligned in the transverse direction of the
+    line box. This section discusses what baselines are, how to find them,
+    and how they are used together with the 'vertical-align' property to
+    determine the alignment of inline-level content.
+
+<h3 id="intro-baselines">
+Introduction to Baselines</h3>
+
+  <p><em>This section is non-normative.</em></p>
+
+  <p>A <dfn>baseline</dfn> is a line along the <i>inline axis</i> of a line box
+    along which individual glyphs of text are aligned. Baselines guide the
+    design of glyphs in a font (for example, the bottom of most alphabetic
+    glyphs typically align with the alphabetic baseline), and they guide
+    the alignment of glyphs from different fonts or font sizes when typesetting.
+
+  <div class="figure">
+    Alphabetic text in two font sizes with the baseline and emboxes indicated
+  </div>
+  
+  <p>Different writing systems prefer different baseline tables.</p>
+
+  <div class="figure">
+    <p><img alt="Latin prefers the alphabetic baseline, on top of which most
+                 letters rest, though some have descenders that dangle below it.
+                 Indic scripts are sometimes typeset with a hanging baseline,
+                 since their glyph shapes appear to be hanging from a
+                 horizontal line.
+                 Han-based systems, whose glyphs are designed to fill a square,
+                 tend to align on their bottoms."
+            src="script-preferred-baselines.gif"></p>
+    <p class="caption">Preferred baselines in various writing systems</p>
+  </div>
+
+  <p>A well-constructed font contains a <dfn>baseline table</dfn>, which
+    indicates the position of one or more baselines within the font's
+    design coordinate space. (This coordinate space is scaled with the
+    font size.)
+
+  <div class="figure">
+    <p><img alt=""
+            src="baselines.gif"></p>
+    <p class="caption">In a well-designed mixed-script font, the glyphs are
+    positioned in the coordinate space to harmonize with one another
+    when typeset together. The baseline table is then constructed to
+    match the shape of the glyphs, each baseline positioned to match
+    the glyphs from its preferred scripts.</p>
+  </div>
+
+  <p>The baseline table is a property of the font, and the positions
+    of the various baselines apply to all glyphs in the font.
+
+  <p>Different baseline tables can be provided for alignment in
+    horizontal and vertical text.
+
+<h3 id="text-baselines">
+Text Baselines</h3>
+
+  <p>In this specification, only the following baselines are considered:
+  
+  <dl>
+    <dt>alphabetic</dt>
+    <dd>The alphabetic baseline, which typically aligns with the bottom
+      of uppercase Latin glyphs. In horizontal typographic mode,
+      this is the dominant baseline. If the font is missing this
+      baseline, it is assumed to be <span class="issue">what's a
+      good assumption? Zero in the coord space? Bottom of the embox?
+      Something else?</span></dd>
+    <dt>central</dt>
+    <dd>The central baseline, which typically crosses the center
+      of the em box. In vertical typographic mode, this is the
+      dominant baseline. If the font is missing this baseline,
+      it is assumed to be halfway between the ascender (<i>over</i>)
+      and descender (<i>under</i>) edges of the em box.</dd>
+  </dl>
+
+  <p class="note">A future CSS module will deal with baselines in more
+    detail and allow the choice of other dominant baselines and alignment
+    options.</p>
+
+<h3 id="replaced-baselines">
+Atomic Inline Baselines</h3>
+
+  <p>If an <a href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">atomic
+    inline</a> (such as an inline-block, inline-table, or replaced inline element)
+    is not capable of providing its own baseline information, then the
+    UA synthesizes a baseline table thus:
+
+  <dl>
+    <dt>alphabetic</dt>
+    <dd>The alphabetic baseline is assumed to be at the <i>under</i>
+      margin edge.</dd>
+    <dt>central</dt>
+    <dd>The central baseline is assumed to be halfway between the
+    <i>under<i> and <i>over<i> margin edges of the box.
+  </dl>
+
+<h3 id="baseline-alignment">
+Baseline Alignment</h3>
+
+  <p>The dominant baseline is used in CSS for alignment in two cases:
+  <ul>
+    <li>Aligning glyphs from different fonts within the same inline box.
+      The glyphs are aligned by matching up the positions of the dominant
+      baseline.
+    <li>Aligning a child inline within its parent. The child is aligned to
+      the parent by matching the parent's dominant baseline to the same
+      baseline in the child. (E.g. if the parent's dominant baseline is
+      alphabetic, then the child's alphabetic baseline is matched to the
+      parent's alphabetic baseline, even if the child's dominant baseline
+      is something else.)
+      <div class="example">
+        <p>Given following sample markup:
+        <pre>&lt;p&gt;&lt;span class="outer"&gt;Ap &lt;span class="inner"&gt;<i>ji</i>&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;<pre>
+        <p>And the following style rule:
+        <pre>span.inner { font-size: .75em; }</pre>
+        <p>The baseline tables of the parent (<code>.outer</code>) and the child
+          (<code>.inner</code>) will not mach up due to the font size difference.
+          Since the dominant baseline is the alphabetic baseline, the child box
+          is aligned to its parent by matching up their alphabetic baselines.
+        <div class="figure">
+          <p><img alt="" src="baseline-align-sizes.gif">
+        </div>
+      </div>
+    <p>Basline alignment in this fashion is used with the following values of
+      'vertical-align': ''baseline'', ''sub'', ''super'', &lt;length&gt;,
+      &lt;percentage&gt;. In the latter cases, the baselines are aligned as
+      for ''baseline'', but the child is shifted according to the offset given
+      by its 'vertical-align' value.
+
+    <div class="example">
+      <p>If we assign ''vertical-align: super'' to the <code>.inner</code>
+        element from the example above, the same rules are used to align
+        the <code>.inner</code> child to its parent; the only difference
+        is in addition to the baseline alignment, the child is shifted to
+        the superscipt position.
+      <pre>span.inner { vertical-align: super; font-size: .75em; }</pre>
+      <div class="figure">
+        <p><img alt="In this example, the resulting alignment is equivalent
+                     to shifting the parent baseline table upwards by the
+                     superscript offset, and then aligning the child's
+                     alphabetic baseline to the shifted position of the
+                     parent's alphabetic baseline."
+                src="baseline-align-super.gif">
+      </div>
+    </div>
+  </ul>
+
 <h2 id="intro-text-layout">
 Introduction to Intrinsic Text Layout</h2>
 
Received on Saturday, 12 February 2011 04:33:08 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:01 UTC