Skip to content

Commit 6de2109

Browse files
author
dauwhe
committed
[css-inline] move examples around, fix various bikeshed errors, improve language
1 parent 6ac81f2 commit 6de2109

2 files changed

Lines changed: 137 additions & 167 deletions

File tree

‎css-inline/Overview.bs‎

Lines changed: 67 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -24,56 +24,45 @@ Link Defaults: css-fonts-3 (property) font-family
2424

2525

2626

27-
<h2>Line Heights and Baseline Alignment</h2>
27+
<h2 id="line-height">Line Heights and Baseline Alignment</h2>
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

3131

3232

33-
<h2 id="Initial">Initial Lines and Initial Letters</h2>
33+
<h2 id="initial-letter-styling">
34+
<!--<a name="Initial"></a>-->
35+
Initial Letters</h2>
3436

35-
36-
37+
<p class="issue">The editors would appreciate any examples of drop initials in non-western scripts, especially Arabic and Indic scripts.</p>
3738

38-
<h3 id="DropInitial">An Introduction to Initial Letters</h3>
39+
<h3 id="initial-letter-intro">
40+
<!--<a name="DropInitial"></a>-->
41+
An Introduction to Initial Letters</h3>
3942

4043
Large, decorative letters have been used to start new sections of text since before the invention of printing. In fact, their use predates lowercase letters entirely.
4144

42-
A <dfn>drop initial</dfn> is a larger-than-usual letter at the start of a paragraph, with a baseline at least one line lower than the first baseline of the paragraph. The size of the drop initial is usually indicated by how many lines it occuppies. Two- and three-line drop initials are very common.
43-
44-
45+
<h4 id="drop-initial">
46+
Drop Initial</h4>
4547

48+
A <dfn>dropped initial</dfn> (or “drop cap”) is a larger-than-usual letter at the start of a paragraph, with a baseline at least one line lower than the first baseline of the paragraph. The size of the drop initial is usually indicated by how many lines it occupies. Two- and three-line drop initials are very common.
4649

4750
<figure>
48-
<img alt="3-line drop cap with E Acute" src="Dropcap-E-acute-3line.png" width="480">
49-
50-
<p class="caption">Three-line drop initial with E acute. Since the cap-height of the drop initial aligns with the cap-height of the main text, the accent extends above the paragraph.</p>
51-
51+
<img alt="3-line drop cap with E Acute" src="Dropcap-E-acute-3line.png" width="480">
52+
<p class="caption">Three-line drop initial with E acute. Since the cap-height of the drop initial aligns with the cap-height of the main text, the accent extends above the paragraph.</p>
5253
</figure>
5354

54-
55-
56-
57-
</div>
58-
5955
The exact size and position of a drop cap depends on the alignment of its glyph. [TK] Reference points on the drop cap must align precisely with reference points in the text. In Western scripts, the top reference points are the cap height of the initial letter and of the first line of text. The bottom reference points are the alphabetic baseline of the initial letter and the baseline of the Nth line of text. <a href="#f2">Figure 2</a> shows a simple two-line drop cap, with the relevant reference lines marked.
6056

6157

6258

6359
<figure id="f2">
64-
<img src="Dropcap-lines.png" width="600" alt="drop cap showing alignment"/>
65-
66-
<p class="caption">Two-line drop cap showing baselines (green lines), cap-height (red line), and ascender (cyan line).</p>
67-
60+
<img src="Dropcap-lines.png" width="600" alt="drop cap showing alignment"/>
61+
<p class="caption">Two-line drop cap showing baselines (green lines), cap-height (red line), and ascender (cyan line).</p>
6862
</figure>
6963

70-
71-
72-
73-
7464
The alignment constraints for drop initials depend on the writing system. In Japanese, the initial letter extends from the <a>block-start</a> edge of the first line to the <a>block-end</a> edge of the Nth line.
7565

76-
7766
<figure>
7867
<img src="Initial-2line-JapaneseVertical六.png" width="480" alt="Japanese Vertical Initial"/>
7968
<p class="caption">Two-line drop initial in vertical writing mode</p>
@@ -86,6 +75,29 @@ The alignment constraints for drop initials depend on the writing system. In Jap
8675

