Skip to content

Commit b71e574

Browse files
author
dauwhe
committed
[css-inline] clean up links to CSS values
1 parent 97fb2b6 commit b71e574

2 files changed

Lines changed: 65 additions & 96 deletions

File tree

css-inline/Overview.bs

Lines changed: 32 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Editor: Elika J. Etemad, Invited Expert, http://fantasai.inkedblade.net/contact
1919
Editor: Steve Zilles, Adobe, szilles@adobe.com
2020
Abstract: The CSS formatting model provides for a flow of elements and text inside of a container to be wrapped into lines. The formatting of elements and text within a line, its positioning in the inline progression direction, and the breaking of lines are described in [[CSS3TEXT]]. This module describes the positioning in the block progression direction both of elements and text within lines and of the lines themselves. This positioning is often relative to a baseline. It also describes special features for formatting of first lines and drop caps. It extends on the model in [[CSS2]].
2121
Ignored Terms: guru, ji, line-height-shift-adjustment, text-script, after, before
22+
Link Defaults: css-fonts-3 (property) font-family
2223
</pre>
2324

2425
<h2 id="LineBox">Line box, Line stacking and Content height</h2>
@@ -54,13 +55,11 @@ the boxes that form a line is called a <dfn id="line-box">line box</dfn>.
5455
<p>The inline-progression dimension ('width' in horizontal flow) of a line box is
5556
determined by its containing block. The block-progression dimension ('height' in
5657
horizontal flow) of a line box is determined by the rules given
57-
in the section on
58-
<a href="#line-height">line height
59-
calculations</a>. A line box is generally tall (relative) enough for all of the boxes it
58+
in the section on line height calculations. A line box is generally tall (relative) enough for all of the boxes it
6059
contains. However, it may be taller than the tallest box it contains (if, for
6160
example, boxes are aligned so that baselines line up). The alignment of boxes
6261
within a line box is determined by the
63-
<a href="#baseline">baseline alignment</a> properties.</p>
62+
<a href="#baseline-alignment">baseline alignment</a> properties.</p>
6463
<p>In general, when several inline boxes cannot fit within a single line box,
6564
they are distributed among two or more block-progression stacked line boxes. The
6665
exact wrapping of inline boxes at the line ending edge is determined by several
@@ -327,12 +326,9 @@ value of the line-height property: ''none''.</p>
327326
<td><em>Value:</em>
328327

329328
<td>normal |
330-
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-number">
331-
<span class="value-inst-number">&lt;number&gt;</span></a> |
332-
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-length">
333-
<span class="value-inst-length">&lt;length&gt;</span></a> |
334-
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-percentage">
335-
<span class="value-inst-percentage">&lt;percentage&gt;</span></a> | none
329+
<<number>> |
330+
<<length>> |
331+
<<percentage>> | none
336332

337333
<tr>
338334
<td><em>Initial:</em>
@@ -365,29 +361,21 @@ href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
365361
<dd>Tells user agents to set the
366362
<a href="http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value">computed
367363
value</a> to a &quot;reasonable&quot; value based on the font size of the element. The
368-
value has the same meaning as <span class="index-inst" title="&lt;number&gt;">
369-
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-number" name="x18">
370-
<span class="value-inst-number">&lt;number&gt;</span></a></span>. We recommend a
364+
value has the same meaning as <<number>>. We recommend a
371365
computed value for ''normal'' between 1.0 to 1.2. The user agent may allow the
372366
&lt;number&gt; to vary depending on the metrics of the font(s) being used.</dd>
373-
<dt><span class="index-inst" title="&lt;length&gt;">
374-
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-length" name="x19">
375-
<span class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
367+
<dt><<length>>
376368
</dt>
377369
<dd>The box height is set to this length. Negative values are illegal. The
378370
length is the computed value.</dd>
379-
<dt><span class="index-inst" title="&lt;number&gt;">
380-
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-number" name="x20">
381-
<span class="value-inst-number"><strong>&lt;number&gt;</strong></span></a></span>
371+
<dt><<number>>
382372
</dt>
383373
<dd>The <a href="http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value">
384374
computed value</a> of the property is this number multiplied by the element's
385375
font size. Negative values are illegal. However, the number, not the
386376
<a href="http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value">computed
387377
value</a>, is inherited. </dd>
388-
<dt><span class="index-inst" title="&lt;percentage&gt;">
389-
<a class="noxref" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-percentage" name="x21">
390-
<span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
378+
<dt><<percentage>>
391379
</dt>
392380
<dd>The <a href="http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value">
393381
computed value</a> of the property is this percentage multiplied by the
@@ -505,7 +493,7 @@ glyphs in the line box must fit within the line box.</dd>
505493

