You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4025 lines
146 KiB
4025 lines
146 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<title>CSS3 module: line</title>
|
|
|
|
<style type="text/css">
|
|
dt {font-weight: normal}
|
|
/*.issue, .note {font-style: italic}*/
|
|
.figure {font-size: smaller;}
|
|
|
|
/* Stolen from CSS2 Recommendation */
|
|
|
|
A.noxref:link, A.noxref:visited {color: black; /*color: inherit*/}
|
|
</style>
|
|
|
|
<style media="print" type="text/css">
|
|
img#edge { width: 80%; height: 70%;}
|
|
dt.label { display: run-in; }
|
|
</style>
|
|
|
|
<link href="default.css" rel="stylesheet" type="text/css">
|
|
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel="stylesheet"
|
|
type="text/css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="head">
|
|
<p><a href="http://www.w3.org/"><img alt="W3C" height="48"
|
|
src="http://www.w3.org/Icons/w3c_home" width="72"></a>
|
|
|
|
<h1 id="css3-module">CSS3 module: line</h1>
|
|
|
|
<h2 class="no-num no-toc" id="w3c-working">W3C Working Draft 15 May 2002</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515">http://www.w3.org/TR/2002/WD-css3-linebox-20020515</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-linebox">http://www.w3.org/TR/css3-linebox</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd>none
|
|
|
|
<dt>Editors:
|
|
|
|
<dd><a href="mailto:michelsu@microsoft.com">Michel Suignard (Microsoft)</a>
|
|
<dd><a href="http://www.meyerweb.com/eric/">Eric A. Meyer</a>
|
|
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt>Authors:
|
|
|
|
<dd>Original CSS2 authors, and
|
|
|
|
<dd><a href="mailto:bert@w3.org">Bert Bos (W3C)</a>
|
|
|
|
<dd><a href="mailto:michelsu@microsoft.com">Michel Suignard (Microsoft)</a>
|
|
|
|
<dd><a href="mailto:szilles@adobe.com">Steve Zilles (Adobe)</a>
|
|
</dl>
|
|
<!--begin-include "../copyright.inc"-->
|
|
<p class="copyright"><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#Copyright">
|
|
Copyright</a> ©2002 <a href="http://www.w3.org/"><abbr title="World Wide
|
|
Web Consortium">W3C</abbr></a><sup>®</sup> (<a
|
|
href="http://www.lcs.mit.edu/"><abbr title="Massachusetts Institute of
|
|
Technology">MIT</abbr></a>, <a href="http://www.inria.fr/"><abbr lang="fr"
|
|
title="Institut National de Recherche en Informatique et
|
|
Automatique">INRIA</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>),
|
|
All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#W3C_Trademarks">trademark</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents-19990405">document
|
|
use</a> and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-software-19980720">software
|
|
licensing</a> rules apply.
|
|
<!--end-include-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id="Abstract">Abstract</h2>
|
|
|
|
<p>This document presents a set of CSS line formatting properties. It also
|
|
includes baseline alignment features as well as related functions like initial
|
|
line and initial letter effect. It extends on the CSS 2 model <a href="#CSS2"
|
|
rel="biblioentry">[CSS2]</a>.
|
|
|
|
<h2 class="no-num no-toc" id="Status">Status of This Document</h2>
|
|
|
|
<p>This document is a working draft of the CSS working group which is part of
|
|
the <a href="/Style/">Style activity</a> (see <a
|
|
href="/Style/Activity">summary</a>). It contains a proposal for features
|
|
to be included in CSS level 3.
|
|
|
|
<p>Feedback is very much welcome. Comments can be sent directly to the
|
|
editor, but the mailing list <a
|
|
href="/Mail/Lists.html#www-style">www-style@w3.org</a> (see <a
|
|
href="/Mail/Request">instructions</a>) is also open and is preferred for
|
|
discussion of this and other drafts in the Style area.
|
|
|
|
<p>This working draft may be updated, replaced or rendered obsolete by other
|
|
W3C documents at any time. It is inappropriate to use W3C Working Drafts as
|
|
reference material or to cite them as other than "work in progress". Its
|
|
publication does not imply endorsement by the W3C membership or the <a
|
|
href="/Style/Group/">CSS Working Group</a> (<a
|
|
href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>).
|
|
|
|
<p>To find the latest version of this working draft, please follow the
|
|
"Latest version" link above, or visit the list of W3C <a
|
|
href="/TR/">Technical Reports</a>.
|
|
|
|
<h2 class="no-num no-toc" id="Contents">Contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class="toc">
|
|
<li><a href="#dependencies"><span class="secno">1. </span>Dependencies on
|
|
other modules</a>
|
|
|
|
<li><a href="#introduction"><span class="secno">2. </span>Introduction</a>
|
|
|
|
<li><a href="#LineBox"><span class="secno">3. </span>Line box, Line
|
|
stacking and Content height</a>
|
|
<ul class="toc">
|
|
<li><a href="#InlineFormatting"><span class="secno">3.1. </span>Inline formatting
|
|
context</a>
|
|
|
|
<li><a href="#LineBoxWrapping"><span class="secno">3.2. Line box
|
|
wrapping</span></a>
|
|
|
|
<li><a href="#inline1"><span class="secno">3.3. </span>Inline box
|
|
progression dimension (height in horizontal flow), the 'text-height' property</a>
|
|
|
|
<li><a href="#InlineBoxHeight"><span class="secno">3.4. </span>Line height
|
|
adjustment: the 'line-height' property</a>
|
|
|
|
<li><a href="#LineStacking"><span class="secno">3.5. </span>Line Stacking:
|
|
the 'line-stacking-strategy', 'line-stacking-ruby', 'line-stacking-shift'
|
|
properties, and the 'line-stacking' shorthand property</a>
|
|
</ul>
|
|
|
|
<li><a href="#baseline">
|
|
<span class="secno">4. </span>Baseline alignment</a>
|
|
<ul class="toc">
|
|
<li><a href="#FontBaseline">
|
|
<span class="secno">4.1. </span>Baseline information provided by fonts</a>
|
|
|
|
<li><a href="#AlignmentBaselineType">
|
|
<span class="secno">4.2. </span>Baseline identifiers</a>
|
|
|
|
<li><a href="#BaselineAlignmentOverview">
|
|
<span class="secno">4.3. </span>Overview of the baseline alignment process</a>
|
|
|
|
<li><a href="#dominant-baseline-prop">
|
|
<span class="secno">4.4. </span>Dominant baseline: the <span
|
|
class="property">'dominant-baseline'</span> property</a>
|
|
|
|
<li><a href="#alignment-baseline-prop">
|
|
<span class="secno">4.5.
|
|
</span>Aligning the alignment point of an element: the <span
|
|
class="property">'alignment-baseline'</span> property</a>
|
|
|
|
<li><a href="#alignment-adjust-prop">
|
|
<span class="secno">4.6. </span>Setting the alignment point: the <span class="property">'alignment-adjust'</span>
|
|
property</a>
|
|
|
|
<li><a href="#baseline-shift-prop">
|
|
<span class="secno">4.7. </span>Repositioning the dominant baseline: the <span
|
|
class="property">'baseline-shift'</span> property</a>
|
|
|
|
<li><a href="#vertical-align-prop">
|
|
<span class="secno">4.8. </span>Vertical alignment: the <span class="property">'vertical-align'</span> shorthand
|
|
baseline alignment property</a>
|
|
|
|
<li><a href="#inline-box-align-prop">
|
|
<span class="secno">4.9. </span>Inline box alignment: the <span class="property">'inline-box-align'</span>
|
|
property</a>
|
|
</ul>
|
|
|
|
<li><a href="#Initial">
|
|
<span class="secno">5. </span>
|
|
Initial line and Drop initial</a>
|
|
|
|
<ul class="toc">
|
|
<li><a href="#InitialLine">
|
|
<span class="secno">5.1. </span>Initial line</a>
|
|
|
|
<li><a href="#DropInitial">
|
|
<span class="secno">5.2. </span>Drop Initial overview</a>
|
|
|
|
<li><a href="#DropInitialSize">
|
|
<span class="secno">5.3. </span>
|
|
Sizing drop initial, the <span class="property">'drop-initial-size'</span> and the <span class="property">'drop-initial-value'</span>
|
|
properties</a>
|
|
|
|
<li><a href="#DropInitialAlign">
|
|
<span class="secno">5.4. </span>Aligning drop initial: the <span
|
|
class="property">'drop-initial-before-align'</span>, <span
|
|
class="property">'drop-initial-before-adjust'</span>, <span
|
|
class="property">'drop-initial-after-align'</span> and <span
|
|
class="property">'drop-initial-after-adjust'</span> properties</a>
|
|
|
|
</ul>
|
|
|
|
<li><a href="#properties"><span class="secno">6. </span>Properties index</a>
|
|
|
|
<li><a href="#profiles"><span class="secno">7. </span>Profiles</a>
|
|
|
|
<li><a href="#glossary"><span class="secno">8. </span>Glossary</a>
|
|
|
|
<li><a href="#BaselineUsage">Appendix A: Usage of baseline alignment
|
|
(informative)</a>
|
|
|
|
<li><a href="#ack">Acknowledgments</a>
|
|
|
|
<li><a href="#ref">References</a>
|
|
<ul class="toc">
|
|
<li><a href="#normative">Normative references</a>
|
|
|
|
<li><a href="#other">Other references</a>
|
|
</ul>
|
|
|
|
<li><a href="#changes">Changes from Previous Working Draft</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<hr>
|
|
|
|
<h2 id="dependencies"><span class="secno">1. </span>Dependencies on other
|
|
modules</h2>
|
|
|
|
<p>This CSS3 module depends on the following other CSS3 modules:
|
|
|
|
<ul>
|
|
<li>Fonts<li>Text
|
|
|
|
<li>Syntax and grammar
|
|
|
|
<li>Values and unit
|
|
</ul>
|
|
|
|
<p>It has non-normative (informative) references to the following other CSS3
|
|
modules:
|
|
|
|
<ul>
|
|
<li>Multi-column layout
|
|
|
|
<li>Ruby
|
|
</ul>
|
|
|
|
<h2 id="introduction"><span class="secno">2. </span>Introduction</h2>
|
|
|
|
<p>This modules specifies the presentation aspects of line within block elements
|
|
and inline elements. It also covers the design of baseline alignment within each
|
|
line and the placement of drop initial letter (also known as first letter or
|
|
drop caps). Most of the properties are new to CSS3.<p>All described properties, in addition to the noted values, take
|
|
'initial' and 'inherit'. These values are not repeated in each of the
|
|
property value enumeration.
|
|
|
|
<p>This module uses extensively the 'before', 'after', 'start' and
|
|
'end' notation to specify the four edges of a box relative to its text
|
|
advance direction, independently of its absolute positioning in terms of
|
|
'top', 'bottom', 'left' and 'right' (corresponding respectively to the
|
|
'before', 'after', 'start' and 'end' positions in a typical Western text
|
|
layout). This notation is also used extensively in <a href="#XSL1.0"
|
|
rel="biblioentry">[XSL1.0]</a> for the same purpose.
|
|
|
|
<p>Finally, in this document, requirements are expressed using the key words
|
|
"MUST", "MUST NOT", "REQUIRED",
|
|
"SHALL" and "SHALL NOT". Recommendations are expressed
|
|
using the key words "SHOULD", "SHOULD NOT" and
|
|
"RECOMMENDED". "MAY" and "OPTIONAL" are used to
|
|
indicate optional features or behavior. These keywords are used in accordance
|
|
with <a href="#RFC2119" rel="biblioentry">[RFC2119]</a>. For legibility these
|
|
keywords are used in lowercase form.
|
|
|
|
<hr>
|
|
|
|
<h2 id="LineBox"><span class="secno">3. </span>Line box, Line stacking and Content height </h2>
|
|
|
|
<p>This section describes inline boxes formatting, how lines are stacked
|
|
together and a mechanism to adjust the content height of inline elements.
|
|
|
|
<h3 id="InlineFormatting">
|
|
<span class="secno">3.1. </span>Inline formatting context</h3>
|
|
|
|
<p>In an inline formatting context, boxes are laid out in the inline progression
|
|
direction, one after
|
|
the other, following the block progression within the containing block. Borders,
|
|
padding and inline progression margins are respected between these boxes. The boxes may be aligned
|
|
within the inline progression in different ways: their after-edges or
|
|
before-edges may be aligned, or the
|
|
baselines of text within them may be aligned. The rectangular area that contains
|
|
the boxes that form a line is called a <span class="index-def" title="line box">
|
|
<a id="line-box"><dfn>line box</dfn></a></span>. </p>
|
|
<p>The inline progression dimension ('width' in horizontal flow) of a line box is
|
|
determined by its containing block. The block progression dimension ('height' in
|
|
horizontal flow) of a line box is determined by the rules given
|
|
in the section on
|
|
<a href="#line-height">line height
|
|
calculations</a>. A line box is generally tall (relative) enough for all of the boxes it
|
|
contains. However, it may be taller than the tallest box it contains (if, for
|
|
example, boxes are aligned so that baselines line up). When the block
|
|
progression dimension of a box
|
|
B is less than the similar dimension of the line box containing it, the alignment
|
|
of B within the line box is determined by the
|
|
<span class="propinst-vertical-align"><span style="background-position: 0% 0%">
|
|
<a href="#baseline">baseline alignment</a></span></span> properties. </p>
|
|
<p>When several inline boxes cannot fit within a single line box,
|
|
they are distributed among two or more block-progression stacked line boxes. Thus, a
|
|
paragraph is a stack of line boxes.</p>
|
|
<p>Line boxes are stacked together following the strategy determined by the
|
|
<span class="property"><a href="#line-stacking-strategy">'line-stacking-strategy'</a></span> property. Depending on the set value, line boxes can be
|
|
stacked at constant spacing, in a grid manner or with enough space to
|
|
accommodate all the line boxes. Using a constant spacing may create a 'bleeding'
|
|
effect between line boxes.</p>
|
|
<p>A containing block defines a <b>root inline element</b> which wraps all the
|
|
inline children of the block element, including the anonymous inline elements.
|
|
It inherits the inline behaviors that are set for the block
|
|
element (like <span class="property"><a href="#line-height">'line-height'</a></span>)
|
|
and play an important role in some line stacking strategies.</p>
|
|
<p>Although margins, borders, and padding of non-replaced elements do not enter
|
|
into inline box block-progression dimension calculation (and thus the line box
|
|
calculation), they are still rendered around inline boxes. This means that if
|
|
the block-progression dimension of a line box is shorter than the
|
|
<a href="http://www.w3.org/TR/REC-CSS2/box.html#outer-edge">outer edges</a> of
|
|
the boxes it contains, backgrounds and colors of padding and borders may "bleed"
|
|
into adjacent line boxes. However, in this case, some user agents may use the
|
|
line box to "clip" the border and padding areas (i.e., not render them). </p>
|
|
|
|
<h3 id="LineBoxWrapping"><span class="secno">3.2. </span>Line Box wrapping</h3>
|
|
|
|
<p>In general, the start edge of a line box touches the start edge of its
|
|
containing block and the end edge touches the end edge of its containing
|
|
block. However, floating boxes may come between the containing block edge and
|
|
the line box edge. Thus, although line boxes in the same inline formatting
|
|
context generally have the same inline progression advance (that of the
|
|
containing block), they may vary if available inline-progression space
|
|
is reduced due to <!-- a href="#floats"-->
|
|
floats<!--/a-->. Line boxes in the same inline formatting context may vary in
|
|
block-progression advance or not, depending on the line stacking strategy.</p>
|
|
<p>When the total inline-progression advance of the inline boxes on a line is less than the
|
|
inline-progression dimension of
|
|
the line box containing them, their inline-progression distribution within the line box
|
|
is determined by the
|
|
<a class="noxref" href="#text-align">
|
|
<span class="property">'text-align'</span></a> property. If that
|
|
property has the value 'justify', the user agent may stretch the inline boxes as
|
|
well. </p>
|
|
<p>Since an inline box may not exceed the inline-progression width of a line box, long inline boxes
|
|
are split into several boxes and these boxes distributed across several line
|
|
boxes. When an inline box is split, margins, borders, and padding have no visual
|
|
effect where the split occurs. Formatting of margins, borders, and padding may
|
|
not be fully defined if the split occurs within a bidirectional embedding. </p>
|
|
<p>Inline boxes may also be split into several boxes <em>within the same line
|
|
box</em> due to <a href="#direction">bidirectional text processing</a>. </p>
|
|
<div class="html-example">
|
|
Here is an example of inline box construction. The following paragraph
|
|
(created by the HTML block-level element P) contains anonymous text
|
|
interspersed with the elements EM and STRONG:
|
|
<pre><P>Several <EM>emphasized words</EM> appear
|
|
<STRONG>in this</STRONG> sentence, dear.</P>
|
|
</pre>
|
|
<p>The P element generates a block box that contains five inline boxes, three
|
|
of which are anonymous:</p>
|
|
<ul>
|
|
<li>Anonymous: "Several" </li>
|
|
<li>EM: "emphasized words" </li>
|
|
<li>Anonymous: "appear" </li>
|
|
<li>STRONG: "in this" </li>
|
|
<li>Anonymous: "sentence, dear." </li>
|
|
</ul>
|
|
<p>To format the paragraph, the user agent flows the five boxes into line
|
|
boxes. In this example, the box generated for the P element establishes the
|
|
containing block for the line boxes. If the containing block is sufficiently
|
|
wide (relative) , all the inline boxes will fit into a single line box: </p>
|
|
<pre> Several <em>emphasized words</em> appear <strong>in this</strong> sentence, dear.
|
|
</pre>
|
|
<p>If not, the inline boxes will be split up and distributed across several
|
|
line boxes. The previous paragraph might be split as follows: </p>
|
|
<pre>Several <em>emphasized words</em> appear
|
|
<strong>in this</strong> sentence, dear.
|
|
</pre>
|
|
<p>or like this: </p>
|
|
<pre>Several <em>emphasized</em>
|
|
<em>words</em> appear <strong>in this</strong>
|
|
sentence, dear.
|
|
</pre>
|
|
</div>
|
|
<p>In the previous example, the EM box was split into two EM boxes (call them
|
|
"split1" and "split2"). Margins, borders, padding, or text decorations have no
|
|
visible effect after split1 or before split2. </p>
|
|
<div class="html-example">
|
|
Consider the following example:
|
|
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>Example of inline flow on several lines</TITLE>
|
|
<STYLE type="text/css">
|
|
EM {
|
|
padding: 2px;
|
|
margin: 1em;
|
|
border-width: medium;
|
|
border-style: dashed;
|
|
line-height: 2.4em;
|
|
}
|
|
</STYLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<P>Several <EM>emphasized words</EM> appear here.</P>
|
|
</BODY>
|
|
</HTML>
|
|
</pre>
|
|
<p>Depending on the width of the P, the boxes may be distributed as follows:</p>
|
|
<div class="figure">
|
|
<img alt="Image illustrating the effect of line breaking on the
|
|
display of margins, borders, and padding." src="inline-layout.gif" width="260" height="99"><span class="dlink"> <a title="Long description for illustration of margin/border
|
|
behavior on split inline box" href="http://www.w3.org/TR/REC-CSS2/images/longdesc/inline-layout-desc.html" name="img-inline-layout">[D]</a></span></div>
|
|
<ul>
|
|
<li>The margin is inserted before "emphasized" and after "words". </li>
|
|
<li>The padding is inserted before, above, and below "emphasized" and after,
|
|
above, and below "words". A dashed border is rendered on three sides in each
|
|
case. </li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3 id="inline1"><span class="secno">3.3. </span>Inline box progression dimension (height in horizontal flow), the
|
|
<span class="property"><a href="#text-height">'text-height'</a></span> property</h3>
|
|
|
|
<p>Each inline box has a block-progression dimension which is derived from the
|
|
following parameters: the 'text-height' and 'font-size' properties for
|
|
non-replaced elements, the height or the width for replaced elements (depending
|
|
on the text flow being horizontal or vertical respectively) and the stacked
|
|
block-progression advance for inline-block elements (identical to what is done
|
|
for block-level elements).</p>
|
|
<p>The block-progression dimension determines the position of the padding,
|
|
border and margin for the element but does not necessarily determines the line
|
|
stacking progression as this is also controlled by the 'line-stacking-strategy'.</p>
|
|
|
|
<table class="propdef" id="name-61">
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="text-height">text-height</dfn><tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | font-size | text-size | max-size
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>inline elements and parents of element with display:ruby-text<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value (except for initial and inherit)</table>
|
|
|
|
<p>The 'text-height' property determine the block-progression dimension of the
|
|
text content area of an inline box. Possible values:</p>
|
|
|
|
<dl>
|
|
<dt><strong>auto</strong>
|
|
|
|
<dd>The block-progression dimension is based either on the em square determined
|
|
by the element font-size property value or the cell-height (ascender + descender)
|
|
related to the element font-size as chosen by the user agent.
|
|
|
|
<dt>font-size</dt>
|
|
<dd>The block-progression dimension is based on the em square as determined by
|
|
the element font-size. </dd>
|
|
<dt>text-size</dt>
|
|
<dd>The block-progression dimension is based on the cell-height (ascender +
|
|
descender) related to the element font-size.</dd>
|
|
<dt>max-size</dt>
|
|
<dd>The block-progression dimension is based on the maximum extents toward the
|
|
before-edge and after-edge of the box obtained by considering all children
|
|
elements located on the same line, ruby annotations (elements with 'display:ruby-text')
|
|
and baseline shifted elements.</dd>
|
|
</dl>
|
|
|
|
<p>When more than one font-size is used (this could happen when glyphs are found
|
|
in different fonts), it is recommended that the largest font-size provides the em square and the cell-height.</p>
|
|
|
|
<p>Although the 'text-height' property does not apply directly to block
|
|
elements, it applies to their anonymous children inline elements (if any).</p>
|
|
|
|
<h3 id="InlineBoxHeight"><span class="secno">3.4. </span>Line height adjustment: the
|
|
<span class="property"><a href="#line-height">'line-height'</a></span> property</h3>
|
|
|
|
<p>The 'line-height' property allows to control the amount of leading space
|
|
which is added before and after the block-progression dimension of either an
|
|
inline box, a line box or both. The 'line-stacking-strategy' property value
|
|
determines which effects are active. For example, there are line stacking
|
|
strategies for which leading is not applied to inline boxes, but only to the
|
|
line boxes. The sum of the possible leading space and the block progression
|
|
dimension is called the <b>extended block progression dimension</b>. That
|
|
extended value is not used for border, margin and padding placement but is used
|
|
for vertical alignment (relative) and line box block progression dimension.</p>
|
|
<p>The <span class="index-def" title="leading"><em><a name="x15">leading</a></em></span><span title="leading">
|
|
for an inline element
|
|
is defined as the d</span>ifference between the block-progression dimension as
|
|
determined by the 'text-height' property and the computed value
|
|
of
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height">
|
|
<span class="propinst-line-height">'line-height'</span></a>. Half the leading is
|
|
called the <span class="index-def" title="half-leading"><em><a name="x16">
|
|
half-leading</a></em></span><span title="half-leading">, each half-leading is
|
|
located before and after the block-progression dimension of the element.
|
|
Depending on the value of the 'line-stacking-strategy', the 'line-height' value
|
|
will specify the </span> <em>exact</em> extended block-progression dimension of each box
|
|
generated by the element or be ignored. (Except for inline
|
|
<a href="http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element">replaced</a>
|
|
elements, where the block-progression dimension of the box is given by the
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height">
|
|
<span class="propinst-height">'height'</span></a> or the 'width' property
|
|
depending on the text flow.) When the line-height value is ignored for an inline
|
|
element, the extended block progression dimension is identical to the block
|
|
progression dimension. Anonymous inline elements use the 'text-height' and
|
|
'line-height' property values specified for their parent.</p>
|
|
<p>Depending on the
|
|
value of the 'line-stacking-strategy', the 'line-height' value may provide a
|
|
minimum or exact extended block-progression dimension for each generated inline box and
|
|
the line boxes. How the leading space is distributed between the before-edge and
|
|
the after-edge of inline elements within the line box depends on their
|
|
vertical-align property value.</p>
|
|
<p>When applicable, the minimum extended block-progression dimension consists of a minimum
|
|
ascent above the block's baseline and a
|
|
minimum descent below it, exactly as if each line box starts with a zero-width
|
|
(relative) inline box with the blocks' font and line height properties (what T<sub>E</sub>X calls a
|
|
'strut').</p>
|
|
<p>Empty inline elements generate empty inline boxes, but these boxes still have
|
|
a line height, and thus may influence the line box block progression dimension,
|
|
as if the empty box contained an infinitely narrow letter.</p>
|
|
<p>A inline box which otherwise would influence the line box extended progression
|
|
dimension may be removed from the computation by using a special value of the
|
|
line-height property: 'none'. This is equivalent to setting its line-height to
|
|
the font-size of its ancestor block element.</p>
|
|
|
|
<table class="propdef" id="name-62">
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="line-height">line-height</dfn><tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>normal |
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-number">
|
|
<span class="value-inst-number"><number></span></a> |
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-length">
|
|
<span class="value-inst-length"><length></span></a> |
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-percentage">
|
|
<span class="value-inst-percentage"><percentage></span></a> | none
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>normal<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refer to the font size of the element itself <tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>see prose</table>
|
|
|
|
<p>Values for this property have the following meanings:</p>
|
|
<dl>
|
|
<dt><strong>normal</strong> </dt>
|
|
<dd>Tells user agents to set the
|
|
<a href="http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value">computed
|
|
value</a> to a "reasonable" value based on the font size of the element. The
|
|
value has the same meaning as <span class="index-inst" title="<number>">
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-number" name="x18">
|
|
<span class="value-inst-number"><number></span></a></span>. We recommend a
|
|
computed value for 'normal' between 1.0 to 1.2. </dd>
|
|
<dt><span class="index-inst" title="<length>">
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-length" name="x19">
|
|
<span class="value-inst-length"><strong><length></strong></span></a></span>
|
|
</dt>
|
|
<dd>The box height is set to this length. Negative values are illegal. The
|
|
length is the computed value.</dd>
|
|
<dt><span class="index-inst" title="<number>">
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-number" name="x20">
|
|
<span class="value-inst-number"><strong><number></strong></span></a></span>
|
|
</dt>
|
|
<dd>The <a href="http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value">
|
|
computed value</a> of the property is this number multiplied by the element's
|
|
font size. Negative values are illegal. However, the number, not the
|
|
<a href="http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value">computed
|
|
value</a>, is inherited. </dd>
|
|
<dt><span class="index-inst" title="<percentage>">
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-percentage" name="x21">
|
|
<span class="value-inst-percentage"><strong><percentage></strong></span></a></span>
|
|
</dt>
|
|
<dd>The <a href="http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value">
|
|
computed value</a> of the property is this percentage multiplied by the
|
|
element's computed font size. Negative values are illegal.</dd>
|
|
<dt>none</dt>
|
|
<dd>The computed value of the property is the ancestor block element
|
|
font-size.</dd>
|
|
</dl>
|
|
<div class="example">
|
|
<p style="DISPLAY: none">Example(s):</p>
|
|
<p>The three rules in the example below have the same resultant line height:
|
|
</p>
|
|
<pre>DIV { line-height: 1.2; font-size: 10pt } /* number */
|
|
DIV { line-height: 1.2em; font-size: 10pt } /* length */
|
|
DIV { line-height: 120%; font-size: 10pt } /* percentage */
|
|
</pre>
|
|
</div>
|
|
<p>When an element contains text that is rendered in more than one font, user
|
|
agents should determine the
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height">
|
|
<span class="propinst-line-height">'line-height'</span></a> value according to
|
|
the largest font size (when appropriate). </p>
|
|
<p>Note that replaced elements have a
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/fonts.html#propdef-font-size">
|
|
<span class="propinst-font-size">'font-size'</span></a> and a
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height">
|
|
<span class="propinst-line-height">'line-height'</span></a> property, even if
|
|
they are not used directly to determine the extended block progression dimension of the box: 'em' and 'ex'
|
|
values are relative to values of 'font-size and percentage values for
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align">
|
|
<span class="propinst-vertical-align">'vertical-align'</span></a> are relative
|
|
to values of the extended block progression dimension.</p>
|
|
|
|
<p>When the
|
|
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height">
|
|
<span class="propinst-line-height">'line-height'</span></a> value is less than
|
|
the font size, the final inline box extended block progression dimension will be less than the font size and
|
|
the rendered glyphs will "bleed" outside the box. If such a box touches the edge
|
|
of a line box, the rendered glyphs will also "bleed" into the adjacent line box.
|
|
</p>
|
|
|
|
<h3 id="LineStacking"><span class="secno">3.5. </span>Line Stacking: the
|
|
<span class="property"><a href="#line-stacking-strategy">'line-stacking-strategy'</a></span>,
|
|
<span class="property"><a href="#line-stacking-ruby">'line-stacking-ruby'</a></span>,
|
|
<span class="property"><a href="#line-stacking-shift">'line-stacking-shift'</a></span> properties, and the
|
|
<span class="property"><a href="#line-stacking">'line-stacking'</a></span> shorthand property</h3>
|
|
|
|
|
|
<p>Line stacking is the mechanism by which a line box is determined for each
|
|
line in a block and then these lines are stacked in the block progression
|
|
direction resolving any spacing constraints between adjacent lines. The
|
|
line-stacking strategy covers both the determination of the block progression
|
|
dimension (height in horizontal flow) of a line box and the rules for spacing
|
|
line boxes.</p>
|
|
<p>All line stacking strategies make use of the properties: 'font-size',
|
|
'text-height' and 'line-height'.</p>
|
|
<p>The line stacking properties are made of the following properties:</p>
|
|
<ol>
|
|
<li>The <span class="property"><a href="#line-stacking-strategy">'line-stacking-strategy'</a></span> property determines the overall stacking
|
|
method,</li>
|
|
<li>The <span class="property"><a href="#line-stacking-ruby">'line-stacking-ruby</a>'</span> property determines how elements with
|
|
'display=ruby' are stacked,</li>
|
|
<li>The <span class="property"><a href="#line-stacking-shift">'line-stacking-shift</a>'</span> property determines how elements which are
|
|
baseline-shifted are stacked,</li>
|
|
<li>Finally the <span class="property"><a href="#line-stacking">'line-stacking</a>'</span> property is a short-hand for the previous
|
|
properties.</li>
|
|
</ol>
|
|
<table class="propdef" id="name-162">
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="line-stacking-strategy">line-stacking-strategy</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>inline-line-height | block-line-height | max-height | grid-height
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>inline-line-height<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value (except for initial and inherit)</table>
|
|
|
|
<p>This property determines the line stacking strategy for stacked line boxes
|
|
within a containing block element. The term 'stack-height' is used in the
|
|
context of this property description to indicate the block-progression advance
|
|
for the line boxes. Possible values:<dl>
|
|
<dt><strong>inline-line-height</strong>
|
|
|
|
<dd>The stack-height is the smallest value that contains the <i>extended</i>
|
|
block progression dimension of all the inline elements on that line when those
|
|
elements are properly aligned. Since the line spacing information is already
|
|
included in the computation of the line box, these line boxes are simply stacked
|
|
adjacent to one another in the formatted block to which they belong. The
|
|
'line-height' property value is taken into account for both the inline elements
|
|
and the block elements. For inline elements, it defines the extended block
|
|
progression dimension. For block elements, it defines the <i>minimum</i>
|
|
extended block progression dimension.<dt>block-line-height</dt>
|
|
<dd>The stack-height is determined by the block element 'line-height' property
|
|
value. The 'line-height' property value is ignored for inline elements. For
|
|
alignment purpose, this case is similar to the minimum extended block
|
|
progression dimension case (strut model). This is the only line-stacking
|
|
strategy that may cause inline boxes within the line to bleed before and after
|
|
the line box because the line box is not constrained by its inline boxes.</dd>
|
|
<dt>max-height</dt>
|
|
<dd>The stack-height is the smallest value that contains the block progression
|
|
dimension of all the inline elements on that line when those elements are
|
|
properly aligned. The 'line-height' property value is taken into account only
|
|
for the block elements.</dd>
|
|
<dt>grid-height</dt>
|
|
<dd>The stack-height is the smallest multiple of the block element 'line-height'
|
|
computed value that can contain the block progression of all the inline
|
|
elements on that line when those elements are properly aligned. The
|
|
'line-height' property value is ignored for inline elements.</dd>
|
|
</dl>
|
|
|
|
<p>When the line-stack strategy dictates that the inline element line-height be
|
|
ignored, this means that for those elements only their block progression
|
|
dimensions are considered for the stack-height, not their extended block
|
|
progression dimensions.</p>
|
|
|
|
<p class="note"><b>Note.</b> XSL has a similar property with the same name which
|
|
use different but equivalent values: 'line-height' instead of
|
|
'inline-line-height', 'font-height' instead of 'block-line-height'. It also uses
|
|
'max-height. The value 'grid-height' is new to the CSS3 property.<p> <table class="propdef" id="name-60">
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="line-stacking-ruby">line-stacking-ruby</dfn><tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>exclude-ruby | include-ruby
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>exclude-ruby<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value (except for initial and inherit)</table>
|
|
|
|
<p>This property determines the line stacking method for block elements
|
|
containing ruby annotation elements (element with 'display: ruby-text' or
|
|
'display: ruby-text-container'). In all cases the ruby base elements (elements
|
|
with 'display: ruby-base' or display: ruby-base-container') are considered for
|
|
line stacking. Possible values:<dl>
|
|
<dt><strong>exclude-ruby</strong>
|
|
|
|
<dd>The ruby annotation elements are ignored for line stacking.<dt>include-ruby</dt>
|
|
<dd>The ruby annotation elements are considered for line stacking.</dd>
|
|
</dl>
|
|
|
|
<p>This property is ignored in two cases:<ol>
|
|
<li>The element text-height property is set to 'max-size'.</li>
|
|
<li>The line stacking strategy is set to 'block-line-height'.</li>
|
|
</ol>
|
|
<table class="propdef" id="name-160">
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="line-stacking-shift">line-stacking-shift</dfn><tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>consider-shifts | disregard-shifts<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>consider-shifts<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value (except for initial and inherit)</table>
|
|
|
|
<p>This property determines the line stacking method for block elements
|
|
containing elements with base-shift. Possible values:<dl>
|
|
<dt><strong>consider-shifts</strong>
|
|
|
|
<dd>In determining the stack-height, include the adjusted top-edge and
|
|
bottom-edge of any characters that have a baseline-shift.
|
|
|
|
<dt>disregard-shifts</dt>
|
|
<dd>In determining the stack-height, include the unshifted top-edge and
|
|
bottom-edge of any characters that have a baseline-shift. </dd>
|
|
</dl>
|
|
|
|
<p>This property is ignored in two cases:<ol>
|
|
<li>The element text-height property is set to 'max-size'.</li>
|
|
<li>The line stacking strategy is set to 'block-line-height'.</li>
|
|
</ol>
|
|
|
|
<p class="note"><b>Note.</b> XSL has a similar property with a different name:
|
|
'line-height-shift-adjustment' which use the same values.<p>Finally, the line
|
|
stacking strategy can be used using the following shorthand:</p>
|
|
<table class="propdef" id="name-260">
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="line-stacking">line-stacking</dfn><tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><'line-stacking-strategy'> || <'line-stacking-ruby'> ||
|
|
<'line-stacking-shift'><tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>see individual properties<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>see individual properties</table>
|
|
|
|
<hr>
|
|
|
|
<h2 id="baseline"><span class="secno">4. </span>Baseline alignment</h2>
|
|
|
|
<p>Baseline alignment describes the alignment of textual content and based on
|
|
information contained in font tables associated with font resources.
|
|
Additional descriptions for these font tables are provided in the <a
|
|
href="http://www.w3.org/Style/Group/css3-src/css3-fonts/Overview.html">CSS3
|
|
Fonts module</a>.
|
|
|
|
<h3 id="FontBaseline"><span class="secno">4.1. </span>Baseline information
|
|
provided by fonts</h3>
|
|
|
|
<p>The glyphs of a given script are positioned so that a particular point on
|
|
each glyph, the <b>alignment-point</b>, is aligned with the alignment-points of
|
|
the other glyphs in that script. The glyphs of different scripts are typically
|
|
aligned at different points on the glyph. For example, Western
|
|
glyphs are aligned on the bottoms of the capital letters, certain Indic
|
|
glyphs (including glyphs from the Devanagari, Gurmukhi and Bengali scripts)
|
|
are aligned at the top of a horizontal stroke near the top of the glyphs and
|
|
East Asian glyphs are aligned either at the bottom or center of the EM box of
|
|
the glyph. Within a script and within a line of text having a single
|
|
font-size, the sequence of alignment-points defines, in the
|
|
inline-progression-direction, a geometric line called a <b>baseline</b>.
|
|
Western and most other alphabetic and syllabic glyphs are aligned to an
|
|
"alphabetic" baseline, the above Indic glyphs are aligned to a "hanging"
|
|
baseline and the East Asian glyphs are aligned to an "ideographic" baseline.
|
|
|
|
<div class="figure">
|
|
<p><img alt="three alignment points" height="89"
|
|
src="AlignmentPointsMixedScripts2.gif" width="457">
|
|
|
|
<p>This figure shows the vertical position of the alignment-point for
|
|
alphabetic and many syllabic scripts, illustrated by a Roman "A"; for certain
|
|
Indic scripts, illustrated by a Gurmukhi syllable "ji"; and for ideographic
|
|
scripts, illustrated by the ideographic glyph meaning "country". The thin
|
|
black rectangle around the ideographic glyph illustrates the EM box for that
|
|
glyph and shows the typical positioning of the "black marks" of the glyph
|
|
within the EM box.
|
|
</div>
|
|
|
|
<p>A <b>baseline-table</b> specifies the position of one or more baselines in
|
|
the design space coordinate system. The function of the baseline table is to
|
|
facilitate the alignment of different scripts with respect to each other when
|
|
they are mixed on the same text line. Because the desired relative alignments
|
|
may depend on which script is dominant in a line (or block), there may be a
|
|
different baseline table for each script. In addition, different alignment
|
|
positions are needed for horizontal and vertical writing modes. Therefore,
|
|
the font may have a set of baseline tables: typically, one or more for
|
|
horizontal writing-modes and zero or more for vertical writing-modes.
|
|
|
|
<div class="figure">
|
|
<p><img alt="different baseline positions" height="473"
|
|
src="Baselines-HorizAndVert-ApCountry.gif" width="475">
|
|
|
|
<p>Examples of horizontal and vertical baseline positions. The thin lined box
|
|
in each example is the "EM box". For the Latin glyphs, only the EM box of the
|
|
first glyph is shown. Example 1 shows typical Latin text written
|
|
horizontally. This text is positioned relative to the alphabetic baseline,
|
|
shown in blue. Example 2 shows a typical ideographic glyph positioned on the
|
|
horizontal ideographic baseline. Note that the EM Box is positioned
|
|
differently for these two cases. Examples 3 and 4 show the same set of
|
|
baselines used in vertical writing. The Latin text, example 3, is shown with
|
|
a glyph-orientation of 90 degrees which is typical for proportionally space
|
|
Latin glyphs in vertical writing. Even though the ideographic glyph in
|
|
Example 4 is positioned on the vertical ideographic baseline, because it is
|
|
centered in the EM box, all glyphs with the same EM Box are centered,
|
|
vertically, with respect to one another.
|
|
</div>
|
|
|
|
<p>The font tables for a font include font characteristics for the individual
|
|
glyphs in the font. CSS assumes that the font tables include, for each glyph
|
|
in the font, one width value, one alignment-baseline and one alignment-point
|
|
for the horizontal writing-modes. If vertical writing-modes are supported,
|
|
then each glyph must have another width value, alignment-baseline and
|
|
alignment-point for the vertical writing-modes. (Even though it is specified
|
|
as a width, for vertical writing-modes the width is used in the vertical
|
|
direction.)
|
|
|
|
<p>The script to which a glyph belongs determines an alignment-baseline to
|
|
which the glyph is to be aligned. The position of this baseline in the design
|
|
space coordinate system determines the default block progression direction
|
|
position of the alignment-point. The inline progression direction position of
|
|
the alignment-point is on the start-edge of the glyph.
|
|
|
|
<div class="figure">
|
|
<p><img alt="alignment in em box" height="110"
|
|
src="AlignmentPointsMixedScriptsOnBaselines.gif" width="458">
|
|
|
|
<p>This figure shows glyphs from three different scripts, each with its EM
|
|
box and within the EM box, the baseline table applicable to that glyph. The
|
|
alignment-point of each glyph is shown by an "X" on the start edge of the EM
|
|
box and by making alignment-baseline blue. The baseline-table of the parent
|
|
element of the characters that mapped to these glyphs is shown as a set of
|
|
dashed lines.
|
|
</div>
|
|
|
|
<h3 id="AlignmentBaselineType"><span class="secno">4.2. </span>Baseline
|
|
identifiers</h3>
|
|
|
|
<p>The baseline alignment properties control the alignment of child element
|
|
with respect to their parent. The positions of these baselines are
|
|
illustrated in the following figure:
|
|
|
|
<div class="figure">
|
|
<p><img alt="different baselines" height="102" src="Baselines-rev.gif"
|
|
width="587">
|
|
|
|
<p>This figure shows samples of Gurmukhi (a hanging Indic script), Latin and
|
|
ideographic scripts together with most of the baselines defined below. The
|
|
thin line around the ideographic glyphs symbolizes the EM box in which these
|
|
glyphs are centered. In this figure, the position of the "text-before-edge"
|
|
and "text-after-edge" baselines is computed assuming that the "alphabetic"
|
|
baseline is the dominant-baseline. The "central" baseline has been omitted
|
|
from the figure, but it lies halfway between the "text-before-edge" and
|
|
"text-after-edge" baselines, just about where the "math" baseline is shown.
|
|
</div>
|
|
|
|
<p>The baseline-identifiers below are used in this specification. Some of
|
|
these are determined by baseline-tables contained in a font as described in
|
|
the section describing the <a href="#FontBaseline">baseline information
|
|
provided by fonts</a>. Others are computed from other font characteristics as
|
|
described below. Whether determined by the font or computed, a derived
|
|
baseline-table is constructed with positions of each of the baselines below.
|
|
|
|
<dl>
|
|
<dt><b>alphabetic</b>
|
|
|
|
<dd>
|
|
<p>This identifies the baseline used by most alphabetic and syllabic scripts.
|
|
These include, but are not limited to, many Western, Southern Indic,
|
|
Southeast Asian (non-ideographic) scripts.
|
|
|
|
<dt><b>ideographic</b>
|
|
|
|
<dd>
|
|
<p>This identifies the baseline used by ideographic scripts. For historical
|
|
reasons, this baseline is at the bottom of the ideographic EM box and not in
|
|
the center of the ideographic EM box. See the "central" baseline. The
|
|
ideographic scripts include Chinese, Japanese, Korean, and Vietnamese Chu
|
|
Nom.
|
|
|
|
<dt><b>hanging</b>
|
|
|
|
<dd>
|
|
<p>This identifies the baseline used by certain Indic scripts. These scripts
|
|
include Devanagari, Gurmukhi and Bengali.
|
|
|
|
<dt><b>mathematical</b>
|
|
|
|
<dd>
|
|
<p>This identifies the baseline used by mathematical symbols.
|
|
|
|
<dt><b>central</b>
|
|
|
|
<dd>
|
|
<p>This identifies a computed baseline that is at the center of the EM box.
|
|
This baseline lies halfway between the text-before-edge and text-after-edge
|
|
baselines.
|
|
|
|
<p class="note">Note. For ideographic fonts, this baseline is often used to
|
|
align the glyphs; it is an alternative to the ideographic baseline.
|
|
|
|
<dt><b>middle</b>
|
|
|
|
<dd>
|
|
<p>This identifies a baseline that is offset from the alphabetic baseline in
|
|
the <b>shift-direction</b> by 1/2 the value of the x-height font
|
|
characteristic. The position of this baseline may be obtained from the font
|
|
data or, for fonts that have a font characteristic for "x-height", it may be
|
|
computed using 1/2 the "x-height". Lacking either of these pieces of
|
|
information, the position of this baseline may be approximated by the
|
|
"central" baseline.
|
|
|
|
<dt><b>text-before-edge</b>
|
|
|
|
<dd>
|
|
<p>This identifies the before-edge of the EM box. The position of this
|
|
baseline may be specified in the baseline-table or it may be calculated.
|
|
|
|
<p class="note">Note. The position of this baseline is normally around or at
|
|
the top of the ascenders, but it may not encompass all accents that can
|
|
appear above a glyph. For fonts with ascenders, the value of the "ascent"
|
|
font characteristic is used. For ideographic fonts, the position of this
|
|
baseline is normally 1 EM in the <b>shift-direction</b> from the
|
|
"ideographic" baseline. However, some ideographic fonts have a reduced width
|
|
in the inline-progression-direction to allow tighter setting. When such a
|
|
font, designed only for vertical writing-modes, is used in a horizontal
|
|
writing-mode, the "text-before-edge" baseline may be less than 1 EM from the
|
|
text-after-edge.
|
|
|
|
<dt><b>text-after-edge</b>
|
|
|
|
<dd>
|
|
<p>This identifies the after-edge of the EM box. The position of this
|
|
baseline may be specified in the baseline-table or it may be calculated.
|
|
|
|
<p class="note">Note. For fonts with descenders, the position of this
|
|
baseline is normally around or at the bottom of the descenders. For these
|
|
fonts the value of the "descent" font characteristic is used. For ideographic
|
|
fonts, the position of this baseline is normally at the "ideographic"
|
|
baseline.
|
|
</dl>
|
|
|
|
<p>There are, in addition, two computed baselines that are only defined for line
|
|
boxes: 'before-edge' and 'after-edge'. For each line box, there is a
|
|
dominant-baseline, a baseline-table and a baseline-table font-size which are
|
|
those of the nearest block-level ancestor element and are applied to its root
|
|
inline element. Depending on the 'line-stacking-strategy' being used, the line
|
|
stacking progression (also called stack-height) can be different from the line
|
|
block progression dimension. The 'before-edge' and 'after-edge' baselines are
|
|
always based on the block progression dimension and are in fact part of its
|
|
determination.<p>For an inline element, the <b>extended inline box</b> includes
|
|
the maximum extent of their static or relative positioned children located in
|
|
the same line box and <i>may</i> include leading specified by their line-height
|
|
value. Depending on the line-stacking-strategy value, the extended line box may
|
|
have a different block progression dimension. For replaced elements the margin
|
|
extents are always added.<p>The following text explains the interaction between
|
|
the line-stacking-strategy and the various baseline alignment parameters.<ul>
|
|
<li>For 'line-stacking-strategy: inline-line-height', all 'line-height' values
|
|
(set for both inline elements and ancestor block element) participate on
|
|
the evaluation of the line block progression dimension. The position of the
|
|
dominant-baseline on the start edge of the line box is determined after all
|
|
vertical (relative) alignments have been performed on the line. The extended
|
|
inline boxes of all inline elements include the leading introduced by their
|
|
line-height value.</li>
|
|
<li>For 'line-stacking-strategy: block-line-height', the ancestor block
|
|
'line-height' value participates on the evaluation of the line block
|
|
progression dimension. The inline element line-height values are ignored. The
|
|
position of the dominant-baseline on the start edge of the line box is
|
|
determined by using a virtual 'zero-width' inline box with the block font and
|
|
line height properties located on the start edge of the line box. The extended
|
|
inline boxes of all inline elements do not include any extra leading.</li>
|
|
<li>For 'line-stacking-strategy: max-height' and 'line-stacking-strategy:
|
|
grid-height', only the ancestor block 'line-height' value participates on the
|
|
evaluation of the line block progression dimension. The inline element
|
|
line-height values are ignored. The position of the dominant-baseline on the
|
|
start edge of the line box is determined after all vertical (relative)
|
|
alignments have been performed on the line. The extended inline boxes of all
|
|
inline elements do not include any extra leading.</li>
|
|
</ul>
|
|
|
|
<p>The "before-edge" and "after-edge" baselines are
|
|
defined as follows.
|
|
|
|
<dl>
|
|
<dt><b>before-edge</b>
|
|
|
|
<dd>
|
|
<p>The offset of the "before-edge" baseline of the line from the
|
|
dominant-baseline of the line is determined by ignoring all extended inline boxes
|
|
whose alignment-baseline is either "before-edge" or "after-edge". For the
|
|
"before-edge", extents are measured from the dominant-baseline in the
|
|
direction toward the top (relative) of the extended inline box. The "before-edge" baseline
|
|
offset is set to the maximum extent of the "before-edges" of the extended inline boxes of the remaining areas. If all the
|
|
extended inline
|
|
boxes in a line box are aligned either to the "before-edge" or to the "after-edge",
|
|
then use the offset of the "text-before-edge" baseline of the line as the
|
|
offset of the "before-edge" baseline of the line.
|
|
|
|
<dt><b>after-edge</b>
|
|
|
|
<dd>
|
|
<p>The offset of the "after-edge" baseline of the line from the
|
|
dominant-baseline of the line is determined by ignoring all extended inline boxes
|
|
whose alignment-baseline is <code>after-edge</code>. For the "after-edge",
|
|
extents are measured from the dominant-baseline in the direction toward the
|
|
bottom (relative) of the extended inline box. The "after-edge" baseline offset is
|
|
set to the negative of the maximum of (1) the maximum extent of the
|
|
"after-edges" of the remaining extended inline boxes and (2) the
|
|
maximum height of the extended inline boxes that are ignored
|
|
minus the offset of the "before-edge" baseline of the line.
|
|
|
|
<p class="note">Note. If all the extended inline boxes in a line box are aligned to
|
|
the "after-edge" then the specification for the "before-edge" will set the
|
|
"before-edge" baseline to coincide with the "text-before-baseline" of the
|
|
line. Then, case (2) above will determine an offset to the "bottom-edge"
|
|
baseline that will align the "before-edge" of the box with the greatest
|
|
height to its allocation-rectangle to "before-edge" baseline.
|
|
|
|
<p class="note">Note. The above specifications for "before-edge" and
|
|
"after-edge" have the following three properties: (1) all extended inline boxes
|
|
are below the "before-edge", (2) all extended inline boxes are above the "after-edge", and (3)
|
|
the distance between the "before-edge" and the "after-edge" cannot be
|
|
decreased without violating (1) or (2). The specified placement of the
|
|
"before-edge" and "after-edge" is not the only way that (1)-(3) can be
|
|
satisfied, but it is the only way they can be satisfied with the smallest
|
|
possible offset to the "before-edge".
|
|
</dl>
|
|
|
|
<p dir="ltr">For the purpose of before-edge and after-edge baseline
|
|
computation, inline boxes include the maximum extent of their static or
|
|
relative positioned children located in the same line box. Maximum alignment
|
|
extents are measured by including the half leading extent in the appropriate
|
|
direction for non replaced elements and by using the margin extents for
|
|
replaced elements.
|
|
|
|
<p dir="ltr">Examples showing "before-edge" and "after-edge" alignment:
|
|
|
|
<div class="figure">
|
|
<p><img alt="aligning text and images" id="edge" src="ArrowsInText.gif">
|
|
|
|
<p>The rectangles with lines or arrows are images with an intrinsic size as
|
|
shown. The rectangles with no arrows represent images that receive the
|
|
default, dominant baseline, alignment. The alignment of the other rectangles
|
|
is at the furthest point from the arrow head (which is in the middle when
|
|
there are two arrowheads). Examples 1 and 2 show the "before-edge" alignment
|
|
is determined by the tallest non-"before-edge" aligned objects: in example 1
|
|
this is the default aligned, arrowhead free rectangular image and in example
|
|
2 this is the double headed arrow rectangle. Examples 3 and 4 show defaulting
|
|
to the "text-before-edge" when all the boxes have either "before-edge" or
|
|
"after-edge" alignment. In example 3, the images with "before-edge" alignment
|
|
has a taller member than do the "after-edge" aligned images. In example 4,
|
|
the tallest image is in the "after-edge" aligned set. Example 5 is a
|
|
repetition of example 2 with largest image being an "after-edge" aligned
|
|
image.
|
|
</div>
|
|
|
|
<p>There are also four baselines that are defined only for horizontal
|
|
writing-modes.
|
|
|
|
<dl>
|
|
<dt><b>top</b>
|
|
|
|
<dd>
|
|
<p>This baseline is the same as the "before-edge" baseline in a horizontal
|
|
writing-mode and is undefined in a vertical writing mode.
|
|
|
|
<dt><b>text-top</b>
|
|
|
|
<dd>
|
|
<p>This baseline is the same as the "text-before-edge" baseline in a
|
|
horizontal writing-mode and is undefined in a vertical writing mode.
|
|
|
|
<dt><b>bottom</b>
|
|
|
|
<dd>
|
|
<p>This baseline is the same as the "after-edge" baseline in a horizontal
|
|
writing-mode and is undefined in a vertical writing mode.
|
|
|
|
<dt><b>text-bottom</b>
|
|
|
|
<dd>
|
|
<p>This baseline is the same as the "text-after-edge" baseline in a
|
|
horizontal writing-mode and is undefined in a vertical writing mode.
|
|
</dl>
|
|
|
|
<h3 id="BaselineAlignmentOverview"><span class="secno">4.3. </span>Overview
|
|
of the baseline alignment process</h3>
|
|
|
|
<p>The alignment of an element with respect to its parent is determined by
|
|
three things: the scaled-baseline-table of the parent and the
|
|
alignment-baseline and alignment-point of the element being aligned. Prior to
|
|
alignment, the scaled-baseline-table of the parent may be shifted. The
|
|
property specifications below provide the information necessary to align the
|
|
parent and child elements.
|
|
|
|
<p>There are four properties that control alignment of elements to the above
|
|
set of baselines: <span class="property"><a
|
|
href="#dominant-baseline">'dominant-baseline'</a></span>, <span
|
|
class="property"><a
|
|
href="#alignment-baseline">'alignment-baseline'</a></span>, <span
|
|
class="property"><a href="#baseline-shift">'baseline-shift'</a></span> and
|
|
<span class="property"><a
|
|
href="#alignment-adjust">'alignment-adjust'</a></span>. These properties are
|
|
all independent and are designed so that typically only the specification of
|
|
one of the properties is needed to achieve a particular alignment goal.
|
|
|
|
<p>The primary baseline alignment property is the <span class="property"><a
|
|
href="#dominant-baseline">'dominant-baseline'</a></span> property. This
|
|
property sets the <b>scaled-baseline-table</b> as a compound value with the
|
|
three following components:
|
|
|
|
<ol>
|
|
<li>The dominant-baseline-identifier component is the default <span
|
|
class="property"><a
|
|
href="#alignment-baseline">'alignment-baseline'</a></span> to be used when
|
|
aligning two inline areas.
|
|
|
|
<li>The baseline-table component specifies the positions of the baselines in
|
|
the font design space coordinates. The baseline-table acts something like a
|
|
musical staff; it defines particular points along the
|
|
<b>block-progression-direction</b> to which glyphs and inline elements can be
|
|
aligned.
|
|
|
|
<li>The baseline-table <span class="property"><a
|
|
href="#font-size">'font-size'</a></span> component is used to scale the
|
|
positions of the baselines in that baseline table. In a
|
|
scaled-baseline-table, the positions of the baselines can be adjusted by
|
|
multiplying the design-space coordinate values by the baseline-table
|
|
font-size.
|
|
</ol>
|
|
|
|
<p>Because the value of the <a
|
|
href="/TR/REC-CSS2/fonts.html#font-family-prop"><span
|
|
class="property">'font-family'</span></a> property is a list of fonts, to
|
|
insure a consistent choice of baseline-table we define the <em>nominal
|
|
font</em> in a font list as the first font in the list for which a glyph data
|
|
is available. This is the first that could contain a glyph for each character
|
|
encountered. (For this definition, glyph data is assumed to be present if a
|
|
font substitution is made or if the font is synthesized.) This definition
|
|
insures a content independent determination of the font and baseline table
|
|
that is to be used.
|
|
|
|
<p>For convenience, the specification will sometimes refer to the baseline
|
|
identified by the dominant-baseline-identifier component of the
|
|
"dominant-baseline" property as the "dominant baseline" (in an abuse of
|
|
terminology).
|
|
|
|
<p>The model also assumes that each glyph has an <span class="property"><a
|
|
href="#alignment-baseline">'alignment-baseline'</a></span> value which
|
|
specifies the baseline with which the glyph is to be aligned. (The
|
|
'alignment-baseline' is called the "Baseline Tag" in the OpenType
|
|
baseline-table description.) The initial value of the 'alignment-baseline'
|
|
property uses the baseline identifier associated with the given glyph.
|
|
Alternate values for 'alignment-baseline' can be useful for glyphs such as a
|
|
"*" which are ambiguous with respect to script membership.
|
|
|
|
<p>The model assumes that the font from which the glyph is drawn also has a
|
|
baseline table, the <span class="SVG-Term">font baseline-table</span>. This
|
|
baseline table has offsets in units-per-em from the (0,0) point to each of
|
|
the baselines the font knows about. In particular, it has the offset from the
|
|
glyph's (0,0) point to the baseline identified by the 'alignment-baseline'.
|
|
|
|
<p>The offset values in the baseline-table are in "design units" which means
|
|
fractional units of the EM. CSS calls these <a
|
|
href="/TR/REC-CSS2/fonts.html#descdef-units-per-em">"units-per-em"</a>. Thus,
|
|
the current <span class="property"><a
|
|
href="#font-size">'font-size'</a></span> is used to determine the actual
|
|
offset from the dominant baseline to the alternate baselines.
|
|
|
|
<p>The glyph is aligned so that its baseline identified by its
|
|
'alignment-baseline' is aligned with the baseline with the same name from the
|
|
dominant baseline-table.
|
|
|
|
<p>The offset from the dominant baseline of the parent to the baseline
|
|
identified by the 'alignment-baseline' is computed using the dominant
|
|
baseline-table and dominant baseline-table font-size. The font baseline-table
|
|
and font-size applicable to the glyph are used to compute the offset from the
|
|
identified baseline to the (0,0) point of the glyph. This second offset is
|
|
subtracted from the first offset to get the position of the (0,0) point in
|
|
the shift direction. Both offsets are computed by multiplying the baseline
|
|
value from the baseline-table times the appropriate font-size value.
|
|
|
|
<p>If the 'alignment-baseline' identifies the dominant baseline, then the
|
|
first offset is zero and the glyph is aligned with the dominant baseline;
|
|
otherwise, the glyph is aligned with the chosen alternate baseline.
|
|
|
|
<p>The third baseline alignment property is the <span class="property"><a
|
|
href="#baseline-shift">'baseline-shift'</a></span> property. Like the
|
|
properties other than the "dominant-baseline" property, this property does
|
|
not change the baseline-table or the baseline-table font-size. It does shift
|
|
the whole baseline table of the parent element so that when an inner inline
|
|
element is aligned to one of the parents baselines, the position of the inner
|
|
inline element is shifted.
|
|
|
|
<p>The fourth alignment property is the <span class="property"><a
|
|
href="#alignment-adjust">'alignment-adjust'</a></span> property. This
|
|
property is primarily used for replaced elements. The "alignment-adjust"
|
|
property allows the author to assign where, on the start-edge of the object,
|
|
the alignment point for that element lies.
|
|
|
|
<p>For alignment purposes, the margins are added to the replaced elements
|
|
dimensions.
|
|
|
|
<p>In addition to the following definition of these properties, an
|
|
informative <a href="#BaselineUsage">appendix: B</a> provides usage examples
|
|
of these properties.
|
|
|
|
<h3 id="dominant-baseline-prop"><span class="secno">4.4. </span>Dominant
|
|
baseline: the <span class="property"><a
|
|
href="#dominant-baseline">'dominant-baseline'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="name-12">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="dominant-baseline">dominant-baseline</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | use-script | no-change | reset-size | alphabetic | hanging |
|
|
ideographic |<br>
|
|
mathematical | central | middle | text-after-edge | text-before-edge
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>inline-level elements (but see prose)
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value (except for initial and inherit)
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#dominant-baseline">'dominant-baseline'</a></span> property is used to
|
|
determine or re-determine a scaled-baseline-table. A scaled-baseline-table is
|
|
a compound value with three components:
|
|
|
|
<ul>
|
|
<li>a baseline-identifier for the dominant baseline; it can be qualified as
|
|
the 'dominant' baseline-identifier (or 'dominant baseline' in short); the
|
|
baseline-identifier is basically an <span class="property"><a
|
|
href="#alignment-baseline">'alignment-baseline'</a></span> value.
|
|
|
|
<li>a derived baseline-table which contains definition for additional
|
|
baseline-identifiers related to various scripts,
|
|
|
|
<li>and a baseline-table font-size.
|
|
</ul>
|
|
|
|
<p>Some values of the property re-determine all three values; other only
|
|
reestablish the baseline-table font-size. Values for the property have the
|
|
following meaning:
|
|
|
|
<dl>
|
|
<dt><span class="attr-value">auto</span>
|
|
|
|
<dd>If this property occurs on a block or inline-block element, then the user
|
|
agent behavior depends on the value of the <span class="property"><a
|
|
href="#script">'script'</a></span> property. If the value of the script
|
|
property is 'auto, the 'auto' value is equivalent to 'alphabetic' for
|
|
horizontal <span class="property"><a
|
|
href="#writing-mode">'writing-mode'</a></span> values and 'central' for
|
|
vertical <span class="property"><a
|
|
href="#writing-mode">'writing-mode'</a></span> values. If the value of the
|
|
script property is other than 'auto', the 'auto' value is equivalent to
|
|
'use-script'
|
|
|
|
<dd> Otherwise, if this property occurs on an inline-level element, then the
|
|
baseline-identifier and the baseline-table components remain the same as
|
|
those of the parent element. The baseline-table font-size also remains the
|
|
same as the parent's one, unless the computed 'baseline-shift' value actually
|
|
shifts the baseline; then the baseline-table font-size is set to the value of
|
|
the 'font-size' property on this element. If there is no parent element, the
|
|
dominant-baseline components are set as for the block elements.
|
|
|
|
<dt><span class="attr-value">use-script</span>
|
|
|
|
<dd>The dominant baseline-identifier is set using the computed value of the
|
|
<span class="property"><a href="#script">'script'</a></span> property. The
|
|
<span class="property"><a href="#writing-mode">'writing-mode'</a></span>
|
|
value, whether horizontal or vertical is used to select the baseline-table
|
|
that correspond to that baseline-identifier. The baseline-table font-size
|
|
component is set to the value of the 'font-size' property on this element.
|
|
|
|
<dt><span class="attr-value">no-change</span>
|
|
|
|
<dd>The dominant baseline-identifier, the baseline-table and the
|
|
baseline-table font-size remain the same as that of the parent.
|
|
|
|
<dt><span class="attr-value">reset-size</span>
|
|
|
|
<dd>The dominant baseline-identifier and the baseline table remain the same,
|
|
but the baseline-table font-size is changed to the value of the <a
|
|
href="/TR/REC-CSS2/fonts.html#font-size-props"><span
|
|
class="property">'font-size'</span></a> property on this element. This
|
|
re-scales the baseline table for the current 'font-size'.
|
|
|
|
<dt><span class="attr-value">alphabetic</span>
|
|
|
|
<dd>The dominant baseline-identifier is set to the 'alphabetic' baseline, the
|
|
derived baseline-table is constructed using the 'alphabetic' baseline-table
|
|
in the nominal font, and the baseline-table font-size is changed to the value
|
|
of the 'font-size' property on this element. (The 'alphabetic' baseline is
|
|
the standard baseline for Roman scripts.)
|
|
|
|
<dt><span class="attr-value">hanging</span>
|
|
|
|
<dd>The dominant baseline-identifier is set to the 'hanging' baseline, the
|
|
derived baseline- table is constructed using the 'hanging' baseline-table in
|
|
the nominal font, and the baseline-table font-size is changed to the value of
|
|
the 'font-size' property on this element.
|
|
|
|
<dt><span class="attr-value">ideographic</span>
|
|
|
|
<dd>The dominant baseline-identifier is set to the 'ideographic' baseline,
|
|
the derived baseline- table is constructed using the 'ideographic'
|
|
baseline-table in the nominal font, and the baseline-table font-size is
|
|
changed to the value of the 'font-size' property on this element.
|
|
|
|
<dt><span class="attr-value">mathematical</span>
|
|
|
|
<dd>The dominant baseline-identifier is set to the 'mathematical' baseline,
|
|
the derived baseline- table is constructed using the 'mathematical'
|
|
baseline-table in the nominal font, and the baseline-table font-size is
|
|
changed to the value of the 'font-size' property on this element.
|
|
|
|
<dt>central
|
|
|
|
<dd>The dominant baseline-identifier is set to be 'central'. The derived
|
|
baseline-table is constructed from the defined baselines in a baseline-table
|
|
in the nominal font. That font baseline-table is chosen using the following
|
|
priority order of baseline-table names: 'ideographic', 'alphabetic',
|
|
'hanging' and 'mathematical'. The baseline-table is changed to the value of
|
|
the 'font-size' property on this element.
|
|
|
|
<dt>middle
|
|
|
|
<dd>The dominant baseline-identifier is set to be 'middle'. The derived
|
|
baseline-table is constructed from the defined baselines in a baseline-table
|
|
in the nominal font. That font baseline-table is chosen using the following
|
|
priority order of baseline-table names: 'alphabetic', 'ideographic',
|
|
'hanging' and 'mathematical'. The baseline-table is changed to the value of
|
|
the 'font-size' property on this element.
|
|
|
|
<dt>text-after-edge
|
|
|
|
<dd>The dominant baseline-identifier is set to be 'text-after-edge'. The
|
|
derived baseline-table is constructed from the defined baselines in a
|
|
baseline-table in the nominal font. That font baseline-table is chosen using
|
|
the following priority order of baseline-table names: 'alphabetic',
|
|
'ideographic', 'hanging' and 'mathematical'. The baseline-table is changed to
|
|
the value of the 'font-size' property on this element.
|
|
|
|
<dt>text-before-edge
|
|
|
|
<dd>The dominant baseline-identifier is set to be 'text-before-edge'. The
|
|
derived baseline-table is constructed from the defined baselines in a
|
|
baseline-table in the nominal font. That font baseline-table is chosen using
|
|
the following priority order of baseline-table names: 'alphabetic',
|
|
'ideographic', 'hanging' and 'mathematical'. The baseline-table is changed to
|
|
the value of the 'font-size' property on this element.
|
|
</dl>
|
|
|
|
<p class="note">Note: Computed baselines do not (necessarily) choose a
|
|
defining baseline table from the nominal font. The expected baseline-tables
|
|
that a font would have are those that correspond to the defined baselines.
|
|
The catch is that the positions of the defined baselines -- the 'hanging',
|
|
'alphabetic', 'mathematical' and 'ideograph' baselines -- can be specified
|
|
differently for different choices of which of these baselines is dominant.
|
|
That is, the absolute value of the offset of an alphabetic baseline from the
|
|
ideographic baseline in ideographic text may be different from the offset of
|
|
the ideographic baseline from the alphabetic baseline in alphabetic text.
|
|
Therefore, it matters which baseline-table from the nominal font is used for
|
|
the defined baselines.
|
|
|
|
<p>If there is no baseline-table in the nominal font or if the baseline-table
|
|
lacks an entry for the desired baseline, then the user agent may use
|
|
heuristics to determine the position of the desired baseline.
|
|
|
|
<h3 id="alignment-baseline-prop"><span class="secno">4.5. </span>Aligning the
|
|
alignment point of an element: the <span class="property"><a
|
|
href="#alignment-baseline">'alignment-baseline'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="name-13">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="alignment-baseline">alignment-baseline</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>baseline | use-script | before-edge | text-before-edge | after-edge |
|
|
text-after-edge |<br>
|
|
central | middle | ideographic | alphabetic | hanging | mathematical
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>baseline
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>inline-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value (except for initial and inherit)
|
|
</table>
|
|
|
|
<p>This property specifies how an inline-level element is aligned with
|
|
respect to its parent. That is, to which of the parent's baselines the
|
|
alignment point of this element is aligned. Unlike the 'dominant-baseline'
|
|
property the 'alignment-baseline' property has no effect on its children
|
|
dominant-baselines.
|
|
|
|
<p class="note">Note: The <span class="property"><a
|
|
href="#alignment-adjust">'alignment-adjust'</a></span> property specifies how
|
|
the alignment point is determined and defaults to the baseline with the same
|
|
name as the computed value of the alignment-baseline property.
|
|
|
|
<p>Except for 'use-script', all baseline values refer to the respective
|
|
baseline-identifier components of the dominant-baseline of the parent, and
|
|
glyphs within the element are aligned similarly to the element itself. The
|
|
description for 'use-script' covers these points specifically. The property
|
|
values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><strong>baseline</strong>
|
|
|
|
<dd>The alignment-point of the element being aligned is aligned with the
|
|
dominant baseline of the parent.
|
|
|
|
<dt><strong>use-script</strong>
|
|
|
|
<dd>If the element <span class="property"><a
|
|
href="#script">'script'</a></span> property value is 'auto', the alignment
|
|
point of each glyph is aligned with the baseline-identifier of the script to
|
|
which the glyph belongs. If the element <span class="property"><a
|
|
href="#script">'script'</a></span> property value is other than 'auto', the
|
|
alignment point of each glyph is aligned with the baseline-identifier
|
|
specified by the <span class="property"><a href="#script">'script'</a></span>
|
|
property. The baseline-identifier position is determined by using the
|
|
relevant information related to the parent element dominant-baseline set. The
|
|
alignment point of the element itself is aligned as for the 'baseline' value.
|
|
|
|
<dt><strong>before-edge</strong>
|
|
|
|
<dd>The alignment point of the box is aligned with the 'before-edge' baseline
|
|
of the line box.
|
|
|
|
<dt><strong>text-before-edge</strong>
|
|
|
|
<dd>The alignment-point of the element being aligned is aligned with the
|
|
<span class="css">'text-before-edge'</span> baseline of the parent.
|
|
|
|
<dt><strong>after-edge</strong>
|
|
|
|
<dd>The alignment point of the box is aligned with the 'after-edge' baseline
|
|
of the line box.
|
|
|
|
<dt><strong>text-after-edge</strong>
|
|
|
|
<dd>The alignment-point of the element being aligned is aligned with the
|
|
<span class="css">'text-after-edge'</span> baseline of the parent.
|
|
|
|
<dt><strong>central</strong>
|
|
|
|
<dd>The alignment point of the box is aligned with the 'central' baseline of
|
|
the parent.
|
|
|
|
<dt><strong>middle</strong>
|
|
|
|
<dd>The alignment point of the box is aligned with the 'middle' baseline of
|
|
the parent.
|
|
|
|
<dt><strong>ideographic</strong>
|
|
|
|
<dd>The alignment-point of the element being aligned is aligned with the
|
|
'ideographic' baseline of the parent.
|
|
|
|
<dt><strong>alphabetic</strong>
|
|
|
|
<dd>The alignment-point of the element being aligned is aligned with the
|
|
lower baseline of the parent.
|
|
|
|
<dt><strong>hanging</strong>
|
|
|
|
<dd>The alignment-point of the element being aligned is aligned with the
|
|
hanging baseline of the parent.
|
|
|
|
<dt><strong>mathematical</strong>
|
|
|
|
<dd>The alignment-point of the element being aligned is aligned with the
|
|
mathematical baseline of the parent.
|
|
</dl>
|
|
|
|
<p>The values: before-edge, text-before-edge, after-edge and text-after-edge
|
|
all work relatively to the writing-mode property values. For example
|
|
'before-edge' means 'top' in an horizontal writing mode and 'right' in a
|
|
vertical writing mode.
|
|
|
|
<p class="note"><b>Note.</b> The reason why 'baseline' is the initial value
|
|
instead of 'use-script' (called 'auto' in the similar XSL property) has to do
|
|
with the fact that most fonts today are designed with an alignment point
|
|
located at the 'alphabetical' level, even for glyphs belonging to non Latin
|
|
scripts. User agents have to deal with that constraint, and therefore they
|
|
use the 'baseline' value as initial.
|
|
|
|
<h3 id="alignment-adjust-prop"><span class="secno">4.6. </span>Setting the
|
|
alignment point: the <span class="property"><a
|
|
href="#alignment-adjust">'alignment-adjust'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="name-14">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="alignment-adjust">alignment-adjust</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | baseline | before-edge | text-before-edge | middle | central |
|
|
after-edge | text-after-edge | ideographic | alphabetic | hanging |
|
|
mathematical | <a
|
|
href="/TR/REC-CSS2/syndata.html#percentage-units"><percentage></a> | <a
|
|
href="/TR/REC-CSS2/syndata.html#length-units"><length></a>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>inline-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refers to the 'line-height' of the element
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>see text
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#alignment-adjust">'alignment-adjust'</a></span> property allows more
|
|
precise alignment of elements, such as graphics, that do not have a
|
|
baseline-table or lack the desired baseline in their baseline-table. With the
|
|
<span class="property"><a
|
|
href="#alignment-adjust">'alignment-adjust'</a></span> property, the position
|
|
of the baseline identified by the <span class="property"><a
|
|
href="#alignment-baseline">'alignment-baseline'</a></span> can be explicitly
|
|
determined. It also determines precisely the alignment point for each glyph
|
|
within a textual element. The user agent should use heuristics to determine
|
|
the position of a non existing baseline for a given element.
|
|
|
|
<p>Values for the property have the following meaning:
|
|
|
|
<dl>
|
|
<dt><strong>auto</strong>
|
|
|
|
<dd>For each glyph corresponding to textual information within the element,
|
|
the alignment-point is the intersection of the start-edge of the glyph box
|
|
and the block-progression-direction position of the alignment point from the
|
|
font. Padding, border or margin do not affect that alignment point. The
|
|
alignment point of the inline-level element itself is at the intersection of
|
|
the start-edge of the first inline box and the baseline identified by the
|
|
<span class="property"><a
|
|
href="#alignment-baseline">'alignment-baseline'</a></span> property if this
|
|
baseline exists in the baseline-table for the element dominant-baseline. If
|
|
that specific baseline does not exist, the user agent may use heuristics to
|
|
determine where that missing baseline would be. For other inline box content
|
|
like images, the user agent will use heuristics to determine the position of
|
|
the alignment point. For example when the resulting baseline is 'alphabetic'
|
|
or 'ideographic', it is expected that the alignment point will be at the
|
|
intersection of the start-edge and the after-edge of the inline box,
|
|
including its respective margin. If the resulting baseline is 'hanging', the
|
|
intersection of the start-edge and the before-edge of the inline box,
|
|
including its respective margin should be used instead.<dd>When the
|
|
'alignment-baseline' property is set to either 'after-edge' or 'before-edge',
|
|
the 'alignment-adjust: auto' value is equivalent to 'after-edge' or
|
|
'before-edge' respectively.<dt><strong>baseline</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the dominant-baseline of the element.
|
|
|
|
<dt><strong>before-edge</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the before-edge of the extended inline box of the element. This may
|
|
include or not the line-height of the element, depending on the
|
|
line-stacking-strategy.<dt><strong>text-before-edge</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the <span class="css">'text-before-edge'</span> baseline of the
|
|
element.
|
|
|
|
<dt><strong>central</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the 'central' baseline of the element.
|
|
|
|
<dt><strong>middle</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the 'middle' baseline of the element.
|
|
|
|
<dt><strong>after-edge</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the after-edge of the extended inline box of the element. This may
|
|
include or not the line-height of the element, depending on the
|
|
line-stacking-strategy.<dt><strong>text-after-edge</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the <span class="css">'text-after-edge'</span> baseline of the
|
|
element.
|
|
|
|
<dt><strong>ideographic</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the 'ideographic' baseline of the element.
|
|
|
|
<dt><strong>alphabetic</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the 'alphabetic' baseline of the element.
|
|
|
|
<dt><strong>hanging</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the 'hanging' baseline of the element.
|
|
|
|
<dt><strong>mathematical</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the start-edge of the
|
|
element and the 'mathematical' baseline of the element.
|
|
|
|
<dt><strong><percentage></strong>
|
|
|
|
<dd>The computed value of the property is this percentage multiplied by the
|
|
computed 'line-height' of the element. The alignment point is on the
|
|
start-edge of the inline box. Its position along the start-edge relative to
|
|
the intersection of the dominant-baseline and the start-edge is offset by the
|
|
computed value. The offset is opposite to the shift-direction (positive
|
|
value) or in the shift-direction (negative value). A value of '0%' makes the
|
|
dominant-baseline the alignment point.
|
|
|
|
<dt><strong><length></strong>
|
|
|
|
<dd>The alignment-point is on the start-edge of the inline box. Its position
|
|
along the start-edge relative to the intersection of the dominant-baseline
|
|
and the start-edge is offset by the <length> value. The offset is
|
|
opposite to the shift-direction (positive value) or in the shift-direction
|
|
(negative value). A value of '0cm' makes the dominant-baseline the alignment
|
|
point.
|
|
</dl>
|
|
|
|
<h3 id="baseline-shift-prop"><span class="secno">4.7. </span>Repositioning
|
|
the dominant baseline: the <span class="property"><a
|
|
href="#baseline-shift">'baseline-shift'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="name-15">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="baseline-shift">baseline-shift</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>baseline | sub | super | <a
|
|
href="/TR/REC-CSS2/syndata.html#percentage-units"><percentage></a> | <a
|
|
href="/TR/REC-CSS2/syndata.html#length-units"><length></a>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>baseline
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>inline-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refers to the 'line-height' of the parent element
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>see text
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#baseline-shift">'baseline-shift'</a></span> property allows
|
|
repositioning of the dominant-baseline relative to the dominant-baseline. The
|
|
shifted object might be a sub- or superscript. Within the shifted element,
|
|
the whole baseline table is offset; not just a single baseline. For sub- and
|
|
superscript, the amount of offset is determined from the nominal font of the
|
|
parent.
|
|
|
|
<p>Values for the property have the following meaning:
|
|
|
|
<dl>
|
|
<dt><strong>baseline</strong>
|
|
|
|
<dd>There is no baseline shift; the dominant baseline remains in its original
|
|
position.
|
|
|
|
<dt><strong>sub</strong>
|
|
|
|
<dd>The dominant baseline is shifted to the default position for subscripts.
|
|
The offset for this position is determined by the font data for the parent
|
|
nominal font as adjusted by the dominant baseline-table font-size of the
|
|
parent element. If there is no applicable font data the User Agent may use
|
|
heuristic to determine the offset.
|
|
|
|
<dt><strong>super</strong>
|
|
|
|
<dd>The dominant baseline is shifted to the default position for
|
|
superscripts. The offset for this position is determined by the font data for
|
|
the parent nominal font as adjusted by the dominant baseline-table font-size
|
|
of the parent element. If there is no applicable font data the User Agent may
|
|
use heuristic to determine the offset.
|
|
|
|
<dt><strong><percentage></strong>
|
|
|
|
<dd>The computed value of the property is this percentage multiplied by the
|
|
computed 'line-height' of the parent element. The dominant-baseline is
|
|
shifted in the shift-direction (positive value) or opposite to the
|
|
shift-direction (negative value) of the parent area by the computed value. A
|
|
value of '0%' is equivalent to 'baseline'.
|
|
|
|
<dt><strong><length></strong>
|
|
|
|
<dd>The dominant-baseline is shifted in the shift-direction (positive value)
|
|
or opposite to the shift-direction (negative value) of the parent area by the
|
|
<length> value. A value of '0cm' is equivalent to 'baseline'.
|
|
</dl>
|
|
|
|
<p class="note"><b>Note.</b> Although it may seem that 'baseline-shift' and
|
|
<span class="property"><a
|
|
href="#alignment-adjust">'alignment-adjust'</a></span> properties are doing
|
|
the same thing, there are important differences. For <span
|
|
class="property"><a href="#alignment-adjust">'alignment-adjust'</a></span>
|
|
the percentage values refer to the 'line-height' of the element being
|
|
aligned. For 'baseline-shift the percentage values refer to the 'line-height'
|
|
of the parent element. Similarly, it is the 'sub' and 'super' offsets of the
|
|
parent that are used to align the shifted baseline rather than the 'sub' and
|
|
'super' offsets of the element being positioned. To ensure a consistent sub-
|
|
or superscript position, it makes more sense to use the parent as the
|
|
reference rather than the subscript element which may have a changed
|
|
"line-height" due to "font-size" changes in the sub- or superscript
|
|
element.<br>
|
|
Using the "alignment-adjust" property is more suitable for positioning
|
|
elements, such as graphics, that have no internal textual structure. Using
|
|
the "baseline-shift" property is intended for sub- and superscripts where the
|
|
positioned element may itself be textual. The baseline-shift provides a way
|
|
to define a specific baseline offset other than the named offsets that are
|
|
defined relative to the dominant-baseline. In addition, having
|
|
"baseline-shift" makes it easier for a tool to generate the relevant
|
|
properties; many formatting programs already have a notion of baseline shift.
|
|
|
|
<h3 id="vertical-align-prop"><span class="secno">4.8. </span>Vertical
|
|
alignment: the <span class="property"><a
|
|
href="#vertical-align">'vertical-align'</a></span> shorthand baseline
|
|
alignment property</h3>
|
|
|
|
<table class="propdef" id="name-16">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="vertical-align">vertical-align</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | use-script | baseline | sub | super | top | text-top | central |
|
|
middle | bottom | text-bottom | <a
|
|
href="/TR/REC-CSS2/syndata.html#percentage-units"><percentage></a> | <a
|
|
href="/TR/REC-CSS2/syndata.html#length-units"><length></a>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>not defined for shorthand properties
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>inline-level and 'table-cell' elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refers to the 'line-height' of the element itself
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>see text
|
|
</table>
|
|
|
|
<p>This property affects the vertical positioning of the inline boxes generated
|
|
by an inline-level element inside a line box. The following values only have
|
|
meaning with respect to a parent inline-level element, or to a parent
|
|
block-level element, if that element generates <a
|
|
href="/TR/REC-CSS2/visuren.html#anonymous">anonymous inline boxes</a>; they
|
|
have no effect if no such parent exists.
|
|
|
|
<div class="note">
|
|
<p><em><strong>Note.</strong> Values of this property have slightly different
|
|
meanings in the context of tables. Please consult the section on <a
|
|
href="/TR/REC-CSS2/tables.html#height-layout">table height algorithms</a> for
|
|
details.</em>
|
|
</div>
|
|
|
|
<dl>
|
|
<dt><strong>auto</strong>
|
|
|
|
<dd>Align the dominant baseline of the parent box with the equivalent, or
|
|
heuristically reconstructed, baseline of the element inline box. If the element doesn't have
|
|
a baseline, align the bottom of the inline box, including its margin with the
|
|
parent's dominant baseline. If there is no parent or if there is a change of
|
|
flow orientation between this element and its parent, the dominant baseline
|
|
is set to 'alphabetic' for horizontal flow and 'central' for vertical flow.
|
|
|
|
<dt><strong>use-script</strong>
|
|
|
|
<dd>Align the script preferred baseline of the element (determined by the
|
|
computed script value) with the equivalent baseline of the parent element.
|
|
|
|
<dt><strong>baseline</strong>
|
|
|
|
<dd>Align the 'alphabetic' baseline of the element with the 'alphabetic' baseline
|
|
of the parent element. If the inline element doesn't have an 'alphabetic' baseline, align
|
|
the bottom of the box, including its margin for replaced elements, with the
|
|
parent's 'alphabetic' baseline. The dominant baseline is set to 'alphabetic'
|
|
if there is no parent or if there is a flow orientation change between this
|
|
element and its parent, otherwise it is set to 'no-change'.
|
|
|
|
<dt><strong>central</strong>
|
|
|
|
<dd>Align the 'central' baseline of the inline element with the central baseline
|
|
of the parent.
|
|
|
|
<dt><strong>middle</strong>
|
|
|
|
<dd>Align the 'middle' baseline of the inline element with the middle baseline of the parent.
|
|
|
|
<dt><strong>sub</strong>
|
|
|
|
<dd>Lower the baseline of the box to the proper position for subscripts of
|
|
the parent's box. (This value has no effect on the font size of the element's
|
|
text.)
|
|
|
|
<dt><strong>super</strong>
|
|
|
|
<dd>Raise the baseline of the box to the proper position for superscripts of
|
|
the parent's box. (This value has no effect on the font size of the element's
|
|
text.)
|
|
|
|
<dt><strong>text-top</strong>
|
|
|
|
<dd>Align the top of the box with the before-edge of the parent element's
|
|
font.
|
|
|
|
<dt><strong>text-bottom</strong>
|
|
|
|
<dd>Align the bottom of the box with the after-edge of the parent element's
|
|
font.
|
|
|
|
<dt><span class="index-inst" id="ltpercentagegt"
|
|
title="<percentage>"><a class="noxref"
|
|
href="/TR/REC-CSS2/syndata.html#value-def-percentage" name="x23"><span
|
|
class="value-inst-percentage"><strong><percentage></strong></span></a></span>
|
|
|
|
<dd>Raise (positive value) or lower (negative value) the box by this distance
|
|
(a percentage of the computed <a class="noxref"
|
|
href="/TR/REC-CSS2/visudet.html#propdef-line-height"><span
|
|
class="propinst-line-height">'line-height'</span></a> of the element). The
|
|
value '0%' means the same as 'baseline'.
|
|
|
|
<dt><span class="index-inst" id="ltlengthgt" title="<length>"><a
|
|
class="noxref" href="/TR/REC-CSS2/syndata.html#value-def-length"
|
|
name="x24"><span
|
|
class="value-inst-length"><strong><length></strong></span></a></span>
|
|
|
|
<dd>Raise (positive value) or lower (negative value) the box by this
|
|
distance. The value '0cm' means the same as 'baseline'.
|
|
</dl>
|
|
|
|
<p>The remaining values refer to the line box in which the generated box
|
|
appears:
|
|
|
|
<dl>
|
|
<dt><strong>top</strong>
|
|
|
|
<dd>Align the before edge of the extended inline box with the before-edge of the line box.
|
|
|
|
<dt><strong>bottom</strong>
|
|
|
|
<dd>Align the after edge of the extended inline box with the after-edge of the line box.
|
|
</dl>
|
|
|
|
<p>The 'vertical-align' property values affect the baseline alignment
|
|
properties for which it is a shorthand in the following manner:
|
|
|
|
<table border="1">
|
|
<tbody>
|
|
<tr>
|
|
<th>vertical-align value
|
|
|
|
<th>alignment-baseline
|
|
|
|
<th>alignment-adjust
|
|
|
|
<th>baseline-shift
|
|
|
|
<th>dominant-baseline
|
|
|
|
<tr>
|
|
<th>auto
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>use-script
|
|
|
|
<td>use-script
|
|
|
|
<td>auto
|
|
|
|
<td>auto
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>baseline
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<td>baseline
|
|
|
|
<td><span class="propinst-vertical-align">alphabetic <i>(if no parent or
|
|
different flow from parent)</i></span><br>
|
|
no-change <i>(otherwise)</i>
|
|
|
|
<tr>
|
|
<th>sub
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<td>sub
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>super
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<td>super
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>top
|
|
|
|
<td>before-edge
|
|
|
|
<td>auto
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>text-top
|
|
|
|
<td>text-before-edge
|
|
|
|
<td>auto
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>central<td>central<td>auto<td>baseline<td>auto<tr>
|
|
<th>middle
|
|
|
|
<td>middle
|
|
|
|
<td>auto
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>bottom
|
|
|
|
<td>after-edge
|
|
|
|
<td>auto
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>text-bottom
|
|
|
|
<td>text-after-edge
|
|
|
|
<td>auto
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th><percentage>
|
|
|
|
<td>baseline
|
|
|
|
<td><percentage>
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th><length>
|
|
|
|
<td>baseline
|
|
|
|
<td><length>
|
|
|
|
<td>baseline
|
|
|
|
<td>auto
|
|
</table>
|
|
|
|
<h3 id="inline-box-align-prop"><span class="secno">4.9. </span>Inline box
|
|
alignment: the <span class="property"><a
|
|
href="#inline-box-align">'inline-box-align'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="name-17">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="inline-box-align">inline-box-align</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>initial | last | <a
|
|
href="/TR/REC-CSS2/syndata.html#percentage-units"><integer></a>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>last
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>inline-block-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value (except for initial and inherit)
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#inline-box-align">'inline-box-align'</a></span> property determines
|
|
which line of a multi-line inline block align with the previous and next
|
|
inline elements within a line. The alignment strategy for the inline lock
|
|
itself (i.e. the definition of it alignment point and which parent baseline
|
|
should be used for the alignment) is determined by the inline block element
|
|
baseline alignment properties applicable to the line being used for the
|
|
alignment. This property has no effect for single line inline block. Possible
|
|
values:
|
|
|
|
<dl>
|
|
<dt>initial
|
|
|
|
<dd>Use the initial line of the inline block element for alignment purpose.
|
|
|
|
<dt>last
|
|
|
|
<dd>Use the last line of the inline block element for alignment purpose.
|
|
|
|
<dt><integer>
|
|
|
|
<dd>Use nth line (as determined by the integer value) of the inline block
|
|
element for alignment purpose.
|
|
</dl>
|
|
|
|
<hr>
|
|
|
|
<h2 id="Initial"><span class="secno">5. Initial line and Drop initial</span></h2>
|
|
|
|
<h3 id="InitialLine"><span class="secno">5.1. </span>Initial line</h3>
|
|
|
|
<p>On a block element containing inline elements, the initial line is very often
|
|
presented differently. For example it may use a difference typeface, a color,
|
|
font-size or even casing (like all uppercase). The presentation of that initial
|
|
line can be controlled by applying a limited set of style properties to the
|
|
::first-line pseudo element. Only the following properties can be applied to the
|
|
::first-line pseudo elements:<ul>
|
|
<li>font properties</li>
|
|
<li>color properties</li>
|
|
<li>background properties</li>
|
|
<li>text decoration properties</li>
|
|
<li>baseline alignment properties</li>
|
|
<li>'word-spacing'</li>
|
|
<li>'letter-spacing'</li>
|
|
<li>'line-height' (may be ignored depending on the block line-stacking strategy)</li>
|
|
<li>'text-shadow'</li>
|
|
<li>'clear'</li>
|
|
</ul>
|
|
|
|
<p>Although there is no properties only applicable to ::first-line pseudo
|
|
elements, in essence the 'text-indent' property which is applied to
|
|
'block-level' elements is in fact only effective on the first line of the block
|
|
element.</p>
|
|
|
|
<h3 id="DropInitial"><span class="secno">5.2. </span>Drop Initial overview</h3>
|
|
|
|
<p>Drop initial is a typographic effect emphasizing the initial letter(s) of a block
|
|
element with a presentation similar to a 'floated' element. It can be described as the combination of the following effects:
|
|
|
|
<ul>
|
|
<li>
|
|
<p>For the purpose of drop initial, an initial letter has two alignment points: an
|
|
'after' alignment point and a 'before' alignment point. (For
|
|
writing-mode:lr-tb, 'after' corresponds to bottom and 'before' to 'top').
|
|
|
|
<li>
|
|
<p>The 'after' alignment point connects with one of the alignment point of
|
|
the n<sup>th</sup> line of the block element of which the initial letter is
|
|
part of. The value 'n' is the number of lines by which the initial letter is
|
|
dropped. That connection point is called the primary connection point. The
|
|
union of the two alignment lines makes a connection line.
|
|
|
|
<li>
|
|
<p>If no drop initial size is explicitly provided, there is a secondary connection
|
|
point where the 'before' alignment points connects with one of the alignment
|
|
point of the initial line. In that case the initial letter is totally sunken.
|
|
|
|
<li>
|
|
<p>If a drop initial size is provided, there is no secondary connection point as
|
|
it would result otherwise in an over constraint situation. In that case the
|
|
initial letter may not be totally sunken, especially if the size is provided in
|
|
'line' unit with a number larger than the drop.
|
|
|
|
<li>
|
|
<p>The values provided above result in the creation of an 'ink box' which is
|
|
filled by the initial letter. Depending on the selected alignment points, part
|
|
of the glyphs may bleed beyond the ink box.
|
|
|
|
<li>
|
|
<p>The character content of the drop initial influences greatly how the drop
|
|
initial
|
|
letters are best aligned with the rest of the block element content.
|
|
|
|
</ul>
|
|
|
|
<p>The CSS mechanism to 'select' the drop initial content is the ::first-letter
|
|
pseudo element. The first letter is defined as including all starting
|
|
punctuation characters (defined in Unicode as 'open' (Ps), 'close' (Pe) and
|
|
'other' (Po), if any, followed by the first non-punctuation character cluster. A
|
|
character cluster may be a single character, a combining sequences (base
|
|
character followed by combining characters) or a stacked set of characters (like
|
|
in Thai).
|
|
|
|
<p>Only the following properties can be applied to the ::first-letter pseudo
|
|
elements:<ul>
|
|
<li>font properties</li>
|
|
<li>color properties</li>
|
|
<li>background properties</li>
|
|
<li>text decoration properties</li>
|
|
<li>baseline alignment properties (only if 'float' is 'none')</li>
|
|
<li>'text-transform'</li>
|
|
<li>'letter-spacing'</li>
|
|
<li>'line-height' (may be ignored depending on the block line-stacking strategy)</li>
|
|
<li>margin properties</li>
|
|
<li>padding properties</li>
|
|
<li>border properties</li>
|
|
<li>'float'</li>
|
|
<li>text-shadow</li>
|
|
<li>'clear'</li>
|
|
<li>all properties described in this section (drop-initial-...)</li>
|
|
</ul>
|
|
|
|
<p>In addition, one property: 'text-indent' although applying to block-level
|
|
elements is in fact effective on its first line of text and has therefore an
|
|
influence on the indentation of the first-letter versus the start edge of the
|
|
containing block. Using the 'text-indent' allows the correction of optical
|
|
effect (like uppercase 'O') or even pushing the starting piece of the initial
|
|
letter in a 'virtual' margin.</p>
|
|
<p class="note">Editor's note: Additional drop initial features are desirable
|
|
but are not described in this specification:<ul>
|
|
<li>
|
|
|
|
<p class="note">bleeding between the drop initial and its related block content,</li>
|
|
<li>
|
|
|
|
<p class="note">tight wrap between the drop initial and its related block
|
|
content</li>
|
|
<li>
|
|
|
|
<p class="note">multiple letter with author control (not possible with
|
|
::first-letter)</li>
|
|
<li>
|
|
|
|
<p class="note">multiple size and alignment within the drop initial (required
|
|
for French opening guillemet)</li>
|
|
</ul>
|
|
|
|
<p class="note">Some of these features (multiple letter and size) could be
|
|
achieved by introducing a new display value, like 'display: drop-initial' which
|
|
when applied to an inline element part of the first line could make it behave
|
|
like a drop initial inline element.<p>The following figure shows first a simple case of a
|
|
three line drop initial, and
|
|
second a case of a two line drop initial but with a three line size initial letter.
|
|
|
|
<div class="figure">
|
|
<p> <img alt="simple drop caps" height="121" src="dc-simple.gif" width="376">
|
|
|
|
<p>Typical drop initial cases: sunken cap and partially raised
|
|
cap
|
|
</div>
|
|
|
|
<p>The bottom horizontal line in the first example shows the alignment
|
|
between the baseline of the initial letter and the baseline of the third line
|
|
of its block element. The primary connection point occurs at the intersection
|
|
of these baselines between the two boxes (the third line box and the initial
|
|
letter box). The top horizontal line shows a connection point between the top
|
|
of the ink of the initial letter and the text-before-edge baseline of the
|
|
initial
|
|
line. Alternatively, instead of the text-before-edge baseline, a new computed
|
|
alignment could be used which correspond loosely to the maximum caps-height
|
|
of the initial line.
|
|
|
|
<p>Typically the ink of drop initial characters 'fills' the space between the
|
|
baseline and the text-before-edge, therefore 'taller' characters are
|
|
processed accordingly. This is shown in the first two pictures of the
|
|
following figure, using first an accentuated letter, and then a letter
|
|
without accent.
|
|
|
|
<div class="figure">
|
|
<p> <img alt="drop caps showing case with and without accent" height="148"
|
|
src="dc-accents.gif" width="599">
|
|
|
|
<p>Drop initial with accent and without accent
|
|
</div>
|
|
|
|
<p>The third picture shows a more correct effect with the acute accent drawn
|
|
in the upper padding area. This effect is realized by having the secondary
|
|
connection point between the initial letter caps height and the maximum caps
|
|
height of the initial line.
|
|
|
|
<p>Typically characters are stretched in both direction to fill the space
|
|
between the primary and secondary connection lines (in the absence of an
|
|
explicit drop initial size). Even if the character has no 'ink' at the primary
|
|
connection line, the stretching is performed as if there were a 'virtual'
|
|
point at that level. The following figure demonstrates the effect for the
|
|
hyphen-minus character. The other two characters demonstrate the variable
|
|
stretching made by the drop initial effect.
|
|
|
|
<div class="figure">
|
|
<p> <img alt="drop cap with period, hyphen and exclamation point"
|
|
height="122" src="dc-symbols.gif" width="625">
|
|
|
|
<p>Drop initial with period, hyphen and exclamation point
|
|
</div>
|
|
|
|
<p>For characters that have only ink 'after' (below) their baseline there is
|
|
really no good strategy. It may be better to use the font EM square as
|
|
reference for symbols that have no ink at the primary connection line.
|
|
|
|
<p>Some characters are always expected to be shown as if using their full EM
|
|
square, even in drop initial situation. For example, this is the case for all
|
|
ideograms and related characters like the Japanese Kana characters. The
|
|
following figure shows how the ink of the character representing the number
|
|
one in CJK (middle picture) is not stretched to hit the top of the
|
|
text-before-edge of the initial line, but is instead stretched following the
|
|
same ratio as the character in the left picture. The picture on the right
|
|
shows that drop initial can also be used in vertical flow.
|
|
|
|
<div class="figure">
|
|
<p> <img alt="drop cap with ideographs" height="140" src="dc-ideo.gif"
|
|
width="521">
|
|
|
|
<p>Drop initial with ideographic characters
|
|
</div>
|
|
|
|
<p>Drop initial characters can be aligned using a variety of baselines for the
|
|
drop initial alignment point used for the primary connection point. The examples
|
|
above used the alphabetic and the ideographic baselines. The following
|
|
figures compares the usage of the text-after-edge baseline (picture on the
|
|
left) and the alphabetic baseline (picture on the right). Note that when the
|
|
alphabetic baseline is used for characters that have ink below the baseline,
|
|
the actual drop initial effect may occur through many more lines to accommodate
|
|
the text-after-edge constraint.
|
|
|
|
<div class="figure">
|
|
<p> <img alt="drop cap with lowercase letters" height="144"
|
|
src="dc-lowercase.gif" width="474">
|
|
|
|
<p>Drop initial with lowercase characters
|
|
</div>
|
|
|
|
<div class="figure">
|
|
<p> <img alt="drop cap with uppercase q" height="137" src="dc-upperq.gif"
|
|
width="463">
|
|
|
|
<p>Drop initial with uppercase character with descender
|
|
</div>
|
|
|
|
<p>The drop initial effect may also be used for writing systems which use
|
|
different alignment strategies. For example, in Devanagari the hanging
|
|
baseline may be preferred. In that case the primary connection point connects the text-after-edge of the
|
|
initial letter with the text-after-edge
|
|
of the nth line, but the secondary connection point connects the hanging
|
|
baselines of the initial letter and the initial line. This is shown in the
|
|
following figure:
|
|
|
|
<div class="figure">
|
|
<p> <img alt="drop cap with devanagari" height="129" src="dc-devanagari.gif"
|
|
width="225">
|
|
|
|
<p>Drop initial with hanging devanagari characters
|
|
</div>
|
|
|
|
<p>The drop initial effect is typically based on a number of lines, i.e. the
|
|
combined line-height adjusted by the alignment strategies for the connection
|
|
lines is used to determine the default size of the drop initial character.
|
|
However there is a potential circular issue as the activation of the effect
|
|
modifies the content of the lines and therefore may affect their line-height.
|
|
The recommended strategy is to determine the drop initial character size using
|
|
the initial combined line height and to possibly stretch the character along
|
|
the new baseline if the combined line height is modified by the drop initial
|
|
effect. The following figure shows the initial text on the left, an incorrect
|
|
drop initial effect in the middle (no stretch applied) and a correct effect on
|
|
the right (stretch applied).
|
|
|
|
<div class="figure">
|
|
<p> <img alt="drop cap with variable line heights" height="192"
|
|
src="dc-variable.gif" width="565">
|
|
|
|
<p>Drop initial with variable line heights
|
|
</div>
|
|
|
|
<h3 id="DropInitialSize"><span class="secno">5.3. </span>Sizing drop initial, the <span class="property"><a
|
|
href="#drop-initial-size">'drop-initial-size'</a></span> and the <span
|
|
class="property"><a href="#drop-initial-value">'drop-initial-value'</a> properties</span></h3>
|
|
|
|
<table cellpadding="0" cellspacing="0" class="propdef" id="name-19">
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="drop-initial-value">drop-initial-value</dfn>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Value:</em>
|
|
|
|
<td><span class="value-inst-length">initial | <a class="noxref"
|
|
href="/TR/REC-CSS2/syndata.html#value-def-integer"><integer></a></span>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Initial:</em>
|
|
|
|
<td>initial
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>::first-letter pseudo element
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified values (except for initial and inherit)
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#drop-initial-value">'drop-initial-value'</a></span> property is the basic
|
|
property that activates a drop-initial effect. By providing a value different than
|
|
'initial or '1', the primary connection point is moved after the initial line.
|
|
Possible values:
|
|
|
|
<dl>
|
|
<dt>initial
|
|
|
|
<dd>The drop initial letter is aligned on the initial line
|
|
|
|
<dt><span class="value-inst-integer"><strong><integer></strong></span>
|
|
|
|
<dd>The drop initial letter is sunken to the nth line (as determined by the
|
|
integer value).
|
|
</dl>
|
|
|
|
<table cellpadding="0" cellspacing="0" class="propdef" id="name-20">
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="drop-initial-size">drop-initial-size</dfn>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | <line> | <length> | <percentage>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>::first-letter pseudo element
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refer to combined line height size as provided by drop-initial-value
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified values (except for initial and inherit)
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#drop-initial-size">'drop-initial-size'</a></span> property controls the partial
|
|
sinking of the initial letter. Using any other value than 'auto' removes the
|
|
secondary connection line constraint. Possible values:
|
|
|
|
<dl>
|
|
<dt>auto
|
|
|
|
<dd>The drop initial letter is sized according to the constraints created by the
|
|
the ink filling strategy and the two connection lines.
|
|
|
|
<dt> <strong><line></strong>
|
|
|
|
<dd>The drop initial letter is sized using the combined line height of the nth
|
|
lines (as determined by the line value). The letter may be stretched on one
|
|
dimension if the line height of each line is variable to avoid circular
|
|
issues.
|
|
|
|
<dt><length>
|
|
|
|
<dd>The drop initial letter is sized using the length value.
|
|
|
|
<dt><percentage>
|
|
|
|
<dd>The drop initial letter is sized relatively to the combined line height of
|
|
the n lines determined by the <span class="property"><a
|
|
href="#drop-initial-value">'drop-initial-value'</a></span> property value.
|
|
</dl>
|
|
|
|
<h3 id="DropInitialAlign"><span class="secno">5.4. </span>Aligning drop initial: the <span
|
|
class="property"><a
|
|
href="#drop-initial-before-align">'drop-initial-before-align'</a></span>, <span
|
|
class="property"><a
|
|
href="#drop-initial-before-adjust">'drop-initial-before-adjust'</a></span>, <span
|
|
class="property"><a
|
|
href="#drop-initial-after-align">'drop-initial-after-align'</a></span> and <span
|
|
class="property"><a
|
|
href="#drop-initial-after-adjust">'drop-initial-after-adjust'</a></span> properties</h3>
|
|
|
|
<table cellpadding="0" cellspacing="0" class="propdef" id="name-21">
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="drop-initial-after-align">drop-initial-after-align</dfn>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Value:</em>
|
|
|
|
<td><'alignment-baseline'>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Initial:</em>
|
|
|
|
<td>baseline
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>::first-letter pseudo element
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified values (except for initial and inherit)
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#drop-initial-after-align">'drop-initial-after-align'</a></span> property
|
|
determines which alignment line within the nth line box (n being defined by
|
|
the <span class="property"><a
|
|
href="#drop-initial-value">'drop-initial-value'</a></span> property) is used at the
|
|
primary connection point with the initial letter box. The values are the same
|
|
as the 'alignment-baseline' property values.
|
|
|
|
<table cellpadding="0" cellspacing="0" class="propdef" id="name-22">
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="drop-initial-after-adjust">drop-initial-after-adjust</dfn>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Value:</em>
|
|
|
|
<td>central | middle | after-edge | text-after-edge | ideographic |
|
|
alphabetic | mathematical | <percentage> | <length>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Initial:</em>
|
|
|
|
<td>text-after-edge
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>::first-letter pseudo element
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refer to combined line height size as provided by drop-initial-value
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified values (except for initial and inherit)
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#drop-initial-after-adjust">'drop-initial-after-adjust'</a></span> property sets
|
|
the alignment point of the drop initial for the primary connection point.
|
|
Possible values:
|
|
|
|
<dl>
|
|
<dt><strong>central</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'central' baseline of the element.
|
|
|
|
<dt><strong>middle</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'middle' baseline of the element.
|
|
|
|
<dt><strong>after-edge</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'after-edge' of the extended inline box of the element. This may include
|
|
or not the line-height of the element, depending on the line-stacking-strategy.
|
|
|
|
<dt><strong>text-after-edge</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the <span class="css">'text-after-edge'</span> baseline of the element.
|
|
|
|
<dt><strong>ideographic</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'ideographic' baseline of the element.
|
|
|
|
<dt><strong>alphabetic</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'alphabetic' baseline of the element.
|
|
|
|
<dt><strong>hanging</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'hanging' baseline of the element.
|
|
|
|
<dt><strong>mathematical</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'mathematical' baseline of the element.
|
|
|
|
<dt><strong><percentage></strong>
|
|
|
|
<dd>The computed value of the property is this percentage multiplied by the
|
|
computed 'line-height' of the element. The alignment point is on the end-edge
|
|
of the inline box and is offset from the after-edge by the computed value. A
|
|
value of '0%' makes the text-after-edge the alignment point.
|
|
|
|
<dt><strong><length></strong>
|
|
|
|
<dd>The alignment-point is on the end-edge of the inline box. Its position
|
|
along the end-edge is offset from the after-edge by the <length> value.
|
|
A value of '0cm' makes the text-after-edge the alignment point.
|
|
</dl>
|
|
|
|
<table cellpadding="0" cellspacing="0" class="propdef" id="name-23">
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="drop-initial-before-align">drop-initial-before-align</dfn>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Value:</em>
|
|
|
|
<td>caps-height | <'alignment-baseline'>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Initial:</em>
|
|
|
|
<td>caps-height
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>::first-letter pseudo element
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified values (except for initial and inherit)
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#drop-initial-before-align">'drop-initial-before-align'</a></span> property
|
|
determines which alignment line within the initial line box is used at
|
|
the secondary connection point with the initial letter box. This property is
|
|
only effective is the value of the <span class="property"><a
|
|
href="#drop-initial-size">'drop-initial-size'</a></span> property is 'auto'. Possible
|
|
values:
|
|
|
|
<dl>
|
|
<dt>caps-height
|
|
|
|
<dd>The caps-height alignment line is used.
|
|
|
|
<dt> <strong><'alignment-baseline'></strong>
|
|
|
|
<dd>The values are the same as the 'alignment-baseline' property values.
|
|
</dl>
|
|
|
|
<table cellpadding="0" cellspacing="0" class="propdef" id="name-24">
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="drop-initial-before-adjust">drop-initial-before-adjust</dfn>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Value:</em>
|
|
|
|
<td>before-edge | text-before-edge | central | middle | hanging |
|
|
mathematical | <percentage> | <length>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Initial:</em>
|
|
|
|
<td>text-before-edge
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>::first-letter pseudo element
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refer to combined line height size as provided by drop-initial-value
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Media:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified values (except for initial and inherit)
|
|
</table>
|
|
|
|
<p>The <span class="property"><a
|
|
href="#drop-initial-before-adjust">'drop-initial-before-adjust'</a></span> property
|
|
sets the alignment point of the drop initial for the secondary connection point.
|
|
This property is only effective is the value of the <span class="property"><a
|
|
href="#drop-initial-size">'drop-initial-size'</a></span> property is 'auto'. Possible
|
|
values:
|
|
|
|
<dl>
|
|
<dt><strong>before-edge</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'before-edge' of the extended inline box of the element. This may
|
|
include or not the line-height of the element, depending on the
|
|
line-stacking-strategy.
|
|
|
|
<dt><strong>text-before-edge</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the <span class="css">'text-before-edge'</span> baseline of the element.
|
|
|
|
<dt><strong>central</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'central' baseline of the element.
|
|
|
|
<dt><strong>middle</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'middle' baseline of the element.
|
|
|
|
<dt><strong>hanging</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'hanging' baseline of the element.
|
|
|
|
<dt><strong>mathematical</strong>
|
|
|
|
<dd>The alignment point is at the intersection of the end-edge of the element
|
|
and the 'mathematical' baseline of the element.
|
|
|
|
<dt><strong><percentage></strong>
|
|
|
|
<dd>The computed value of the property is this percentage multiplied by the
|
|
computed 'line-height' of the element. The alignment point is on the end-edge
|
|
of the inline box and is offset from the text-before-edge by the computed
|
|
value. A value of '0%' makes the text-before-edge the alignment point.
|
|
|
|
<dt><strong><length></strong>
|
|
|
|
<dd>The alignment-point is on the end-edge of the inline box. Its position
|
|
along the end-edge is offset from the text-before-edge by the <length>
|
|
value. A value of '0cm' makes the text-before-edge the alignment point.
|
|
</dl>
|
|
|
|
<hr>
|
|
|
|
<h2 id="properties"><span class="secno">6. </span>Properties index</h2>
|
|
|
|
<p>In addition to the specified values, all properties take the
|
|
<!--begin properties-->
|
|
|
|
initial and inherit values<table class="proptable">
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a
|
|
href="#alignment-adjust">alignment-adjust</a></span>
|
|
|
|
<td>auto | baseline | before-edge | text-before-edge | middle | central |
|
|
after-edge | text-after-edge | ideographic | alphabetic | hanging |
|
|
mathematical | <percentage> | <length>
|
|
|
|
<td>auto
|
|
|
|
<td>inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>refers to the 'line-height' of the element
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a
|
|
href="#alignment-baseline">alignment-baseline</a></span>
|
|
|
|
<td>baseline | use-script | before-edge | text-before-edge | after-edge |
|
|
text-after-edge | central | middle | ideographic | alphabetic | hanging |
|
|
mathematical
|
|
|
|
<td>baseline
|
|
|
|
<td>inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a
|
|
href="#baseline-shift">baseline-shift</a></span>
|
|
|
|
<td>baseline | sub | super | <percentage> | <length>
|
|
|
|
<td>baseline
|
|
|
|
<td>inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>refers to the 'line-height' of the parent element
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a
|
|
href="#dominant-baseline">dominant-baseline</a></span>
|
|
|
|
<td>auto | use-script | no-change | reset-size | alphabetic | hanging |
|
|
ideographic | mathematical | central | middle | text-after-edge |
|
|
text-before-edge
|
|
|
|
<td>auto
|
|
|
|
<td>inline-level elements (but see prose)
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><span class="property"><a href="#drop-initial-after-adjust">drop-initial-after-adjust</a></span>
|
|
|
|
<td>central | middle |
|
|
after-edge | text-after-edge | ideographic | alphabetic | hanging |
|
|
mathematical | <percentage> | <length>
|
|
|
|
<td>text-after-edge<td>::first-letter pseudo element<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
</tr>
|
|
<tr>
|
|
<td><span class="property"><a href="#drop-initial-after-align">drop-initial-after-align</a></span>
|
|
|
|
<td><'alignment-baseline'><td>baseline<td>::first-letter pseudo element<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
</tr>
|
|
<tr>
|
|
<td><span class="property"><a href="#drop-initial-before-adjust">drop-initial-before-adjust</a></span>
|
|
|
|
<td>before-edge | text-before-edge | middle | central |
|
|
after-edge | text-after-edge | ideographic | hanging |
|
|
mathematical | <percentage> | <length>
|
|
|
|
<td>text-before-edge<td>::first-letter pseudo element<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
</tr>
|
|
<tr>
|
|
<td><span class="property"><a href="#drop-initial-before-align">drop-initial-before-align</a></span>
|
|
|
|
<td>caps-height | <'alignment-baseline'><td>caps-height<td>::first-letter pseudo
|
|
element<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
</tr>
|
|
<tr>
|
|
<td><span class="property"><a href="#drop-initial-size">drop-initial-size</a></span>
|
|
|
|
<td>auto | <line> | <length> | <percentage><td>auto
|
|
|
|
<td>::first-letter pseudo element<td>no
|
|
|
|
<td>refers to combined line height size as provided by drop-initial-value<td>visual
|
|
|
|
</tr>
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#drop-initial-value">drop-initial-value</a></span>
|
|
|
|
<td>initial | <integer>
|
|
|
|
<td>initial<td>::first-letter pseudo element<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a
|
|
href="#inline-box-align">inline-box-align</a></span>
|
|
|
|
<td>initial | last | <integer>
|
|
|
|
<td>last
|
|
|
|
<td>inline-block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#line-height">line-height</a></span>
|
|
|
|
<td>normal | number | <length> <percentage> | none<td>normal
|
|
|
|
<td>all elements and generated content
|
|
|
|
<td>yes
|
|
|
|
<td>refer to the font size of the element itself<td>visual
|
|
|
|
<tr>
|
|
<td><span class="property"><a href="#line-stacking">line-stacking</a></span>
|
|
|
|
<td><'line-stacking-strategy'> || <'line-stacking-ruby'> ||
|
|
<'line-stacking-shift'>
|
|
|
|
<td>see individual properties
|
|
|
|
<td>block-level elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
</tr>
|
|
<tr>
|
|
<td><span class="property"><a href="#line-stacking-ruby">line-stacking-ruby</a></span>
|
|
|
|
<td>exclude-ruby | include-ruby<td>exclude-ruby<td>block-level elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A<td>visual
|
|
|
|
</tr>
|
|
<tr>
|
|
<td><span class="property"><a href="#line-stacking-shift">line-stacking-shift</a></span>
|
|
|
|
<td>consider-shifts | disregard-shifts
|
|
|
|
<td>consider-shifts<td>block-level elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A<td>visual
|
|
|
|
</tr>
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a
|
|
href="#line-stacking-strategy">line-stacking-strategy</a></span>
|
|
|
|
<td>inline-line-height | block-line-height | max-height | grid-height<td>
|
|
inline-line-height<td>block-level elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#text-height">text-height</a></span>
|
|
|
|
<td>auto | font-size | text-size | max-size<td>auto<td>inline elements and
|
|
parents of element with display:ruby-text<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a
|
|
href="#vertical-align">vertical-align</a></span>
|
|
|
|
<td>auto | use-script | baseline | sub | super | top | text-top | central |
|
|
middle | bottom | text-bottom | <percentage> | <length>
|
|
|
|
<td>not defined for shorthand properties
|
|
|
|
<td>inline-level and 'table-cell' elements
|
|
|
|
<td>no
|
|
|
|
<td>refers to the 'line-height' of the element itself
|
|
|
|
<td>visual
|
|
|
|
</table>
|
|
<!--end properties-->
|
|
|
|
<p>The following properties are mentioned in this module, but are defined
|
|
elsewhere:</p>
|
|
<ul>
|
|
<li><dfn id="script">script</dfn>,
|
|
<dfn id="direction">direction</dfn>,
|
|
<dfn id="text-align">text-align</dfn>,
|
|
<dfn id="writing-mode">writing-mode</dfn>,
|
|
see the Text module.
|
|
<li><dfn id="font-size">font-size</dfn>,
|
|
see the Fonts module.
|
|
</ul>
|
|
|
|
<h2 id="profiles"><span class="secno">7. </span>Profiles</h2>
|
|
|
|
<p>There are 3 modules defined by this chapter:
|
|
|
|
<p>CSS1 line model:
|
|
|
|
<p>CSS2 line model:
|
|
|
|
<p>CSS3 line model:
|
|
|
|
<p>The CSS1 line module is made of the following properties/values:
|
|
|
|
<table class="proptable">
|
|
<tbody>
|
|
<tr>
|
|
<th>Name
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inherited
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media groups
|
|
|
|
<tr>
|
|
<td><span class="property"><a
|
|
href="#line-height">'line-height'</a></span>
|
|
|
|
<td>normal | <number> | <a class="noxref"
|
|
href="/TR/REC-CSS2/syndata.html#value-def-length"><span
|
|
class="value-inst-length"><length></span></a> | <a class="noxref"
|
|
href="/TR/REC-CSS2/syndata.html#value-def-percentage"><span
|
|
class="value-inst-percentage"><percentage></span></a><td>normal
|
|
|
|
<td> all elements
|
|
|
|
<td>yes
|
|
|
|
<td> relative to the font-size of the element itself<td>N/A
|
|
|
|
<tr>
|
|
<td><span class="property"><a
|
|
href="#vertical-align">'vertical-align'</a></span>
|
|
|
|
<td>baseline | sub | super | top | text-top | middle | bottom | text-bottom |
|
|
<a href="/TR/REC-CSS2/syndata.html#percentage-units"><percentage></a>
|
|
|
|
<td>baseline
|
|
|
|
<td>inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td> N/A
|
|
|
|
<td>N/A
|
|
|
|
</table>
|
|
|
|
<p>The following table describes the CSS2 text module. Because all properties
|
|
have added the 'inherit' value and have a media type, all CSS1 properties have
|
|
been specified below as well. In
|
|
addition, the <span class="property"><a
|
|
href="#vertical-align">'vertical-align'</a></span> has a new value:
|
|
|
|
<length>. Properties that applies to all
|
|
elements also applies to generated content. Finally, <span
|
|
class="property"><a href="#vertical-align">'vertical-align'</a></span> also
|
|
applies to table-cell elements.
|
|
|
|
<table class="proptable">
|
|
<tbody>
|
|
<tr>
|
|
<th>.Name
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inherited
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media groups
|
|
|
|
<tr>
|
|
<td><span class="property"><a
|
|
href="#line-height">'line-height'</a></span>
|
|
|
|
<td>normal | <number> | <a class="noxref"
|
|
href="/TR/REC-CSS2/syndata.html#value-def-length"><span
|
|
class="value-inst-length"><length></span></a> | <a class="noxref"
|
|
href="/TR/REC-CSS2/syndata.html#value-def-percentage"><span
|
|
class="value-inst-percentage"><percentage></span></a><td>normal
|
|
|
|
<td> all elements and generated content<td>yes
|
|
|
|
<td> relative to the font-size of the element itself<td>N/A
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><span class="property"><a
|
|
href="#vertical-align">'vertical-align'</a></span>
|
|
|
|
<td>baseline | sub | super | top | text-top | central | middle | bottom |
|
|
text-bottom | <a
|
|
href="/TR/REC-CSS2/syndata.html#percentage-units"><percentage></a> | <a
|
|
href="/TR/REC-CSS2/syndata.html#length-units"><length></a> | inherit
|
|
|
|
<td>baseline
|
|
|
|
<td>inline-level and table-cell elements
|
|
|
|
<td>no
|
|
|
|
<td> N/A
|
|
|
|
<td><a class="noxref"
|
|
href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
|
|
|
|
</table>
|
|
|
|
<p>The CSS3 module adds the following properties:
|
|
|
|
<ul>
|
|
|
|
<li>Line stacking and content height: <span class="property"><a
|
|
href="#line-stacking-strategy">'line-stacking-strategy'</a></span>, <span class="property"><a
|
|
href="#line-stacking-ruby">'line-stacking-ruby'</a></span>, <span class="property"><a
|
|
href="#line-stacking-shift">'line-stacking-shift'</a></span>, <span
|
|
class="property"><a href="#line-stacking">'line-stacking'</a></span>, <span
|
|
class="property"><a href="#text-height">'text-height'</a></span>,
|
|
|
|
<li>Baseline alignment: <span class="property"><a
|
|
href="#alignment-adjust">'alignment-adjust'</a></span>, <span
|
|
class="property"><a
|
|
href="#alignment-baseline">'alignment-baseline'</a></span>, <span
|
|
class="property"><a href="#baseline-shift">'baseline-shift'</a></span>, <span
|
|
class="property"><a href="#dominant-baseline">'dominant-baseline'</a></span>,
|
|
'inline-box-align',<li>Drop initial letter: <span class="property"><a
|
|
href="#drop-initial-size">'drop-initial-size'</a></span>, <span
|
|
class="property"><a
|
|
href="#drop-initial-value">'drop-initial-value'</a></span>, <span
|
|
class="property"><a
|
|
href="#drop-initial-after-adjust">'drop-initial-after-adjust'</a></span>, <span
|
|
class="property"><a
|
|
href="#drop-initial-after-align">'drop-initial-after-align'</a></span>, <span
|
|
class="property"><a href="#drop-initial-before-adjust">'drop-initial-before-adjust'</a></span>, <span
|
|
class="property"><a
|
|
href="#drop-initial-before-align">'drop-initial-before-align'</a></span>,</ul>
|
|
|
|
<p>It also modifies the following properties as described:
|
|
|
|
<ul>
|
|
<li><span class="property"><a
|
|
href="#vertical-align">'vertical-align'</a></span> has three new value: <span
|
|
class="css">'auto', middle</span> and <span class="css">'use-script'</span> and has its
|
|
initial value changed to <span class="css">'auto'</span>.
|
|
|
|
<li>all properties take the value 'initial'.
|
|
</ul>
|
|
|
|
<hr>
|
|
|
|
<h2 id="glossary"><span class="secno">8. </span>Glossary</h2>
|
|
|
|
<dl>
|
|
|
|
<dt><a id="g-hiragana"><strong><span lang="ja">Hiragana</span></strong></a>
|
|
|
|
<dd>Japanese syllabic script, or character of that script. Rounded and cursive
|
|
in appearance. Subset of the Japanese writing system, used together with kanji
|
|
and katakana. In recent times, mostly used to write Japanese words when kanji
|
|
are not available or appropriate, and word endings and particles. Also see <a href="#g-katakana"><span lang="ja">
|
|
Katakana</span></a>.
|
|
|
|
<dt><a id="g-ideogram"><strong>Ideograph</strong></a>
|
|
|
|
<dd>A character that is used to represent an idea, word, or word component,
|
|
in contrast to a character from an alphabetic or syllabic script. The most
|
|
well-known ideographic script is used (with some variation) in East Asia
|
|
(China, Japan, Korea,...).
|
|
|
|
<dt><a id="g-kana"><strong><span lang="ja">Kana</span></strong></a>
|
|
|
|
<dd>Collective term for hiragana and katakana.
|
|
|
|
<dt><a id="g-katakana"><strong><span lang="ja">Katakana</span></strong></a>
|
|
|
|
<dd>Subset of the Japanese writing system consisting of phonetic characters
|
|
used to represent Roman words. Also see <a href="#g-hiragana"><span
|
|
lang="ja">Hiragana</span></a>.
|
|
|
|
<dt><a id="g-ruby"><strong>Ruby</strong></a>
|
|
|
|
<dd>A run of text that appears in the vicinity of another run of text and
|
|
serves as an annotation or a pronunciation guide for that text.
|
|
|
|
</dl>
|
|
|
|
<p>
|
|
|
|
<hr>
|
|
|
|
<h2 class="no-num" id="BaselineUsage">Appendix A: Usage of baseline alignment
|
|
(informative)</h2>
|
|
|
|
<p>The following appendix shows some examples of baseline alignment,
|
|
exercising the related properties .
|
|
|
|
<p>A simple example of alignment is shown in the following figure. The figure
|
|
shows the presentation of two inline elements, one inside the other. These
|
|
inline elements make up the content of a line in a block where the
|
|
writing-mode is "lr-tb" and the font is "Helvetica". The structure of the
|
|
example is as follows:
|
|
|
|
<pre><p><span class="outer">Apex <span class="inner">Top</span></span></p></pre>
|
|
|
|
<p>with the style being defined as:
|
|
|
|
<pre>p { writing-mode: lr-tb; font: Helvetica; }
|
|
span { alignment-baseline: use-script; }</pre>
|
|
|
|
<p>The other baseline alignment initial values apply. Since a horizontal
|
|
writing-mode is in use, the dominant-baseline-identifier is set to
|
|
"alphabetic" and the baseline-table is taken from the nominal-font for the
|
|
block in which the line appears, which, in this case, is Helvetica.
|
|
|
|
<p>In the figure, the positions of the baselines relative to the current font
|
|
size are shown as red (staff) lines. These lines are labeled with
|
|
abbreviations of the names of the baselines (e.g., TBE for
|
|
"text-before-edge"). The baseline identified by the
|
|
dominant-baseline-identifier (A) is shown in blue. There is a break in the
|
|
staff lines to separately show the inner inline element. This is not
|
|
necessary for this example, but this distinction will become important in
|
|
subsequent examples.
|
|
|
|
<p>The "alignment-baseline" property is the primary control on the
|
|
positioning of an inner element with respect to its parent. The initial value
|
|
of the "alignment-baseline" property is "baseline". This aligns the
|
|
dominant-baseline of the inner inline element with the dominant baseline of
|
|
the outer inline element. This is shown by the short blue line that connects
|
|
the two separated staffs (A) in the figure.
|
|
|
|
<p>The glyphs that are in the content of the two elements are aligned based
|
|
on the script to which the glyph belongs. Since this example only has Latin
|
|
glyphs, they are aligned to the "alphabetic" baseline.
|
|
|
|
<div class="figure">
|
|
<p><img alt="alphabetic baseline" height="98" src="AlignIntro-1.gif"
|
|
width="385">
|
|
|
|
<p>An inner inline element containing Latin characters aligned to an outer
|
|
inline element also containing Latin characters.
|
|
</div>
|
|
|
|
<p>In the next figure, the content of the inner inline element is in
|
|
Gurmukhi, the script of the Punjabi language. The Gurmukhi syllables are read
|
|
as "guru". Rather than use Unicode values for these characters, they are
|
|
symbolized by placing the Latin transliteration in italic type. The structure
|
|
of the example becomes (assuming the same style):
|
|
|
|
<pre><p><span class="outer">Apex <span class="inner"><i>guru</i></span></span></p></pre>
|
|
|
|
<p>The only change from the previous example is that the glyphs of the
|
|
Gurmukhi script are aligned to the "hanging" baseline of the inner inline
|
|
element. The alignment of that element itself, with respect to the outer
|
|
inline element, is unchanged. The "hanging" baseline position is computed
|
|
from the font-table part of the dominant-baseline set of the parent element
|
|
(in this case the outer inline element which is getting itself the set from
|
|
its parent, the block element).
|
|
|
|
<div class="figure">
|
|
<p><img alt="alphabetic alignment" height="98" src="AlignIntro-2.gif"
|
|
width="387">
|
|
|
|
<p>An inner inline element containing Gurmukhi characters aligned to an outer
|
|
inline element containing Latin characters.
|
|
</div>
|
|
|
|
<p>In the next figure, fragments of the text of the previous examples make up
|
|
the content of the outer inline element. The inner inline element has a
|
|
change of font-size, however. The structure is:
|
|
|
|
<pre><p><span class="outer">Ap<i>guru</i> <span class="inner">Ex<i>ji</i></span></span></p></pre>
|
|
|
|
<p>with the following style:
|
|
|
|
<pre>p { writing-mode: lr-tb; font: Helvetica; }
|
|
span { alignment-baseline: use-script; }
|
|
span.inner { font-size: .75em; }</pre>
|
|
|
|
<p>In this example, the alignment of the inner inline element itself does not
|
|
change, nor does the alignment of the smaller glyphs inside the inner
|
|
element. The Latin glyphs are still aligned to the "alphabetic" baseline and
|
|
the Gurmukhi glyphs, which are pronounced "ji" are aligned to the "hanging"
|
|
baseline. Note also that just changing the "font-size" property did not
|
|
change the baseline-table in effect in the inner inline element.
|
|
|
|
<div class="figure">
|
|
<p><img alt="baselines and font size" height="98" src="AlignIntroB-2FS.gif"
|
|
width="391">
|
|
|
|
<p>The inner inline element has a reduced font-size.
|
|
</div>
|
|
|
|
<p>The next figure is equivalent to the previous example with the Gurmukhi
|
|
character replaced by ideographic characters. These are aligned to the
|
|
"ideographic" baseline.
|
|
|
|
<div class="figure">
|
|
<p><img alt="baselines and font size" height="98" src="AlignIntroB-4FS.gif"
|
|
width="391">
|
|
|
|
<p>The previous figure redone with ideographic glyphs instead of Gurmukhi
|
|
glyphs. The EM boxes are shown for the ideograms to clarify the alignment of
|
|
these glyphs.
|
|
</div>
|
|
|
|
<p>To change the scaling of the lines of the baseline table, it is necessary
|
|
to use the "dominant-baseline" property on the inner inline element. The
|
|
value of "reset-size" causes the baseline-table font-size to be reset from
|
|
the font-size of the element on which the "dominant-baseline" property
|
|
appears. The next figure shows the effect of this, using the structure:
|
|
|
|
<pre><p><span class="outer">Ap<i>guru</i> <span class="inner">Ex<i>ji</i></span></span></p></pre>
|
|
|
|
<p>with the following style:
|
|
|
|
<pre>p { writing-mode: lr-tb; font: Helvetica; }
|
|
span { alignment-baseline: use-script; }
|
|
span.inner { font-size: .75em; dominant-baseline: reset-size; }</pre>
|
|
|
|
<p>The alignment of the inner inline element, with respect to the outer
|
|
inline element, is still determined by aligning the dominant baselines
|
|
(alphabetic). But, the baseline-table of the inner inline element has been
|
|
rescaled to the font-size of the inner inline element. Hence the smaller
|
|
glyphs align with each other.
|
|
|
|
<div class="figure">
|
|
<p><img alt="baseline tables" height="98" src="AlignIntroB-3RS.gif"
|
|
width="351">
|
|
|
|
<p>The baseline-table of the inner inline element has been resized to match
|
|
the font-size of the inner inline element.
|
|
</div>
|
|
|
|
<p>But, what if it is more important that the small Gurmukhi glyphs align
|
|
with the large Gurmukhi glyphs than having the Latin glyphs align. There are
|
|
at least two ways to achieve this. The structure:
|
|
|
|
<pre><p><span class="outer">Ap<i>guru</i> <span class="inner">Ex<i>ji</i></span></span></p></pre>
|
|
|
|
<p>with the following style:
|
|
|
|
<pre>p { writing-mode: lr-tb; font: Helvetica; }
|
|
span { alignment-baseline: use-script; }
|
|
span.outer {dominant-baseline: hanging }
|
|
span.inner { font-size: .75em; dominant-baseline: reset-size; }</pre>
|
|
|
|
<p>is illustrated in the next figure. The "hanging" baseline becomes the
|
|
dominant baseline and the initial value of the "alignment-baseline" property
|
|
causes the (newly) dominant "hanging" baselines to be aligned as is shown by
|
|
the connection of the blue baselines.
|
|
|
|
<div class="figure">
|
|
<p><img alt="dominant baseline" height="98" src="AlignIntroB-3DH.gif"
|
|
width="351">
|
|
|
|
<p>Changing the dominant baseline to the "hanging" baseline causes the inner
|
|
inline element to be aligned on its parent's "hanging" baseline.
|
|
</div>
|
|
|
|
<p>It is also possible to achieve the effect of the above figure without
|
|
changing the dominant baseline. Instead it is sufficient to explicitly
|
|
specify that the inner inline element is aligned on its "hanging" baseline.
|
|
This is done by:
|
|
|
|
<pre><p><span class="outer">Ap<i>guru</i> <span class="inner">Ex<i>ji</i></span></span></p></pre>
|
|
|
|
<p>with the following style:
|
|
|
|
<pre>p { writing-mode: lr-tb; font: Helvetica; }
|
|
span { alignment-baseline: use-script; }
|
|
span.inner { font-size: .75em; dominant-baseline: reset-size; alignment-baseline: hanging; }</pre>
|
|
|
|
<p>The only change this approach would make in the above figure is to color
|
|
the "hanging" baseline red and keep the "alphabetic" baseline as the (blue)
|
|
dominant baseline. This baseline in the inner inline element would not (as it
|
|
does not in the above figure) align with the "alphabetic" baseline in the
|
|
outer inline element.
|
|
|
|
<p>Another baseline alignment property is the "baseline-shift" property. Like
|
|
the properties other than the "dominant-baseline" property, this property
|
|
does not change the baseline-table or the baseline-table font-size. It does
|
|
shift the whole baseline table of the parent element so that when an inner
|
|
inline element is aligned to one of the parents baselines, the position of
|
|
the inner inline element is shifted. This is illustrated in the next figure.
|
|
The structure which creates this figure is:
|
|
|
|
<pre><p><span class="outer">Apex <span class="inner">1<i>ji</i></span></span></p></pre>
|
|
|
|
<p>with the following style:
|
|
|
|
<pre>p { writing-mode: lr-tb; font: Helvetica; }
|
|
span { alignment-baseline: use-script; }
|
|
span.inner { baseline-shift: super; }</pre>
|
|
|
|
<p>Because the whole set of baseline-table staff lines are shifted to the
|
|
position of the superscript baseline: it does not matter to which baseline
|
|
the glyphs in the superscript are aligned. The European number "1" is aligned
|
|
to the "alphabetic" baseline and the Gurmukhi syllable "ji" is aligned to the
|
|
"hanging" baseline.
|
|
|
|
<div class="figure">
|
|
<p><img alt="baseline shift" height="120" src="AlignIntroB-5.gif"
|
|
width="385">
|
|
|
|
<p>Using a "baseline-shift" for a superscript (or a subscript).
|
|
</div>
|
|
|
|
<p>It is more common for the font-size of the superscript text to be smaller
|
|
than the font-size of the text to which it is appended. Consider:
|
|
|
|
<pre><p><span class="outer">Apex <span class="inner">1<i>ji</i></span></span></p></pre>
|
|
|
|
<p>with the following style:
|
|
|
|
<pre>p { writing-mode: lr-tb; font: Helvetica; }
|
|
span { alignment-baseline: use-script; }
|
|
span.inner { baseline-shift: super; font-size: .75em; }</pre>
|
|
|
|
<p>Because changing the font-size on a superscript (or subscript) is common,
|
|
this is the one case where changing the font-size does cause the
|
|
baseline-table font-size to be reset when the "dominant-baseline" property
|
|
has its initial value. After the rescaling, the default alignment to the
|
|
dominant baseline positions the inline element for the superscript to the
|
|
dominant baseline position in the shifted baseline-table of the parent
|
|
element.
|
|
|
|
<div class="figure">
|
|
<p><img alt="baseline shift" height="114" src="AlignIntroB-5FS.gif"
|
|
width="372">
|
|
|
|
<p>Reducing the font-size of the superscript automatically resets the
|
|
baseline-table size so that mixed languages in the superscript stay mutually
|
|
aligned.
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h2 class="no-num" id="ack">Acknowledgments</h2>
|
|
|
|
<p>In additions to the authors, this specification would not have been possible without the help from:
|
|
|
|
<p>Stephen Deach, Sujal Parikh, Grzegorz Zygmunt, Chris Wilson, David M Brown.
|
|
|
|
<p>
|
|
|
|
<hr>
|
|
|
|
<h2 class="no-num" id="ref">References</h2>
|
|
|
|
<h3 class="no-num" id="normative">Normative references</h3>
|
|
<!--begin-include "normative.inc"-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class="bibliography">
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
</dl>
|
|
<!--end-include-->
|
|
|
|
<h3 class="no-num" id="other">Other references</h3>
|
|
<!--begin-include "informative.inc"-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class="bibliography">
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id="CSS2">[CSS2]
|
|
|
|
<dd>Bert Bos; Håkon Wium Lie; Chris Lilley; Ian Jacobs. <cite>Cascading Style
|
|
Sheets, level 2.</cite> 1998. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/REC-CSS2">http://www.w3.org/TR/REC-CSS2</a>
|
|
<!---->
|
|
|
|
<dt id="CSS3-background">[CSS3-background]
|
|
|
|
<dd>Tim Boland; Bert Bos. <cite>CSS3 module: backgrounds.</cite> 19 February
|
|
2002. W3C working draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2002/WD-css3-background-20020219">http://www.w3.org/TR/2002/WD-css3-background-20020219</a>
|
|
<!---->
|
|
|
|
<dt id="CSS3-color">[CSS3-color]
|
|
|
|
<dd>Tantek Çelik; Chris Lilley. <cite>CSS3 module: color.</cite> 5 March
|
|
2001. W3C working draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2001/WD-css3-color-20010305">http://www.w3.org/TR/2001/WD-css3-color-20010305</a>
|
|
<!---->
|
|
|
|
<dt id="CSS3-fonts">[CSS3-fonts]
|
|
|
|
<dd>Michel Suignard; Chris Lilley. <cite>CSS3 module: fonts.</cite> 31 July
|
|
2001. W3C working draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2001/WD-css3-fonts-20010731">http://www.w3.org/TR/2001/WD-css3-fonts-20010731</a>
|
|
<!---->
|
|
|
|
<dt id="HTML40">[HTML40]
|
|
|
|
<dd>Raggett, D.; Le Hors, A.; Jacobs, I.. <cite>HTML 4.0 Specification
|
|
(revised).</cite> Apr 1998. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1998/REC-html40-19980424">http://www.w3.org/TR/1998/REC-html40-19980424</a>
|
|
<!---->
|
|
|
|
<dt id="HTML401">[HTML401]
|
|
|
|
<dd>Raggett, D.; Le Hors, A.; Jacobs, I.. <cite>HTML 4.01
|
|
Specification.</cite> Dec 1999. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
|
|
<!---->
|
|
|
|
<dt id="ISO15924">[ISO15924]
|
|
|
|
<dd><cite>Code for the representation of names of scripts.</cite>
|
|
International Organization for Standardization.. 1998. ISO 15924:1998. Draft
|
|
International Standard
|
|
<!---->
|
|
|
|
<dt id="RFC2119">[RFC2119]
|
|
|
|
<dd>S. Bradner. <cite>Key words for use in RFCs to Indicate Requirement
|
|
Levels.</cite> Internet RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
<!---->
|
|
|
|
<dt id="SVG1.0">[SVG1.0]
|
|
|
|
<dd>Various. <cite>Scalable Vector Graphics (SVG) 1.0 Specification.</cite>
|
|
Sep 2001. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2001/REC-SVG-20010904">http://www.w3.org/TR/2001/REC-SVG-20010904</a>
|
|
<!---->
|
|
|
|
<dt id="UNICODE">[UNICODE]
|
|
|
|
<dd>The Unicode Consortium. <cite>The Unicode Standard: Version 3.1.0.</cite>
|
|
Addison Wesley Longman. 2000. ISBN 0-201-61633-5. The latest version of
|
|
Unicode. For more information, consult the Unicode Consortium's home page at
|
|
<a
|
|
href="http://www.unicode.org/">http://www.unicode.org/</a>
|
|
URL: <a
|
|
href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html#Unicode_3_1_0">http://www.unicode.org/unicode/standard/versions/enumeratedversions.html#Unicode_3_1_0</a>
|
|
<!---->
|
|
|
|
<dt id="UTR-24">[UTR-24]
|
|
|
|
<dd>Mark Davis. <cite>Script Names.</cite> 27 September 2001. Unicode
|
|
Technical Report #24. URL: <a
|
|
href="http://www.unicode.org/unicode/reports/tr24/tr24-3.html">http://www.unicode.org/unicode/reports/tr24/tr24-3.html</a>
|
|
<!---->
|
|
|
|
<dt id="XHTML1.0">[XHTML1.0]
|
|
|
|
<dd>Steven Pemberton; et al. <cite>XHTML 1.0: The Extensible HyperText Markup
|
|
Language.</cite> Jan 2000. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2000/REC-xhtml1-20000126">http://www.w3.org/TR/2000/REC-xhtml1-20000126</a>
|
|
<!---->
|
|
|
|
<dt id="XHTMLMOD">[XHTMLMOD]
|
|
|
|
<dd>Adams, Robert; Altheim, Murray; et al. <cite>Modularization of
|
|
XHTML.</cite> Apr 2001. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410">http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410</a>
|
|
<!---->
|
|
|
|
<dt id="XML1.0">[XML1.0]
|
|
|
|
<dd>Tim Bray; Jean Paoli; C. M. Sperberg-McQueen; Eve Maler. <cite>Extensible
|
|
Markup Language (XML) 1.0 (Second Edition).</cite> Oct 2000. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2000/REC-xml-20001006">http://www.w3.org/TR/2000/REC-xml-20001006</a>
|
|
<!---->
|
|
|
|
<dt id="XSL1.0">[XSL1.0]
|
|
|
|
<dd>Adler, Sharon; Berglund, Anders; et al. <cite>Extensible Stylesheet
|
|
Language (XSL) Version 1.0.</cite> Oct 2001. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2001/REC-xsl-20011015">http://www.w3.org/TR/2001/REC-xsl-20011015</a>
|
|
<!---->
|
|
</dl>
|
|
<!--end-include-->
|
|
|
|
<hr>
|
|
|
|
<h2 class="no-num" id="changes">Changes from Previous Working Draft</h2>
|
|
|
|
<p>New draft, but with a large piece taken out from former versions of CSS3 text
|
|
and CSS2</p>
|
|
</body>
|
|
</html>
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-declaration:"~/SGML/HTML4.decl"
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
sgml-nofill-elements:("pre" "style" "br")
|
|
End:
|
|
-->
|