8776
Note: In some cases, the exclusion area for the drop initial is larger than its glyph in order to preserve inline-axis alignment. This effect is out-of-scope for this level. However, extra spacing can still be given using margins.
8877

78+
<h4 id="sunk-initial">
79+
Sunken Initial Letters</h4>
80+
81+
Some styles of drop initials do not align with the first line of text. A <dfn>sunken initial</dfn> (or “sunken cap”) both sinks below the first baseline, and extends above the first line of text.
82+
83+
<figure>
84+
<img src="SunkenCapA.png" width="480" alt="sunken drop initial"/>
85+
<p class="caption">Sunken cap. The letter drops two lines, but is the size of a three-line initial letter.</p>
86+
</figure>
87+
88+
<h4 id="raise-initial">
89+
Raised Initial Letters</h4>
90+
91+
A <dfn>raised initial</dfn> (often called a “raised cap” or “stick-up cap”) “sinks” to the first text baseline. Unlike simply increasing the font size, which affects the line spacing below it to make room for potential descenders, it does not sink below that.
92+
93+
94+
<figure>
95+
<img src="RaisedCap.png" width="480" alt="raised cap"/>
96+
<p class="caption">Raised cap. The initial letter is the size of a 3-line initial, but does not drop.</p>
97+
</figure>
98+
99+
100+
89101

90102
<h3 id="selecting-drop-initials">Selecting Initial Letters</h3>
91103

@@ -104,93 +116,61 @@ Initial letters are typically a single letter, which can be selected by the <cod
104116
::first-letter, /* style first paragraph's T */
105117
img, /* style illuminated H */
106118
span /* drop Words may also */
107-
{ initial-letters: 2; }
119+
{ initial-letter: 2; }
108120
</pre>
109121
</div>
110122

111123
<h3 id="sizing-drop-initials">Creating Initial Letters: the 'initial-letter' property</h3>
112124

113-
This property takes two arguments. The first argument defines the size of the initial letter, in terms of how many lines it occupies. The optional second argument argument defines the number of lines the initial letter should sink. An N-line initial letter sinks to the Nth text baseline. If not specified, it duplicates the first argument.
114-
115125
<pre class="propdef">
116126
Name: <dfn id="propdef-initial-letter">initial-letter</dfn>
117-
Value: normal | [<<integer>> <<integer>>?]
127+
Value: normal | [<<integer>> <<number>>?]
118128
Initial: normal
119-
Applies to: <code>::first-letter</code> pseudo elements and inline level first child of a block container
129+
Applies to: <code>::first-letter</code> pseudo-elements and inline-level first child of a block container
120130
Inherited: no
121131
Percentages: N/A
122132
Media: visual
123-
Computed value: as described
133+
Computed value: as specified
124134
</pre>
125135

136+
This property specifies styling for dropped, raised, and sunken initial letters. It takes the following values:
126137

127-
<div class="example">
128-
129-
<figure>
130-
<img alt="3-line drop cap with C" src="Dropcap-C-3line.png" width="480">
131-
132-
<p class="caption">Three-line drop initial.</p>
133-
134-
</figure>
135-
<pre>
136-
p::first-letter {
137-
initial-letter: 3;
138-
}
139-
</pre>
140-
</div>
141-
142-
143-
144-
145-
146-
147-
Some styles of drop initials do not align with the first line of text. For example, “sunken caps” both sink below the first baseline, and extend above the first line of text. In these cases, the size of the initial cap needs to be defined. The optional second argument of 'initial-letter' specifies the size of an initial letter, as if it were an n-line drop cap.
148-
149-
150-
138+
<dl for=initial-letter>
139+
<dt><dfn>normal</dfn>
140+
<dd>No special initial-letter effect. Text behaves as normal.
141+
<dt><dfn><<number>></dfn>
142+
<dd>This first argument defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed.
143+
<dt><dfn><<integer>></dfn>
144+
<dd>This optional second argument argument defines the number of lines the initial letter should sink. Values must be greater than zero. If omitted, it duplicates the first argument, floored to the nearest positive whole number.
145+
</dl>
151146