506494
<dt>replaced
507495

508-
<dd>The margin box of all <span title="replaced element"><a href="#replaced">replaced elements</a></span> within the line
496+
<dd>The margin box of all <span title="replaced element">replaced elements</span> within the line
509497
must fit within the line box.
510498

511499
<dt>inline-box
@@ -535,7 +523,7 @@ line of LI elements, the last line of LI, DD, and DT elements, and issues
535523
concerning whitespace around images. [DB]
536524

537525
<p>The height of each line box is established as follows (we describe the
538-
case for <em><a href="#horizontal">horizontal flow</a></em>, but vertical
526+
case for <em>horizontal flow</em>, but vertical
539527
flow is analogous). First align all the boxes on the line relative to each
540528
other according to the rules for 'vertical-align'. The line box must satisfy all of
541529
the following constraints:
@@ -567,7 +555,7 @@ elements).
567555
<li>If the enclosing block for this line has
568556
''block'' in 'line-box-contain', then the top of the line box
569557
must be at least as high as the text top plus the half-leading of an
570-
<em><a href="#anonymous">anonymous inline element</a></em> and the bottom of
558+
<em>anonymous inline element</em> and the bottom of
571559
the line box as low as the text bottom plus the half leading. This must hold
572560
whether or not this line actually contains such an element.
573561
</ol>
@@ -844,7 +832,7 @@ href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
844832

845833
<p>Baseline alignment describes the alignment of textual content and based on
846834
information contained in&nbsp; font tables associated with font resources.
847-
Additional descriptions for these font tables are provided in thea href="http://www.w3.org/Style/Group/css3-src/css3-fonts/Overview.html">CSS3
835+
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
848836
Fonts module</a>.
849837

850838
<h3 id="FontBaseline">Baseline information
@@ -1222,7 +1210,7 @@ multiplying the design-space coordinate values by the baseline-table
12221210
font-size.
12231211
</ol>
12241212

1225-
<p>Because the value of thea href="/TR/REC-CSS2/fonts.html#font-family-prop">'font-family'</a> property is a list of fonts, to
1213+
<p>Because the value of the 'font-family' property is a list of fonts, to
12261214
insure a consistent choice of baseline-table we define the <em>nominal
12271215
font</em> in a font list as the first font in the list for which a glyph data
12281216
is available. This is the first that could contain a glyph for each character
@@ -1251,7 +1239,7 @@ the baselines the font knows about. In particular, it has the offset from the
12511239
glyph's (0,0) point to the baseline identified by the 'alignment-baseline'.
12521240

12531241
<p>The offset values in the baseline-table are in "design units" which means
1254-
fractional units of the EM. CSS calls thesea href="/TR/REC-CSS2/fonts.html#descdef-units-per-em">"units-per-em"</a>. Thus,
1242+
fractional units of the EM. CSS calls these <a href="/TR/REC-CSS2/fonts.html#descdef-units-per-em">"units-per-em"</a>. Thus,
12551243
the current 'font-size' is used to determine the actual
12561244
offset from the dominant baseline to the alternate baselines.
12571245

@@ -1401,7 +1389,7 @@ baseline-table font-size remain the same as that of the parent.
14011389
<dt><span class="attr-value">reset-size</span>
14021390

