You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-inline/Overview.bs
+21-11Lines changed: 21 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -61,7 +61,7 @@ The exact size and position of a <a>dropped initial</a> depends on the alignment
61
61
<p class="caption">Two-line drop cap showing baselines (green lines), cap-height (red line), and ascender (cyan line).</p>
62
62
</figure>
63
63
64
-
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.
64
+
The alignment constraints for drop initials depend on the writing system. In ideographic scripts, 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.
@@ -206,7 +207,8 @@ Issue: Define interaction with Ruby. Easiest is to make it not apply to/within r
206
207
207
208
The 'initial-letter' property does not apply to boxes that are not positioned at the start of the line due to bidi reordering.
208
209
209
-
<h3 id="aligning-initial-letter">Alignment of Initial Letters</h3>
210
+
<h3 id="aligning-initial-letter">
211
+
Alignment of Initial Letters: the 'initial-letter-align' property</h3>
210
212
211
213
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.
212
214
@@ -280,7 +282,8 @@ If an initial letter is too long to fit on one line, it wraps (according to the
<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>
286
289
@@ -313,7 +316,8 @@ Font size of drop cap = ((N-1) * line-height + [cap-height of para] * [font size
313
316
314
317
The line height used in this calculation is the 'line-height' of the containing block (or, in the case where a baseline grid is in use, the baseline-to-baseline spacing required by the baseline grid [[CSS3-LINE-GRID]]). The contents of the lines spanned, and therefore any variation in their heights and positions, is not accounted for.
315
318
316
-
<h4 id="initial-letter-shaping">Shaping and Glyph Selection</h4>
319
+
<h4 id="initial-letter-shaping">
320
+
Shaping and Glyph Selection</h4>
317
321
318
322
When 'initial-letter' is not ''normal'', shaping does not occur across the box's boundaries,
319
323
as if the zero-width non-joiner (U+200C) were inserted before/after the <a>initial letter</a>.
@@ -323,7 +327,8 @@ with “پ” as the initial letter, followed by the normally-styled “س”.
323
327
324
328
Issue: Are there other things we need to consider here?
325
329
326
-
<h3 id="initial-letter-exclusions">Space Around Initial Letters</h3>
330
+
<h3 id="initial-letter-exclusions">
331
+
Space Around Initial Letters</h3>
327
332
328
333
The glyph(s) of an initial letter do not always fit within the specified sink. For example, if an initial letter has a descender, it could crash into the (n+1)th line of text. This is not desirable.
329
334
@@ -349,7 +354,8 @@ The margin box of the initial letter is then made an exclusion area for subseque
349
354
<p class="caption">Correct: text excluded around glyph bounding box</p>
350
355
</figure>
351
356
352
-
<h3 id="initial-letter-position">Positioning and Kerning Initial Letters</h3>
357
+
<h3 id="initial-letter-position">
358
+
Positioning and Kerning Initial Letters</h3>
353
359
354
360
In the <a>block axis</a>, the <a>initial letter</a> is positioned to satisfy its alignment requirements. (See 'initial-letter-align'.)
355
361
@@ -368,9 +374,11 @@ as necessary to maintain perceptual continuity of the text.
368
374
<p class="caption">In the top paragraph, the initial letter "A" has a word space after it. In the middle paragraph, the initial letter "A" is part of a word. In this case, the first line of text should be kerned into the initial letter's area as shown in the bottom paragraph.</p>
<h4 id="raised-sunken-caps">Raised and sunken caps</h4>
380
+
<h4 id="raised-sunken-caps">
381
+
Raised and sunken caps</h4>
374
382
375
383
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.
376
384
@@ -383,7 +391,8 @@ An initial letter does not affect the position of its containing element. For
383
391
Issue: Handle glyph ink above cap height of font.
384
392
385
393
386
-
<h4 id="short-para-initial-letter">Short paragraphs with initial letters</h4>
394
+
<h4 id="short-para-initial-letter">
395
+
Short paragraphs with initial letters</h4>
387
396
388
397
A paragraph with an initial letter can have fewer lines of text than the initial letter occupies. In this case, the initial letter’s top alignment is still honored, and its exclusion area continues into any subsequent blocks. This forces the subsequent inline-level content to wrap around the initial letter—exactly as if that block's text were part of its own containing block. (This is similar to how floats exclude content in subsequent block boxes.)
389
398
@@ -410,7 +419,8 @@ Floats always clear an initial letter when floated to the same side. When floate
410
419
Issue: Is this the behavior we want? What if the float is on the same line as the initial letter?
0 commit comments