152147
<div class="example">
148+
Here are some examples of 'initial-letter' usage:
153149

154-
<figure>
155-
<img src="SunkenCapA.png" width="480" alt="sunken drop initial"/>
156-
<p class="caption">Sunken cap. The letter drops two lines, but is the size of a three-line initial letter.</p>
157-
</figure>
158-
<pre>
159-
160-
p::first-letter {
161-
initial-letter: 3 2;
162-
}
150+
<dl>
151+
<dt>''initial-letter: 3''
152+
<dt>(''initial-letter: 3 3'')
153+
<dd>Represents a <a>dropped initial</a> 3 lines high, 3 lines deep.
163154

164-
</pre>
155+
<dt>''initial-letter: 3 2''
156+
<dd>Represents a <a>sunken initial</a> 3 lines high, 2 lines deep.
165157

158+
<dt>''initial-letter: 3 1''
159+
<dd>Represents a <a>raised initial</a> 3 lines high, 1 line deep.
160+
</dl>
161+
162+
Issue: Add pictures.
166163
</div>
167164

168-
169-
If the second argument is ''1'', that creates a pure raised initial letter (often called “raised cap” or “stick-up cap.” It “sinks” to the first text baseline.
170-
171-
172165
<div class="example">
173-
174-
<figure>
175-
<img src="RaisedCap.png" width="480" alt="raised cap"/>
176-
<p class="caption">Raised cap. The initial letter is the size of a 3-line initial, but does not drop.</p>
177-
</figure>
178-
<pre>
179-
180-
p::first-letter {
181-
initial-letter: 3 1;
182-
}
183-
184-
</pre>
185-
166+
The following code will create a 2-line dropped initial letter at the beginning of each paragraph:
167+
<pre>p::first-letter { initial-letter: 2; }</pre>
186168
</div>
187169

188170

189171

190172

191173

192-
193-
194174
<h3 id="aligning-initial-letter">Alignment of Initial Letters</h3>
195175

196176
As mentioned earlier, the alignment of initial letters depends on the script used. The 'initial-letter-align' property can be used to specify the proper alignment.
@@ -240,7 +220,7 @@ If 'initial-letter' is applied to an image or other atomic element that does not
240220
Issue: Need to decide whether using margin edges or content edges for alignment. Writing Modes uses the margin edges for baseline alignment of replaced elements. There are cases for both content-alignment and margin-alignment for text. In both cases the margin box needs to be excluded.
241221

242222

243-
<h3>Sizing Initial Letters</h3>
223+
<h3 id="sizing-initial-letters">Sizing Initial Letters</h3>
244224

245225
<p>The size of a drop initial is determined by the need to satisfy the required alignment. For an N-line drop initial in a Western script, the cap-height of the letter needs to be (N – 1) times the line-height, plus the cap-height of the surrounding text. Note this height is <b>not</b> the font size of the drop initial.</p>
246226

@@ -327,7 +307,6 @@ If the subsequent paragraph starts with an initial letter, then it must clear th
327307

328308

329309

330-
<p class="issue">Define appropriate behavior for non-western scripts. The editors would appreciate any examples of drop initials in such scripts.</p>
331310

332311

333312

@@ -340,4 +319,4 @@ Eric A. Meyer and Michel Suignard.
340319

341320
<p>In additions to the authors, this specification would not have been possible without the help from:
342321

343-
<p>David Baron, John Daggett, Stephen Deach, Sujal Parikh, Grzegorz Zygmunt, Chris Wilson, David M Brown.
322+
<p>David Baron, John Daggett, Stephen Deach, Sujal Parikh, Grzegorz Zygmunt, Chris Wilson, David M Brown, Bobby Tung, Shinyu Murakami, David Hyatt, Sylvain Galineau, Alan Stearns.

0 commit comments

Comments
 (0)