Skip to content

Commit 107993a

Browse files
fantasaifantasai
committed
[css-inline] Draft vertical-align stuff imported from SVG.
1 parent 9e6bffb commit 107993a

File tree

2 files changed

+1381
-300
lines changed

2 files changed

+1381
-300
lines changed

‎css-inline/Overview.bs

+199-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,205 @@ Link Defaults: css-fonts-3 (property) font-family
2828

2929
<p class="issue">This section is being rewritten. Refer to <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">section 10.8</a> of [[CSS21]] for the normative CSS definition or the <a href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515/">2002 Working Draft</a> if you want pretty pictures. (But ignore the old text, half of it's wrong. We're not specifying which half, that's to be determined.)</p>
3030

31-
31+
<h3 id="dominant-baseline property">
32+
Dominant Baselines: the 'dominant-baseline' property</h3>
33+
34+
<pre class="propdef">
35+
Name: dominant-baseline
36+
Value: auto | text-bottom | alphabetic | central | mathematical | hanging | text-top
37+
Initial: normal
38+
Applies to: block containers and inline boxes
39+
Inherited: yes
40+
Percentages: N/A
41+
Media: visual
42+
Computed value: as specified
43+
</pre>
44+
45+
This property specifies the <dfn>dominant baseline</dfn>,
46+
which is the baseline used to align the box's text and inline-level contents.
47+
Values have the following meanings:
48+
49+
<dl dfn-for=dominant-baseline dfn-type=value>
50+
<dt><dfn>auto</dfn>
51+
<dd>
52+
Equivalent to ''dominant-baseline/alphabetic'' in <i>horizontal writing modes</i>
53+
and in <i>vertical writing modes</i>
54+
when 'text-orientation' is ''sideways'', ''sideways-right'', or ''sideways-left''.
55+
equivalent to ''dominant-baseline/central'' in <i>vertical writing modes</i>
56+
when 'text-orientation' is ''mixed'' or ''upright''.
57+
58+
<dt><dfn>text-bottom</dfn>
59+
<dd>
60+
Use the bottom of the em box as the baseline.
61+
62+
<dt><dfn>alphabetic</dfn>
63+
<dd>
64+
Use the alphabetic baseline.
65+
66+
<dt><dfn>central</dfn>
67+
<dd>
68+
Use the central baseline
69+
(halfway between the ascent and descent).
70+
71+
<dt><dfn>mathematical</dfn>
72+
<dd>
73+
Use the mathematical baseline.
74+
75+
<dt><dfn>hanging</dfn>
76+
<dd>
77+
Use the hanging baseline.
78+
79+
<dt><dfn>text-top</dfn>
80+
<dd>
81+
Use the top of the em box as the baseline.
82+
</dl>
83+
84+
See [[CSS3-WRITING-MODES]] for an introduction to dominant baselines.
85+
86+
Issue: Should be text-over and text-under instead of text-top and text-bottom,
87+
but maybe it's better not to use those terms for consistency with legacy 'vertical-align'.
88+
89+
<h3 id="transverse-alignment">
90+
Transverse Box Alignment: the 'vertical-align' property</h3>
91+
92+
<pre class="propdef">
93+
Name: vertical-align
94+
Value: <<'baseline-shift'>> || <<'alignment-baseline'>>
95+
Initial: baseline
96+
Applies to: inline-level boxes
97+
Inherited: no
98+
Percentages: N/A
99+
Media: visual
100+
Computed value: as specified
101+
</pre>
102+
103+
<p>This shorthand property specifies how an inline-level box is aligned within the line.
104+
Values are the same as for its longhand properties, see below.
105+
106+
<p class="advisement">
107+
Authors should use this property ('vertical-align') instead of its longhands.
108+
109+
<h4 id="alignment-baseline-property">
110+
Alignment Point: 'alignment-baseline' longhand</h4>
111+
112+
<pre class="propdef">
113+
Name: alignment-baseline
114+
Value: baseline | text-bottom | alphabetic | middle | central | mathematical | text-top | bottom | center | top
115+
Initial: baseline
116+
Applies to: inline-level boxes
117+
Inherited: no
118+
Percentages: N/A
119+
Media: visual
120+
Computed value: as specified
121+
</pre>
122+
123+
<p>Specifies what point of an inline-level box is aligned to what point in the parent.
124+
Values are defined below:
125+
126+
For the following definitions, the margin box is used for atomic inlines,
127+
and the leading box for non-replaced inlines:
128+
129+
<dl dfn-for=alignment-baseline dfn-type=value>
130+
<dt><dfn>baseline</dfn>
131+
<dd>
132+
Use the <i>dominant baseline</i> choice of the parent.
133+
Match the box's corresponding baseline to that of its parent.
134+
135+
<dt><dfn>text-bottom</dfn>
136+
<dd>
137+
Match the bottom of the box to the bottom of the parent's content area.
138+
139+
<dt><dfn>alphabetic</dfn>
140+
<dd>
141+
Match the box's alphabetic baseline to that of its parent.
142+
143+
<dt><dfn>middle</dfn>
144+
<dd>
145+
Align the vertical midpoint of the box with
146+
the baseline of the parent box plus half the x-height of the parent.
147+
148+
<dt><dfn>central</dfn>
149+
<dd>
150+
Match the box's central baseline to the central baseline of its parent.
151+
152+
<dt><dfn>mathematical</dfn>
153+
<dd>
154+
Match the box's mathematical baseline to that of its parent.
155+
156+
<dt><dfn>text-top</dfn>
157+
<dd>
158+
Match the top of the box to the top of the parent's content area.
159+
</dl>
160+
161+
For the following definitions, the <i>alignment subtree</i>
162+
is as defined in [[!CSS21]].
163+
164+
<dl dfn-for=alignment-baseline dfn-type=value>
165+
<dt><dfn>top</dfn>
166+
<dd>
167+
Align the top of the aligned subtree with the top of the line box.
168+
169+
<dt><dfn>center</dfn>
170+
<dd>
171+
Align the center of the aligned subtree with the center of the line box.
172+
173+
<dt><dfn>bottom</dfn>
174+
<dd>
175+
Align the bottom of the aligned subtree with the bottom of the line box.
176+
</dl>
177+
178+
Issue: Putting ''alignment-baseline/top'', ''alignment-baseline/center'', and ''alignment-baseline/bottom'' in here is awkward,
179+
because they're not really baselines. :/
180+
181+
SVG implementations <em>may</em> support the following aliases
182+
in order to support legacy content:
183+
<pre dfn-for=alignment-baseline dfn-type=value>
184+
<dfn>before-edge</dfn> | <dfn>text-before-edge</dfn> = ''alignment-baseline/text-top''
185+
<dfn>after-edge</dfn> | <dfn>text-after-edge</dfn> = ''alignment-baseline/text-bottom''
186+
</pre>
187+
These values are not allowed in the 'vertical-align' shorthand.
188+
189+
<h4 id="baseline-shift-property">
190+
Alignment Shift: 'baseline-shift' longhand</h4>
191+
192+
<pre class="propdef">
193+
Name: baseline-shift
194+
Value: baseline | sub | super | <<length>> | <<percentage>>
195+
Initial: baseline
196+
Applies to: inline-level boxes
197+
Inherited: no
198+
Percentages: refer to the used value of 'line-height'
199+
Media: visual
200+
Computed value: as specified
201+
</pre>
202+
203+
<p>This property specifies by how much the box is shifted up
204+
from its alignment point.
205+
It does not apply when 'alignment-baseline' is ''alignment-baseline/top'' or ''alignment-baseline/bottom''.
206+
207+
<p class="advisement">
208+
Authors should use the 'vertical-align' shorthand instead of this property.
209+
210+
Values have the following meanings:
211+
212+
<dl dfn-for="baseline-shift" dfn-type=value>
213+
<dt><dfn>baseline</dfn>
214+
<dd>No shift. Equivalent to ''0''.
215+
216+
<dt><dfn><<length>></dfn>
217+
<dd>Raise (positive value) or lower (negative value) by the specified length.
218+
219+
<dt><dfn><<percentage>></dfn>
220+
<dd>Raise (positive value) or lower (negative value) by the specified percentage of the 'line-height'.
221+
222+
<dt><dfn>sub</dfn>
223+
<dd>Lower by the offset appropriate for subscripts of the parent’s box.
224+
(The UA should use the parent’s font data to find this offset whenever possible.)
225+
226+
<dt><dfn>super</dfn>
227+
<dd>Raise by the offset appropriate for superscripts of the parent’s box.
228+
(The UA should use the parent’s font data to find this offset whenever possible.)
229+
</dl>
32230

33231
<h2 id="initial-letter-styling">
34232
<!--<a name="Initial"></a>-->

0 commit comments

Comments
 (0)