14031391
<dd>The dominant baseline-identifier and the baseline table remain the same,
1404-
but the baseline-table font-size is changed to the value of thea href="/TR/REC-CSS2/fonts.html#font-size-props">'font-size'</a> property on this element. This
1392+
but the baseline-table font-size is changed to the value of the <a href="/TR/REC-CSS2/fonts.html#font-size-props">'font-size'</a> property on this element. This
14051393
re-scales the baseline table for the current 'font-size'.
14061394

14071395
<dt><span class="attr-value">alphabetic</span>
@@ -1643,7 +1631,7 @@ alignment point: the 'alignment-adjust' property</h3>
16431631

16441632
<td>auto | baseline | over-edge | text-over-edge | middle | central |
16451633
under-edge | text-under-edge | ideographic | alphabetic | hanging |
1646-
mathematical | <a href="/TR/REC-CSS2/syndata.html#percentage-units">&lt;percentage&gt;</a> | <a href="/TR/REC-CSS2/syndata.html#length-units">&lt;length&gt;</a>
1634+
mathematical | <<percentage>> | <<length>>
16471635

16481636
<tr>
16491637
<td><em>Initial:</em>
@@ -1799,7 +1787,7 @@ the dominant baseline: the 'baseline-shift' property</h3>
17991787
<tr>
18001788
<td><em>Value:</em>
18011789

1802-
<td>baseline | sub | super | <a href="/TR/REC-CSS2/syndata.html#percentage-units">&lt;percentage&gt;</a> | <a href="/TR/REC-CSS2/syndata.html#length-units">&lt;length&gt;</a>
1790+
<td>baseline | sub | super | <<percentage>> | <<length>>
18031791

18041792
<tr>
18051793
<td><em>Initial:</em>
@@ -1914,7 +1902,7 @@ alignment property</h3>
19141902
<td><em>Value:</em>
19151903

19161904
<td>auto | baseline | sub | super | top | text-top | central |
1917-
middle | bottom | text-bottom | <a href="/TR/REC-CSS2/syndata.html#percentage-units">&lt;percentage&gt;</a> | <a href="/TR/REC-CSS2/syndata.html#length-units">&lt;length&gt;</a>
1905+
middle | bottom | text-bottom | <<percentage>> | <<length>>
19181906

19191907
<tr>
19201908
<td><em>Initial:</em>
@@ -1954,7 +1942,7 @@ have no effect if no such parent exists.
19541942

19551943
<div class="note">
19561944
<p><em><strong>Note.</strong> Values of this property have slightly different
1957-
meanings in the context of tables. Please consult the section ona href="/TR/REC-CSS2/tables.html#height-layout">table height algorithms</a> for
1945+
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
19581946
details.</em>
19591947
</div>
19601948

@@ -2008,16 +1996,13 @@ font.
20081996
<dd>Align the bottom of the box with the under-edge of the parent element's
20091997
font.
20101998

2011-
<dt><span class="index-inst" id="ltpercentagegt"
2012-
title="&lt;percentage&gt;"><a class="noxref"
2013-
href="/TR/REC-CSS2/syndata.html#value-def-percentage" name="x23"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
1999+
<dt><<percentage>>
20142000

20152001
<dd>Raise (positive value) or lower (negative value) the box by this distance
20162002
(a percentage of the computed 'line-height' of the element). The
20172003
value ''0%'' means the same as ''baseline''.
20182004

2019-
<dt><span class="index-inst" id="ltlengthgt" title="&lt;length&gt;"><a class="noxref" href="/TR/REC-CSS2/syndata.html#value-def-length"
2020-
name="x24"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
2005+
<dt><<length>>
20212006

20222007
<dd>Raise (positive value) or lower (negative value) the box by this
20232008
distance. The value ''0cm'' means the same as ''baseline''.
@@ -2184,7 +2169,7 @@ alignment: the 'inline-box-align' property</h3>
21842169
<tr>
21852170
<td><em>Value:</em>
21862171

