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
+38-2Lines changed: 38 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -2419,6 +2419,9 @@ Some styles of drop initials do not align with the first line of text. For examp
2419
2419
2420
2420
2421
2421
2422
+
2423
+
2424
+
2422
2425
<div class="example">
2423
2426
2424
2427
<figure>
@@ -2456,6 +2459,9 @@ p::first-letter {
2456
2459
</div>
2457
2460
2458
2461
2462
+
2463
+
2464
+
2459
2465
<h3 id="aligning-initial-letter">Alignment of Initial Letters</h3>
2460
2466
2461
2467
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.
@@ -2519,9 +2525,39 @@ Text should be excluded around the glyph bounding boxes of the initial letters:
2519
2525
<p class="caption">Correct: text excluded around glyph bounding box</p>
2520
2526
</figure>
2521
2527
2522
-
<p class="issue">When the initial letter has a descender, we can say that the other text should be excluded around the em-square. But for characters without descenders, this is undesirable. How do we spec this?</p>
2523
2528
2524
-
<p class="issue">Add content about what happens when initial letter extends into subsequent paragraphs, where the subsequent paragraph may or may not have initial letters.</p>
2529
+
<h3 id="initial-letter-paragraphs">Interactions of initial letters with surrounding paragraphs</h3>
2530
+
2531
+
<h4>Raised and sunken caps</h4>
2532
+
2533
+
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.
2534
+
2535
+
2536
+
<figure>
2537
+
<img src="initial-letter-drop-para-compare.png" alt="raised cap para after normal para" width="600"/>
2538
+
<p class="caption">Raised cap (<code>initial-letter: 1 3</code>) on right; note that the position of the “C” is the same in both cases, but on the right all text is moved down relative to the initial letter.</p>
2539
+
</figure>
2540
+
2541
+
2542
+
<h4>Short paragraphs with initial letters</h4>
2543
+
2544
+
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.
2545
+
2546
+
<figure>
2547
+
<img src="initial-letter-short-para.png" alt="short para with initial letter" width="480"/>
2548
+
<p class="caption">The red text is a short paragraph with an initial letter. Note the subsequent paragraph wraps around the initial letter as if it were a float.</p>
2549
+
</figure>
2550
+
2551
+
If the subsequent paragraph also has an initial letter, then that initial letter must clear the float of the previous initial letter.
2552
+
2553
+
<figure>
2554
+
<img src="initial-letter-short-para-initial.png" alt="short para with initial letter followed by para with initial" width="480"/>
2555
+
<p class="caption">The red text is a short paragraph with an initial letter. If the subsequent paragraph also has an initial letter, its initial letter clears as if it was a float, too.</p>
2556
+
</figure>
2557
+
2558
+
2559
+
2560
+
2525
2561
2526
2562
<p class="issue">Define appropriate behavior for non-western scripts. The editors would appreciate any examples of drop initials in such scripts.</p>
<h3class="heading settled heading" data-level=3.5id=aligning-initial-letter><spanclass=secno>3.5 </span><spanclass=content>Alignment of Initial Letters</span><aclass=self-linkhref=#aligning-initial-letter></a></h3>
2565
2575
2566
2576
<p>As mentioned earlier, the alignment of initial letters depends on the script used. The <aclass=propertydata-link-type=propdeschref=#propdef-initial-letter-aligntitle=initial-letter-align>initial-letter-align</a> property can be used to specify the proper alignment.</p>
<pclass=caption>Correct: text excluded around glyph bounding box</p>
2615
2625
</figure>
2616
2626
2617
-
<pclass=issueid=issue-9cafd3f3><aclass=self-linkhref=#issue-9cafd3f3></a>When the initial letter has a descender, we can say that the other text should be excluded around the em-square. But for characters without descenders, this is undesirable. How do we spec this?</p>
2618
2627
2619
-
<pclass=issueid=issue-95316d37><aclass=self-linkhref=#issue-95316d37></a>Add content about what happens when initial letter extends into subsequent paragraphs, where the subsequent paragraph may or may not have initial letters.</p>
2628
+
<h3class="heading settled heading" data-level=3.7id=initial-letter-paragraphs><spanclass=secno>3.7 </span><spanclass=content>Interactions of initial letters with surrounding paragraphs</span><aclass=self-linkhref=#initial-letter-paragraphs></a></h3>
2629
+
2630
+
<h4class="heading settled heading" data-level=3.7.1id=raised-and-sunken-caps><spanclass=secno>3.7.1 </span><spanclass=content>Raised and sunken caps</span><aclass=self-linkhref=#raised-and-sunken-caps></a></h4>
2631
+
2632
+
<p>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.</p>
2633
+
2634
+
2635
+
<figure>
2636
+
<imgalt="raised cap para after normal para" src=initial-letter-drop-para-compare.pngwidth=600>
2637
+
<pclass=caption>Raised cap (<code>initial-letter: 1 3</code>) on right; note that the position of the “C” is the same in both cases, but on the right all text is moved down relative to the initial letter.</p>
2638
+
</figure>
2639
+
2640
+
2641
+
<h4class="heading settled heading" data-level=3.7.2id=short-paragraphs-with-initial-letters><spanclass=secno>3.7.2 </span><spanclass=content>Short paragraphs with initial letters</span><aclass=self-linkhref=#short-paragraphs-with-initial-letters></a></h4>
2642
+
2643
+
<p>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.</p>
2644
+
2645
+
<figure>
2646
+
<imgalt="short para with initial letter" src=initial-letter-short-para.pngwidth=480>
2647
+
<pclass=caption>The red text is a short paragraph with an initial letter. Note the subsequent paragraph wraps around the initial letter as if it were a float.</p>
2648
+
</figure>
2649
+
2650
+
<p>If the subsequent paragraph also has an initial letter, then that initial letter must clear the float of the previous initial letter.</p>
2651
+
2652
+
<figure>
2653
+
<imgalt="short para with initial letter followed by para with initial" src=initial-letter-short-para-initial.pngwidth=480>
2654
+
<pclass=caption>The red text is a short paragraph with an initial letter. If the subsequent paragraph also has an initial letter, its initial letter clears as if it was a float, too.</p>
2655
+
</figure>
2656
+
2657
+
2658
+
2659
+
2620
2660
2621
2661
<pclass=issueid=issue-79d884e2><aclass=self-linkhref=#issue-79d884e2></a>Define appropriate behavior for non-western scripts. The editors would appreciate any examples of drop initials in such scripts.</p>
<tr><thscope=row><aclass=css-codedata-link-type=propertyhref=#propdef-initial-letter-aligntitle=initial-letter-align>initial-letter-align</a><td>[ auto | alphabetic | hanging | ideographic ]<td>auto<td>::first-letter pseudo elements and inline level first child of a block container<td>no<td>N/A<td>visual<td>???</table></div>
3264
3304
3265
3305
3266
-
<h2class="no-num heading settled" id=issues-index><spanclass=content>Issues Index</span><aclass=self-linkhref=#issues-index></a></h2><divstyle="counter-reset: issue"><divclass=issue>[LDB: I don’t understand this paragraph.]<ahref=#issue-9934f9eb> ↵ </a></div>
3267
-
<divclass=issue>This definition should be briefer, and should
3306
+
<h2class="no-num heading settled" id=issues-index><spanclass=content>Issues Index</span><aclass=self-linkhref=#issues-index></a></h2><divstyle="counter-reset: issue"><divclass=issue>[LDB: I don’t understand this paragraph.]<ahref=#issue-9934f9eb> ↵ </a></div><divclass=issue>This definition should be briefer, and should
3268
3307
refer to the next section.<ahref=#issue-5e1feaa0> ↵ </a></div><divclass=issue>[LDB: The second part of this sentence is a significant change from CSS2, and also doesn’t mauke senes in the context of the sentence.]<ahref=#issue-508c6175> ↵ </a></div><divclass=issue>[LDB: This isn’t quite right. What about zwnj,
3269
-
etc.?<ahref=#issue-4b06b910> ↵ </a></div>
3270
-
3271
-
<divclass=issue>Should this split into inline-border and
<ahref=#issue-588d4c54> ↵ </a></div><divclass=issue>[The value <spanclass=cssdata-link-type=maybetitle=replaced>replaced</span> is not strictly needed. <spanclass=cssdata-link-type=maybetitle=Inline-box>Inline-box</span> also
3285
3318
does the job, except that it is not automatically restricted to replaced
3286
-
elements.]<ahref=#issue-82f9eb8f> ↵ </a></div>
3287
-
3288
-
<divclass=issue>Input from Japanese typographers would be very helpful.<ahref=#issue-91340f65> ↵ </a></div>
3289
-
3290
-
<divclass=issue>This figure is probably incorrect.<ahref=#issue-ddff256b> ↵ </a></div>
3291
-
3292
-
3293
-
3294
-
<divclass=issue>Add content describing constraint that the block container have a baseline grid (or fixed line-height?).<ahref=#issue-f229a1d3> ↵ </a></div>
3295
-
3296
-
3297
-
<divclass=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.<ahref=#issue-209367a3> ↵ </a></div>
3298
-
3299
-
<divclass=issue>When the initial letter has a descender, we can say that the other text should be excluded around the em-square. But for characters without descenders, this is undesirable. How do we spec this?<ahref=#issue-9cafd3f3> ↵ </a></div>
3300
-
3301
-
<divclass=issue>Add content about what happens when initial letter extends into subsequent paragraphs, where the subsequent paragraph may or may not have initial letters.<ahref=#issue-95316d37> ↵ </a></div>
3302
-
3303
-
<divclass=issue>Define appropriate behavior for non-western scripts. The editors would appreciate any examples of drop initials in such scripts.<ahref=#issue-79d884e2> ↵ </a></div>
3304
-
3305
-
3306
-
</div>
3319
+
elements.]<ahref=#issue-82f9eb8f> ↵ </a></div><divclass=issue>Input from Japanese typographers would be very helpful.<ahref=#issue-91340f65> ↵ </a></div><divclass=issue>This figure is probably incorrect.<ahref=#issue-ddff256b> ↵ </a></div><divclass=issue>Add content describing constraint that the block container have a baseline grid (or fixed line-height?).<ahref=#issue-f229a1d3> ↵ </a></div><divclass=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.<ahref=#issue-209367a3> ↵ </a></div><divclass=issue>Define appropriate behavior for non-western scripts. The editors would appreciate any examples of drop initials in such scripts.<ahref=#issue-79d884e2> ↵ </a></div></div>
0 commit comments