8000 [css-inline] add initial-letter-align property to start a18n work; re… · w3c/csswg-drafts@349ad72 · GitHub
Skip to content

Commit 349ad72

Browse files
dauwhedauwhe
committed
[css-inline] add initial-letter-align property to start a18n work; rename initial-letters as initial-letter due to general preference for singular names
1 parent 5d2b35b commit 349ad72

3 files changed

Lines changed: 252 additions & 124 deletions

File tree

‎css-inline/Initial-2line-JapaneseVertical六.png‎

83.7 KB
Loading

‎css-inline/Overview.bs‎

Lines changed: 75 additions & 25 deletions
7802
Original file line numberDiff line numberDiff line change
@@ -592,7 +592,7 @@ top after the box has been aligned with 'vertical-align'.
592592

593593

594594

595-
<h5>Old, remove this:</h5>
595+
<h5 id="old-remove-this">Old, remove this:</h5>
596596

597597
<p>Line stacking is the mechanism by which a line box is determined for each
598598
line in a block and then these lines are stacked in the block-progression
@@ -2290,11 +2290,11 @@ A <dfn>drop initial</dfn> is a larger-than-usual letter at the start of a paragr
22902290

22912291
</div>
22922292

2293-
Drop initials are all about alignment. Reference points on the drop cap must align precisely with reference points in the text. In the most common case, used in Western languages, 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 baseline of the initial letter and the baseline of the Nth line of text. Figure three shows a simple two-line drop cap, with the relevant reference lines marked.
2293+
Drop initials are all about alignment. 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 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.
22942294

22952295

22962296

2297-
<figure>
2297+
<figure id="f2">
22982298
<img src="Dropcap-lines.png" width="600" alt="drop cap showing alignment"/>
22992299

23002300
<p class="caption">Two-line drop cap showing baselines (green lines), cap-height (red line), and ascender (cyan line).</p>
@@ -2303,18 +2303,11 @@ Drop initials are all about alignment. Reference points on the drop cap must ali
23032303

23042304

23052305

2306-
2307-
2308-
2309-
2310-
2311-
2312-
23132306
<div class="note">
2314-
<p>The size of a drop cap is determined by the need to satisfy the alignments specified above. For an N-line drop cap as described above, 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>
2307+
<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>
23152308

23162309

2317-
<p>Actually calculating the font size is tricky. Given the font size F of the main text, the line-height L, the number of lines N, and the cap-height of the font c, we find the drop initial font size D to be:</p>
2310+
<p>Actually calculating this font size is tricky. Given the font size F of the main text, the line-height L, the number of lines N, and the cap-height of the font c, we find the drop initial font size D to be:</p>
23182311

23192312

23202313
<pre>
@@ -2325,12 +2318,24 @@ A three-line drop initial in Adobe Minion Pro would have a font size of 61.2pt,
23252318
</div>
23262319

23272320

2321+
The alignment constraints depend on the script used. In Japanese vertical writing mode, it appears that the initial letter extends from the start edge of the first line to the end edge of the Nth line.
2322+
2323+
<p class="issue">Input from Japanese typographers would be very helpful.</p>
2324+
2325+
<figure>
2326+
<img src="Initial-2line-JapaneseVertical六.png" width="480" alt="Japanese Vertical Initial"/>
2327+
<p class="caption">Two-line drop initial in vertical writing mode</p>
2328+
</figure>
2329+
<p class="issue">This figure is probably incorrect.</p>
2330+
2331+
2332+
23282333
<p class="issue">Add content describing constraint that the block container have a baseline grid (or fixed line-height?).</p>
23292334

23302335

23312336
<h3 id="selecting-drop-initials">Selecting Initial Letters</h3>
23322337

2333-
Initial letters are typically a single letter, which can be selected by the <code>::first-letter</code> pseudo-element, as defined in [[SELECT]]. Authors who need more control over which characters are included in an initial letter can also apply the 'initial-letters' property to the first inline child of a block container.
2338+
Initial letters are typically a single letter, which can be selected by the <code>::first-letter</code> pseudo-element, as defined in [[SELECT]]. Authors who need more control over which characters are included in an initial letter can also apply the 'initial-letter' property to the first inline child of a block container.
23342339

23352340

23362341

@@ -2352,18 +2357,19 @@ Only the following properties can be applied to the <code>::first-letter</code>
23522357
<li>'float'</li>
23532358
<li>text-shadow</li>
23542359
<li>'clear'</li>
2355-
<li>'initial-letters'</li>
2360+
<li>'initial-letter'</li>
2361+
<li>'initial-letter-align'</li>
23562362
</ul>
23572363

23582364

23592365

23602366

2361-
<h3 id="sizing-drop-initials">Creating Initial Letters: The 'initial-letters' Property</h3>
2367+
<h3 id="sizing-drop-initials">Creating Initi 93C6 al Letters: The 'initial-letter' Property</h3>
23622368

