- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 12 Feb 2011 04:33:06 +0000
- To: public-css-commits@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 ‘<code class=property>text-orientation</code>’
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 ‘<code class=property>caption-side</code>’
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 ‘<code class=property>text-combine</code>’ 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 ‘<code
+ class=property>vertical-align</code>’ 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 ‘<code class=property>vertical-align</code>’
+ 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><p><span class="outer">Ap <span class="inner"><i>ji</i></span></span></p></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
+ ‘<code class=property>vertical-align</code>’: ‘<a
+ href="#baseline"><code class=css>baseline</code></a>’,
+ ‘<code class=css>sub</code>’, ‘<code
+ class=css>super</code>’, <length>, <percentage>. In
+ the latter cases, the baselines are aligned as for ‘<a
+ href="#baseline"><code class=css>baseline</code></a>’, but the
+ child is shifted according to the offset given by its ‘<code
+ class=property>vertical-align</code>’ value.
+
+ <div class=example>
+ <p>If we assign ‘<code class=css>vertical-align:
+ super</code>’ 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
‘<a href="#text-orientation0"><code
class=property>text-orientation</code></a>’ 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>’
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 ‘<a
@@ -1380,7 +1566,7 @@
and ‘<a href="#text-orientation0"><code
class=property>text-orientation</code></a>’.
- <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 ‘<a href="#writing-mode1"><code
class=property>writing-mode</code></a>’ 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>’ 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 ‘<code class=property>caption-side</code>’ property</h3>
<p>This module introduces two new values to the ‘<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
‘<a href="#text-combine0"><code
class=property>text-combine</code></a>’ 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><p><span class="outer">Ap <span class="inner"><i>ji</i></span></span></p><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'', <length>,
+ <percentage>. 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