2187-
<td>initial | last | <a href="/TR/REC-CSS2/syndata.html#percentage-units">&lt;integer&gt;</a>
2172+
<td>initial | last | <<integer>>
21882173

21892174
<tr>
21902175
<td><em>Initial:</em>
@@ -2531,7 +2516,7 @@ Text should be excluded around the glyph bounding boxes of the initial letters:
25312516

25322517
<h3 id="initial-letter-paragraphs">Interactions of initial letters with surrounding paragraphs</h3>
25332518

2534-
<h4>Raised and sunken caps</h4>
2519+
<h4 id="raised-sunken-caps">Raised and sunken caps</h4>
25352520

25362521
An initial letter does not affect the position of its containing element. For “raised caps” or “sunken caps,” the effect is created as if the text around the initial letter was pushed down, rather than the letter extending up into previous elements.
25372522

@@ -2542,7 +2527,7 @@ An initial letter does not affect the position of its containing element. For
25422527
</figure>
25432528

25442529

2545-
<h4>Short paragraphs with initial letters</h4>
2530+
<h4 id="short-para-initial-letter">Short paragraphs with initial letters</h4>
25462531

25472532
A paragraph with an initial letter may have fewer lines of text than the initial letter occupies. The initial letter acts as if it is a float, and the subsequent para may wrap around it.
25482533

@@ -2615,9 +2600,9 @@ elsewhere:</p>
26152600
<tr>
26162601
<td>'line-height'
26172602

2618-
<td>normal | &lt;number&gt; | <a class="noxref"
2619-
href="/TR/REC-CSS2/syndata.html#value-def-length"><span class="value-inst-length">&lt;length&gt;</span></a> | <a class="noxref"
2620-
href="/TR/REC-CSS2/syndata.html#value-def-percentage"><span class="value-inst-percentage">&lt;percentage&gt;</span></a><td>normal
2603+
<td>normal | &lt;number&gt; | <<length>>| <<percentage>>
2604+
2605+
<td>normal
26212606

26222607
<td> all elements
26232608

@@ -2629,7 +2614,7 @@ href="/TR/REC-CSS2/syndata.html#value-def-percentage"><span class="value-inst-pe
26292614
<td>'vertical-align'
26302615

26312616
<td>baseline | sub | super | top | text-top | middle | bottom | text-bottom |
2632-
<a href="/TR/REC-CSS2/syndata.html#percentage-units">&lt;percentage&gt;</a>
2617+
<<percentage>>
26332618

26342619
<td>baseline
26352620

@@ -2672,9 +2657,7 @@ applies to table-cell elements.
26722657
<tr>
26732658
<td>'line-height'
26742659

2675-
<td>normal | &lt;number&gt; | <a class="noxref"
2676-
href="/TR/REC-CSS2/syndata.html#value-def-length"><span class="value-inst-length">&lt;length&gt;</span></a> | <a class="noxref"
2677-
href="/TR/REC-CSS2/syndata.html#value-def-percentage"><span class="value-inst-percentage">&lt;percentage&gt;</span></a><td>normal
2660+
<td>normal | &lt;number&gt; | <<length>>| <<percentage>> <td>normal
26782661

26792662
<td> all elements and generated content<td>yes
26802663

@@ -2686,7 +2669,7 @@ href="/TR/REC-CSS2/syndata.html#value-def-percentage"><span class="value-inst-pe
26862669
<td>'vertical-align'
26872670

26882671
<td>baseline | sub | super | top | text-top | central | middle | bottom |
2689-
text-bottom |<a href="/TR/REC-CSS2/syndata.html#percentage-units">&lt;percentage&gt;</a> | <a href="/TR/REC-CSS2/syndata.html#length-units">&lt;length&gt;</a> | inherit
2672+
text-bottom | &lt;percentage&gt; | &lt;length&gt; | inherit
26902673

26912674
<td>baseline
26922675

0 commit comments

Comments
 (0)