2363-
The 'initial-letters' property takes two positive integer values. The first argument defines the number of lines the initial letter should sink. An N-line initial letter sinks to the Nth text baseline. The optional second argument defines how many lines the initial letter occupies. If not specified, it duplicates the first argument.
2369+
The 'initial-letter' property takes two positive integer values. The first argument defines the number of lines the initial letter should sink. An N-line initial letter sinks to the Nth text baseline. The optional second argument defines how many lines the initial letter occupies. If not specified, it duplicates the first argument.
23642370

23652371
<pre class="propdef">
2366-
Name: <dfn id="propdef-initial-letters">initial-letters</dfn>
2372+
Name: <dfn id="propdef-initial-letter">initial-letter</dfn>
23672373
Value: [<<integer>> <<integer>>?]
23682374
Initial: normal
23692375
Applies to: <code>::first-letter</code> pseudo elements and inline level first child of a block container
@@ -2384,16 +2390,14 @@ Computed value: ???
23842390
</figure>
23852391
<pre>
23862392
p::first-letter {
2387-
initial-letters: 3;
2393+
initial-letter: 3;
23882394
}
23892395
</pre>
2390-
2391-
23922396
</div>
23932397

23942398

23952399

2396-
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-letters' specifies the size of an initial letter, as if it were an n-line drop cap.
2400+
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.
239 77FA 72401

23982402

23992403

@@ -2408,7 +2412,7 @@ Some styles of drop initials do not align with the first line of text. For examp
24082412
<pre>
24092413

24102414
p::first-letter {
2411-
initial-letters: 2 3;
2415+
initial-letter: 2 3;
24122416
}
24132417

24142418
</pre>
@@ -2423,18 +2427,64 @@ If the first argument is ''1'', that creates a pure raised initial letter (often
24232427

24242428
<figure>
24252429
<img src="RaisedCap.png" width="480" alt="raised cap"/>
2426-
<p class="caption">Raised cap. </p>
2430+
<p class="caption">Raised cap. The initial letter is the size of a 3-line initial, but does not drop.</p>
24272431
</figure>
24282432
<pre>
24292433

24302434
p::first-letter {
2431-
initial-letters: 1 3;
2435+
initial-letter: 1 3;
24322436
}
24332437

24342438
</pre>
24352439

24362440
</div>
24372441

2442+
2443+
<h3 id="aligning-initial-letter">Alignment of Initial Letters</h3>
2444+
2445+
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.
2446+
2447+
<pre class="propdef" id="initial-letter-align">
2448+
Name: <dfn id="propdef-initial-letter-align">initial-letter-align</dfn>
2449+
Value: [ auto | alphabetic | hanging | ideographic ]
2450+
Initial: auto
2451+
Applies to: <code>::first-letter</code> pseudo elements and inline level first child of a block container
2452+
Inherited: no
2453+
Percentages: N/A
2454+
Media: visual
2455+
Computed value: ???
2456+
</pre>
2457+
2458+
2459+
<dl dfn-type="value" dfn-for="initial-letter-align">
2460+
<dt>auto</dt>
F890 2461+
<dd>The user agent selects the value which corresponds to the language of the text. Western languages would default to ''alphabetic'', CJK languages to ''ideographic'', and some Indic languages to ''hanging''. </dd>
2462+
<dt>alphabetic</dt>
2463+
<dd>As described above, the cap height of the initial letter aligns with the cap height of the first line of text. The baseline of the initial letter aligns with the baseline of the Nth text baseline.</dd>
2464+
2465+
<dt>hanging</dt>
2466+
<dd>The hanging baseline of the initial letter aligns with the hanging baseline of the first line of text. </dd>
2467+
2468+
<dt>ideographic</dt>
2469+
<dd>The initial letter is centered in the N-line area. </dd>
2470+
</dl>
2471+
2472+
<p class="issue">Input from those knowledgeable about non-Western typographic traditions would be very helpful in describing the appropriate alignments. More values may be required for this property.</p>
2473+
2474+
<div class="example">
2475+
The vertical writing mode example from <a href="#f2">Figure 2</a> could be coded as:
2476+
2477+
<pre>
2478+
span.initial {
2479+
initial-letter: 2;
2480+
initial-letter-alignment: ideographic;
2481+
}
2482+
</pre>
2483+
2484+
2485+
</div>
2486+
2487+
24382488
<h3 id="initial-letter-exclusions">Space Around Initial Letters</h3>
24392489

24402490
If an initial letter has a descender, it could crash into the (n+1)th line of text. This is not desirable.
@@ -2615,7 +2665,7 @@ href="/TR/REC-CSS2/media.html#visual-media-group">visual</a>
26152665
'inline-box-align'</li>
26162666

26172667
<li>Drop initial letter:
2618-
'initial-letters'</li>
2668+
'initial-letter', 'initial-letter-align'</li>
26192669
</ul>
26202670

26212671
<p>It also modifies the following properties as described:

0 commit comments

Comments
 (0)