-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathOverview.bs
More file actions
1915 lines (1567 loc) · 69.3 KB
/
Overview.bs
File metadata and controls
1915 lines (1567 loc) · 69.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<style media="print" type="text/css">
img#edge { width: 80%; height: 70%;}
dt.label { display: run-in; }
</style>
<pre class='metadata'>
Title: CSS Inline Layout Module Level 3
Shortname: css-inline
Level: 3
Status: ED
Work Status: Revising
Group: csswg
TR: https://www.w3.org/TR/css-inline-3/
ED: https://drafts.csswg.org/css-inline-3/
Previous version: https://www.w3.org/TR/2018/WD-css-inline-3-20180808/
Previous version: https://www.w3.org/TR/2016/WD-css-inline-3-20160524/
Previous version: https://www.w3.org/TR/2015/WD-css-inline-3-20150917/
Previous version: https://www.w3.org/TR/2014/WD-css-inline-3-20141218/
Previous version: https://www.w3.org/TR/2002/WD-css3-linebox-20020515/
!Issues list: <a href="https://github.com/w3c/csswg-drafts/issues?q=is%3Aissue+is%3Aopen+label%3Acss-inline-3">CSS3 Line Layout issues in GitHub</a>
Editor: Dave Cramer, Hachette Livre, dauwhe@gmail.com, w3cid 65283
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Steve Zilles, Adobe, szilles@adobe.com, w3cid 3129
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 [[CSS-TEXT-3]]. 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]].
Ignored Terms: line-height-shift-adjustment, text-script, after, before, alignment subtree
Link Defaults: css-fonts-3 (property) font-family, css-color-3 (property) color
At Risk: the 'initial-letters-wrap' property
</pre>
<pre class="link-defaults">
spec:css-align-3; type:dfn; text:alignment baseline
spec:css-break-3; type:dfn; text:fragment
</pre>
<h2 id="intro">
Introduction</h2>
This module defines the CSS Inline Layout model,
replacing and extending the model as defined in CSS2.1.
It is very much a work-in-progress, and implementers should reference CSS2.1 for now.
The <dfn export>root inline box</dfn> is an anonymous inline box
which is automatically generated to hold
all of the <a>inline-level</a> contents of a <a>block container</a>
(if it has any).
It inherits from its parent <a>block container</a>,
but is otherwise unstyleable.
Note: Line boxes, like <a>column boxes</a> [[css-multicol-1]],
are <a>fragmentation containers</a> generated by their <a>formatting context</a>
and are not part of the CSS <a>box tree</a>.
<h2 id="line-height">
Line Heights and Baseline Alignment</h2>
<p class="issue">This section is being rewritten. Refer to <a href="https://www.w3.org/TR/CSS2/visudet.html#line-height">section 10.8</a> of [[CSS2]] for the normative CSS definition or the <a href="https://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.)
<strong>The CSS2 specification should be used as the guideline for implementation.</strong></p>
Issue: The CSSWG would like to know which baseline values are necessary: if any can be dropped, or any need to be added. See GitHub issue <a href="https://github.com/w3c/csswg-drafts/issues/859">859</a>.
<h3 id="dominant-baseline-property">
Dominant Baselines: the 'dominant-baseline' property</h3>
<pre class="propdef">
Name: dominant-baseline
Value: auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top
Initial: normal
Applies to: block containers, inline boxes, table rows, table columns, grid containers, and flex containers
Inherited: yes
Percentages: N/A
Computed value: specified keyword
Animation type: discrete
</pre>
This property specifies the <dfn>dominant baseline</dfn>,
which is the baseline used to align the box's text and inline-level contents.
It is also indicates the default <a>alignment baseline</a>
of any boxes participating in <a>baseline alignment</a>
in the box’s <a>alignment context</a>.
Values have the following meanings:
<dl dfn-for=dominant-baseline dfn-type=value>
<dt><dfn>auto</dfn>
<dd>
Equivalent to ''dominant-baseline/alphabetic'' in <a>horizontal writing modes</a>
and in <a>vertical writing modes</a>
when 'text-orientation' is ''sideways'', ''sideways-right'', or ''sideways-left''.
Equivalent to ''dominant-baseline/central'' in <a>vertical writing modes</a>
when 'text-orientation' is ''mixed'' or ''upright''.
However, in SVG text, the origin point of glyphs
(used for coordinate-based glyph positioning)
is always handled as for ''dominant-baseline/central''
in <a>vertical writing modes</a>.
<dt><dfn>text-bottom</dfn>
<dd>
Use the bottom of the em box as the baseline.
<dt><dfn>alphabetic</dfn>
<dd>
Use the alphabetic baseline.
<dt><dfn>ideographic</dfn>
<dd>
Match the box's ideographic under-side baseline to that of its parent.
This corresponds to the <code>ideo</code> baseline in OpenType.
<dt><dfn>middle</dfn>
<dd>
Use the “middle” baseline: halfway between the alphabetic baseline and the ex-height.
<dt><dfn>central</dfn>
<dd>
Use the central baseline
(halfway between the ascent and descent).
<dt><dfn>mathematical</dfn>
<dd>
Use the mathematical baseline.
<dt><dfn>hanging</dfn>
<dd>
Use the hanging baseline.
<dt><dfn>text-top</dfn>
<dd>
Use the top of the em box as the baseline.
</dl>
See [[CSS-WRITING-MODES-3]] for an introduction to dominant baselines.
Issue: Should be text-over and text-under instead of text-top and text-bottom,
but maybe it's better not to use those terms for consistency with legacy 'vertical-align'.
See GitHub issue <a href="https://github.com/w3c/csswg-drafts/issues/860">860</a>.
Issue: Add <css>first</css> and <css>last</css> values.
Note, in this property, these are combinatorial,
whereas in the <css>align/justify-self/content</css> properties, it's singular.
Do we want to align the syntaxes wrt hyphens vs. spaces or what?
See GitHub issue <a href="https://github.com/w3c/csswg-drafts/issues/861">861</a>.
<h3 id="transverse-alignment">
Transverse Box Alignment: the 'vertical-align' property</h3>
<pre class="propdef shorthand">
Name: vertical-align
Value: <<'baseline-shift'>> || <<'alignment-baseline'>>
Initial: baseline
Applies to: inline-level boxes
Inherited: no
Percentages: N/A
</pre>
<p>This shorthand property specifies how an inline-level box is aligned within the line.
Values are the same as for its longhand properties, see below.
<p class="advisement">
Authors should use this property ('vertical-align') instead of its longhands.
ISSUE: This property will gain ''first'' and ''last'' keywords,
like in the <a href="https://www.w3.org/TR/css-align-3/">box alignment properties</a>,
see [[css-align-3#baseline-values]].
The <a href="https://github.com/w3c/csswg-drafts/issues/861">open question</a>
is whether they should be added to 'alignment-baseline'
or a new <a>sub-property</a> should be created
to hold the ''first | last'' preference.
<h4 id="alignment-baseline-property">
Alignment Point: 'alignment-baseline' longhand</h4>
<pre class="propdef">
Name: alignment-baseline
Value: baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top | bottom | center | top
Initial: baseline
Applies to: inline-level boxes, flex items, grid items, table cells
Inherited: no
Percentages: N/A
Computed value: specified keyword
Animation type: discrete
</pre>
<p>Specifies what point of an inline-level box is aligned to what point in the parent.
Also selects the <a>alignment baseline</a> of boxes aligned with 'align-self'/'justify-self'.
ISSUE: Clean up this prose to correctly handle alignment contexts other than inline formatting contexts.
Values are defined below:
For the following definitions,
the margin box is used for atomic inlines,
the leading box for non-replaced inlines,
and the baselines of the box are <a lt="synthesized baseline">synthesized</a> if missing in the line-box's inline axis:
<dl dfn-for=alignment-baseline dfn-type=value>
<dt><dfn>baseline</dfn>
<dd>
Use the <a>dominant baseline</a> choice of the parent.
Match the box's corresponding baseline to that of its parent.
<dt><dfn>text-bottom</dfn>
<dd>
Match the bottom of the box to the bottom of the parent's content area.
<dt><dfn>alphabetic</dfn>
<dd>
Match the box's alphabetic baseline to that of its parent.
<dt><dfn>ideographic</dfn>
<dd>
Match the box's ideographic character face under-side baseline to that of its parent.
<dt><dfn>middle</dfn>
<dd>
Align the vertical midpoint of the box with
the baseline of the parent box plus half the x-height of the parent.
<dt><dfn>central</dfn>
<dd>
Match the box's central baseline to the central baseline of its parent.
<dt><dfn>mathematical</dfn>
<dd>
Match the box's mathematical baseline to that of its parent.
<dt><dfn>text-top</dfn>
<dd>
Match the top of the box to the top of the parent's content area.
</dl>
For the following definitions, the <a>alignment subtree</a>
is as defined in [[!CSS2]].
<dl dfn-for=alignment-baseline dfn-type=value>
<dt><dfn>top</dfn>
<dd>
Align the top of the aligned subtree with the top of the line box.
<dt><dfn>center</dfn>
<dd>
Align the center of the aligned subtree with the center of the line box.
<dt><dfn>bottom</dfn>
<dd>
Align the bottom of the aligned subtree with the bottom of the line box.
</dl>
SVG implementations <em>may</em> support the following aliases
in order to support legacy content:
<pre dfn-for=alignment-baseline dfn-type=value>
<dfn>text-before-edge</dfn> = ''alignment-baseline/text-top''
<dfn>text-after-edge</dfn> = ''alignment-baseline/text-bottom''
</pre>
These values are not allowed in the 'vertical-align' shorthand.
<h4 id="baseline-shift-property">
Alignment Shift: the 'baseline-shift' longhand</h4>
<pre class="propdef">
Name: baseline-shift
Value: <<length-percentage>> | sub | super
Initial: 0
Applies to: inline-level boxes, flex items, grid items
<!-- table cells left out b/c CSS2.1 vertical-align values must have no effect... -->
Inherited: no
Percentages: refer to the used value of 'line-height'
Computed value: the specified keyword and/or a computed <<length-percentage>> value
</pre>
<p>This property specifies by how much the box is shifted up
from its alignment point.
It does not apply when 'alignment-baseline' is ''alignment-baseline/top'' or ''alignment-baseline/bottom''.
<p class="advisement">
Authors should use the 'vertical-align' shorthand instead of this property.
Values have the following meanings:
<dl dfn-for="baseline-shift" dfn-type=value>
<dt><dfn><<length>></dfn>
<dd>Raise (positive value) or lower (negative value) by the specified length.
<dt><dfn><<percentage>></dfn>
<dd>Raise (positive value) or lower (negative value) by the specified percentage of the 'line-height'.
<dt><dfn>sub</dfn>
<dd>Lower by the offset appropriate for subscripts of the parent’s box.
(The UA should use the parent’s font data to find this offset whenever possible.)
<dt><dfn>super</dfn>
<dd>Raise by the offset appropriate for superscripts of the parent’s box.
(The UA should use the parent’s font data to find this offset whenever possible.)
</dl>
<p>User agents <em>may</em> additionally support the keyword <dfn for=baseline-shift>baseline</dfn>
as computing to ''0''
if is necessary for them to support legacy SVG content.
Issue: We would prefer to remove this, and are looking for feedback from SVG user agents as to whether it's necessary.
<h3 id="line-height-property">
Line Spacing: the 'line-height' property</h3>
<pre class="propdef">
Name: line-height
Value: normal | <<number>> || <<length-percentage>>
Initial: normal
Applies to: inline boxes
Inherited: yes
Percentages: computed relative to ''1em''
Computed value: the specified keyword, a number, or a computed <<length>> value
</pre>
<dl dfn-type=value dfn-for=line-height>
<dt><dfn>normal</dfn>
<dt><dfn><<number>></dfn>
<dt><dfn><<length-percentage>></dfn>
<dd>See <a href="https://www.w3.org/TR/CSS2/visudet.html#line-height">CSS2§10.8.1</a>.
</dl>
ISSUE: Fill out this definition so that it fully replaces CSS2.
ISSUE: The fact that percentages compute to lengths is annoying.
See also href="https://github.com/w3c/csswg-drafts/issues/3118">Issue 3118</a>
and <a href="https://github.com/w3c/csswg-drafts/issues/2165">Issue 2165</a>.
<h3 id="line-sizing-property">
Line Sizing Containment: the 'line-sizing' property</h3>
<pre class="propdef">
Name: line-sizing
Value: quirks-behavior | current-behavior | better-behavior | box-model-behavior | absolute-behavior
Initial: current-behavior
Applies to: block containers? inline boxes?
Inherited: yes
Percentages: N/A
Computed value: the specified keyword
</pre>
ISSUE: This is a rought draft of a proposal, and has not yet been approved by the CSSWG.
Many variants have been included to promote discussion of possible behaviors;
not all of them are expected to be kept.
See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/3199">Issue 3199</a>, <a href="https://lists.w3.org/Archives/Public/www-style/2011Mar/0364.html">Hyatt's message</a>, and <a href="https://dev.w3.org/cvsweb/~checkout~/csswg/css3-linebox/Attic/Overview.html?rev=1.5;content-type=text%2Fhtml#LineStacking">dbaron's proposal</a>.
Also all the keywords are expected to be renamed.
This property controls the method by which line boxes are sized,
and thus the spacing between lines of text.
Values have the following meanings:
<dl dfn-for=line-sizing dfn-type=value>
<dt><dfn>quirks-behavior</dfn>
<dd>
Line boxes are sized, and content positioned within them,
as defined in [[!CSS2]] except that
any <a>inline box</a> <a lt="box fragment">fragment</a>
that has zero borders and padding and
that does not directly contain text or <a>preserved white space</a> [[!CSS-TEXT-3]]
is ignored for this purpose.
<dt><dfn>current-behavior</dfn>
<dd>
Line boxes are sized, and content positioned within them,
as defined in [[!CSS2]].
Note: In this model, vertical rhythm is broken
any time there is a change in font metrics within a paragraph.
<dt><dfn>better-behavior</dfn>
<dd>
Line boxes are sized, and content positioned within them,
as defined in [[!CSS2]],
except that positive half-leading is not applied
to any box other than the <a>root inline box</a>.
Note: This will give consistent line spacing
as long as there is some amount of leading added,
such that the half-leading on the root inline
is large enough to accommodate the unleaded ascent of its descendants.
The line box will grow to accommodate
content that would otherwise overflow,
avoiding overlap between lines.
<dt><dfn>box-model-behavior</dfn>
<dd>
Line boxes are sized to fit the <a>root inline box</a>
and its <a>half-leading</a>,
as well as the <a>outer edges</a> of any <a>inline-level descendants</a>
in the same <a>inline formatting context</a>.
Positive half-leading is not applied to any other <a>inline box</a>;
negative half-leading is applied as negative margins
to <a>inline boxes</a> whose block-axis margins, borders, and padding
are zero.
Note: This mode is similar to ''better-behavior'',
but re-uses the familiar margin/border/padding box model
of controlling spacing.
However to ensure that 'line-height' < 1 behaves as expected,
the default case (no margin/border/padding)
needs to apply negative leading to such inlines.
<dt><dfn>absolute-behavior</dfn>
<dd>
Line boxes are sized to fit the <a>root inline box</a>
and its <a>half-leading</a>;
no other boxes are considered.
Inline-level content may overflow the line box
and overlap adjacent lines
if it extends higher or lower
than the edges of the root inline box’s leading.
</dl>
ISSUE: Should this property apply to block containers or to inline boxes?
In the latter case, an individual inline could say "pay attention to me"
or "don't pay attention to me".
ISSUE: Need better names. Maybe `loose | normal | strict | absolute`?
Maybe `quirks | legacy | normal | absolute`?
Something else?
<h2 id="inline-box-dimensions">
Drawing Inline Boxes</h2>
<h3 id="line-fill">
Inline Box Heights: the 'inline-sizing' property</h3>
<pre class="propdef">
Name: inline-sizing
Value: normal | stretch
Initial: normal
Applies to: <a>inline boxes</a>
Inherited: no
Percentages: n/a
Computed value: specified keyword
Animation type: discrete
</pre>
This property specifies how the <a>logical height</a>
of the <a>content area</a> of an <a>inline box</a>
is measured
and how it is aligned with its contents.
(It has no effect on the size or position of the box’s contents.)
Values have the following meanings:
<dl dfn-for="inline-sizing" dfn-type=value>
<dt><dfn>normal</dfn>
<dd>
The <a>content area</a> of the <a>inline box</a>
is sized and position to fit its (possibly hypothetical) text
as specified in <a href="https://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced">CSS2§10.6.1</a>.
<dt><dfn>stretch</dfn>
<dd>
The <a>logical height</a> of the <a>content area</a>
is calculated as the <a>stretch fit</a>
into the line box.
The box is then positioned such that its <a>margin edges</a>
coincide with the line box’s edges.
</dl>
Issue: We might want to use this opportunity to more precisely define ''inline-sizing/normal'',
rename it to match,
and possibly introduce any other values that may seem necessary.
<h2 id="initial-letter-styling">
<!--<a name="Initial"></a>-->
Initial Letters</h2>
<p class="issue">The editors would appreciate any examples of drop initials in non-western scripts, especially Arabic and Indic scripts.</p>
<h3 id="initial-letter-intro">
<!--<a name="DropInitial"></a>-->
An Introduction to Initial Letters</h3>
<em>This section is non-normative.</em>
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.
<h4 id="drop-initial">
Drop Initial</h4>
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.
<figure>
<img src="images/Dropcap-E-acute-3line.png" width="480"
alt="3-line drop cap with E Acute" >
<figcaption>
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.
</figcaption>
</figure>
The exact size and position of a <a>dropped initial</a>
depends on the alignment of its glyph.
Reference points on the drop cap must align precisely
with reference points in the text.
The alignment constraints for drop initials depend on the writing system.
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.
<figure id="f2">
<img src="images/Dropcap-lines.png" width="600"
alt="drop cap showing alignment">
<figcaption>Two-line drop cap showing baselines (green lines), cap-height (red line), and ascender (cyan line).</figcaption>
</figure>
In Han-derived scripts, the initial letter extends
from the <a>block-start</a> edge of the glyphs on the first line
to the <a>block-end</a> edge of the glyphs on the Nth line.
<figure>
<img src="images/Initial-2line-JapaneseVertical六.png" width="480"
alt="Japanese Vertical Initial">
<figcaption>Two-line drop initial in vertical writing mode</figcaption>
</figure>
In certain Indic scripts,
the top alignment point is the hanging baseline,
and the bottom alignment point is the text-after-edge.
<figure>
<img src="images/Devangari-Initial.png" width="480"
alt="Devangari initial letter">
<figcaption>Devangari <a>initial letter</a> aligned with hanging baseline. Alignment points shown in red.</figcaption>
</figure>
<h4 id="sunk-initial">
Sunken Initial Letters</h4>
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.
<figure>
<img src="images/SunkenCapA.png" width="480"
alt="sunken drop initial">
<figcaption>Sunken cap. The letter drops two lines, but is the size of a three-line initial letter.</figcaption>
</figure>
<h4 id="raise-initial">
Raised Initial Letters</h4>
A <dfn>raised initial</dfn> (often called a “raised cap” or “stick-up cap”) “sinks” to the first text baseline.
Note: A proper raised initial has several advantages over
simply increasing the font size of a first letter.
The line spacing in the rest of the paragraph will not be altered,
but text will still be excluded around large descenders.
And if the size of raised initial is defined to be an integral number of lines,
implicit baseline grids can be maintained.
<figure>
<img src="images/RaisedCap.png" width="480"
alt="raised cap">
<figcaption>Raised cap. The initial letter is the size of a 3-line initial, but does not drop.</figcaption>
</figure>
<h3 id="selecting-drop-initials">
Selecting Initial Letters</h3>
<em>This section is non-normative.</em>
Initial letters are typically a single letter, although
they may include punctuation or a sequence of characters which
are perceived by the user to be a single typographic unit.
The ''::first-letter'' pseudo-element,
defined in [[SELECT]] and [[CSS-PSEUDO-4]],
can be used to select the character(s) to be formatted as <a>initial letters</a>.
Authors who need more control over which characters are included in an initial letter,
or who want to apply initial-letters formatting to replaced elements or multiple words
can alternately apply the 'initial-letters' property to the first inline-level child of a block container.
<div class="example">
<pre>
<p>This paragraph has a dropped “T”.
<p><img alt="H" src="illuminated-h.svg">ere we have an illuminated “H”.
<p><span>Words may also</span> be given initial letter styling at the beginning of a paragraph.
</pre>
<pre>
::first-letter, /* style first paragraph's T */
img, /* style illuminated H */
span /* style phrase inside span */
{ initial-letters: 2; }
</pre>
</div>
Note that
since ''::first-letter'' selects punctuation before or after the first letter,
these characters are included in the initial-letters when ''::first-letter'' is used.
<figure>
<img src="images/initial-letter-punctuation-quote.png" width="604"
alt="Paragraph showing both opening quote and first letter set as three-line drop cap">
<figcaption>The ''::first-letter'' pseudo-element selects the quotation mark as well as the “M”.</figcaption>
</figure>
Issue: Should there be a way to opt out of this behavior? See <a href="https://github.com/w3c/csswg-drafts/issues/310">Github Issue 310</a>.
<h3 id="sizing-drop-initials">
Creating Initial Letters: the 'initial-letters' property</h3>
<pre class="propdef">
Name: <dfn id="propdef-initial-letters">initial-letters</dfn>
Value: normal | <<number>> <<integer>> | <<number>> && [ drop | raise ]?
Initial: normal
Applies to: certain inline-level boxes and <css>::first-letter</css> and inside <css>::marker</css> boxes (<a href="#first-most-inline-level">see prose</a>)
Inherited: no
Percentages: N/A
Computed value: the keyword ''initial-letters/normal'' or a number paired with an integer
Animation type: by computed value type
</pre>
ISSUE: Renaming this property (and the others in this section)
is currently <a href="https://github.com/w3c/csswg-drafts/issues/2950">under discussion</a>.
This property specifies
the <a lt="initial letter size">size</a> and <a lt="initial letter sink">sink</a>
for dropped, raised, and sunken initial letters
as the number of lines spanned.
<div class="example">
For example, the following code will create
a 2-line dropped initial letter
at the beginning of each paragraph
that immediately follows a second-level heading:
<pre>h2 + p::first-letter { initial-letters: 2; }</pre>
</div>
It takes the following values:
<dl dfn-for=initial-letters dfn-type=value>
<dt><dfn>normal</dfn>
<dd>
No special initial-letters effect. Text behaves as normal.
<dt><dfn><<number>></dfn>
<dd>
This first argument defines the <dfn dfn lt="initial letter size">size</dfn>
of the initial letter
in terms of how many lines it occupies.
Values less than one are invalid.
<dt><dfn><<integer>></dfn>
<dd>
This optional second argument
defines the number of lines the initial letter should
<dfn dfn lt="initial letter sink" local-lt="sink">sink</dfn>.
A value of ''1'' indicates a <a>raised initial</a>;
values greater than ''1'' indiciate a <a>sunken initial</a>.
Values less than one are invalid.
<dt><dfn>raise</dfn>
<dd>
Computes to an <a>initial letter sink</a> of ''1''.
<dt><dfn>drop</dfn>
<dd>
Computes to an <a>initial letter sink</a>
equal to the <a>initial letter size</a>
floored to the nearest positive whole number.
</dl>
If the <a>initial letter sink</a> value is omitted,
''drop'' is assumed.
Values other than ''initial-letters/normal''
cause the affected box to become an
<dfn lt="initial letter | initial letter box">initial letter box</dfn>,
which is an <a>in-flow</a> <a>inline-level box</a>
with special layout behavior.
<div class="example">
Here are some examples of 'initial-letters' usage:
<dl>
<dt>''initial-letters: 3''
<dt>''initial-letters: 3 3''
<dt>''initial-letters: 3 drop''
<dt>''initial-letters: drop 3''
<dd>
Represents a <a>dropped initial</a> 3 lines high, 3 lines deep.
<img src="images/InitialLetter33.png" width="360"
alt="3 lines high, 3 lines deep">
<dt>''initial-letters: 3 2''
<dd>
Represents a <a>sunken initial</a> 3 lines high, 2 lines deep.
<img src="images/InitialLetter32.png" width="360"
alt="3 lines high, 2 lines deep">
<dt>''initial-letters: 3 1''
<dt>''initial-letters: 3 raise''
<dt>''initial-letters: raise 3''
<dd>
Represents a <a>raised initial</a> 3 lines high, 1 line deep.
<img src="images/InitialLetter31.png" width="360"
alt="3 lines high, 1 line deep">
<dt>''initial-letters: 2.51 3''
<dd>
The size of the initial letter does not have to be an integral number of lines.
In this case only the bottom aligns.
<img src="images/non-integer-initial.png" width="360"
alt="Non-integral initial letter that only aligns at base">
</dl>
</div>
<div class="example">
In conjunction with other CSS properties, ''initial-letters'' can be used to create
“adjacent initial letters,” where the initial letter is adjacent to the text:
<pre>
p::first-letter {
initial-letters: 3;
color: red;
width: 5em;
text-align: right;
margin-left: -5em;
}
p {
margin-left: 5em;
}
</pre>
<figure>
<img src="images/adjacent-initial-letter.png"
alt="Initial letter adjacent to text" width="360">
</figure>
</div>
<h4 id="first-most-inline-level">
Applicability</h4>
To give authors more control over which characters can be styled as an <a>initial letter</a>
and to allow the possibility of multi-character <a>initial letters</a>
(such as for first word or first phrase styling),
the 'initial-letters' property applies not just
to the CSS-defined ''::first-letter'' pseudo-element,
but also to
''list-style-position/inside''-positioned ''::marker'' pseudo-elements and
inline-level boxes
that are placed at the start of the first line.
Specifically, 'initial-letters' applies to
any <a>inline-level box</a>--
including any such ''::first-letter'' or ''::marker'' box--
that is the first child of its parent box
and whose ancestors (if any) that are descendants of its <a>containing block</a>
are all first-child <a>inline boxes</a>
that have a <a lt="computed value">computed</a> 'initial-letters' value
of ''initial-letters/normal''.
<div class="example">
For example,
the <code><span></code>, <code><em></code>, and <code><b></code> elements
in the following example are
"first-most inline-level descendants" of the <code><p></code>,
but the <code><strong></code> element
is not:
<xmp>
<p><span><em><b>This</b> phrase</em> is styled
<strong>specially</strong>.</span> …
</xmp>
If we apply the following rules:
<pre>
em { initial-letters: 2; }
b, strong { initial-letters: 3; }
</pre>
The 'initial-letters' property will take effect only on the <code><em></code>.
The styling on <code><b></code>
is ignored,
as it has an ancestor already styled as an <a>initial letter</a>;
and the styling on <code><strong></code> is ignored
because it is a second sibling.
The result might be rendered as
<figure>
<img src="images/firstmost-inline.png"
alt="“This phrase” becomes the dropped text spanning two lines, the remainder of the text wrapping alongside.">
</figure>
</div>
If 'initial-letters' is applied to an <a>inline-level box</a>
that is not positioned at the start of the line due to bidi reordering
or which is otherwise preceded by other <a>inline-level</a> content,
its <a>used value</a> is ''initial-letters/normal'',
and it is not formatted as an <a>initial letter</a>.
The effect of the 'initial-letters' property is undefined
on children of <a>ruby</a> base container boxes
and on <a>ruby</a> container boxes.
Note: The 'initial-letters' property cannot apply to any element
whose 'float' is not ''float/none'' or 'position' is not ''static'',
because these values cause its 'display' to compute to ''display/block''.
<h3 id="aligning-initial-letter">
Alignment of Initial Letters: the 'initial-letters-align' property</h3>
As mentioned earlier, the alignment of initial letters
depends on the script used.
The 'initial-letters-align' property can be used to specify the proper alignment.
<pre class="propdef" id="initial-letters-align">
Name: <dfn id="propdef-initial-letters-align">initial-letters-align</dfn>
Value: border-box? [ alphabetic | ideographic | hebrew | hanging ] | border-box
Initial: alphabetic
Applies to: certain inline-level boxes and <css>::first-letter</css> and inside <css>::marker</css> boxes (<a href="#first-most-inline-level">see prose</a>)
Inherited: yes
Percentages: N/A
Computed value: specified keyword(s)
Animation type: discrete
</pre>
This property specifies the alignment points
used to size and position an <a>initial letter</a>.
Two sets of alignment points are necessary:
the <a>over</a> and <a>under</a> alignment points of the <a>initial letter</a>
are matched to corresponding <a>over</a> and <a>under</a> points of the surrounding text.
Values have the following meanings:
<dl dfn-type="value" dfn-for="initial-letters-align">
<dt><dfn>alphabetic</dfn>
<dd>
Use the alphabetic and cap-height baselines of the surrounding text
to align the <a>initial letter</a>.
<dt><dfn>ideographic</dfn>
<dd>
Use the ideographic character face bottom and top edge baselines of the surrounding text
to align the <a>initial letter</a>.
<dt><dfn>hebrew</dfn>
<dd>
Use the alphabetic and (as yet theoretical) hebrew hanging baseline of the surrounding text
to align the <a>initial letter</a>.
<dt><dfn>hanging</dfn>
<dd>
Use the alphabetic and hanging baselines of the surrounding text
to align the <a>initial letter</a>.
<dt><dfn>border-box</dfn>
<dd>
Use the <a>initial letter box</a>’s <a>line-over</a> and <a>line-under</a> border edges
as the <a>over</a> and <a>under</a> alignment points, respectively.
</dl>
Issue: Is there a proper typographic term for the hebrew “hanging” baseline?
<div class="example">
The vertical writing mode example from <a href="#f2">Figure 2</a> could be coded as:
<pre>
span.initial {
initial-letters: 2;
initial-letters-align: ideographic;
}
</pre>
</div>
<div class="example">
Initial letter in Hebrew
<pre>
span.initial {
initial-letters: 2;
initial-letters-align: hebrew;
}
</pre>
<img src="images/hebrew-initial-letter.png" width="480"
alt="optical kerning in the presence or absence of a space after the initial letter">
</div>
Except when ''border-box'' is specified,
the alignment points of the <a>initial letter</a>
are automatically determined from its contents:
<ol>
<li>If the <a>initial letter</a>
is an atomic inline,
use its <a>over</a> and <a>under</a> content-box edges.
<li>Else if the <a>initial letter</a>
contains any character from the Han, Hangul, Kana, or Yi <a>Unicode scripts</a>,
use the ideographic character face bottom and top edge baselines.
<li>Else if the <a>initial letter</a>
contains any character from the Devanagari, Bengali, and Gurmukhi <a>Unicode scripts</a>,
use the hanging and alphabetic baselines.
<li>Else if the <a>initial letter</a>
contains any character from the Hebrew <a>Unicode scripts</a>,
use the ideographic character face bottom and top edge baselines.
<li>Else use the alphabetic and cap-height baselines.
</ol>
Issue: What is the proper alignment for South Asian scripts
that do not have the explicit hanging baseline, such as Tamil or Telugu?
See GitHub issue <a href="https://github.com/w3c/csswg-drafts/issues/864">864</a>
Note: The ordering of keywords in this property is fixed in case ''border-box''
is expanded to ''[ border-box | alphabetic | ideographic | hebrew | hanging ]''
to allow explicitly specifying the <a>initial letter</a>’s alignment points.
<h4 id="initial-letter-align-defaults">
UA Default Stylesheet for 'initial-letters-align'</h4>
In order to provide the better behavior by default,
UAs must include in their default UA style sheet the following rules:
<pre>
[lang]:lang(zh, ja, ko, ii) {
initial-letters-align: ideographic;
}
[lang]:lang(iw, yi, lad, jrb) {
initial-letters-align: hebrew;
}
[lang]:lang(hi, mr, ne, pi, kok, brx, mai, sd, sa) {
initial-letters-align: hanging;
}
/* Script tags override language tags */
[lang]:lang('*-Latn', '*-Cyrl') {
initial-letters-align: alphabetic;
}
[lang]:lang('*-Hani', '*-Hant', '*-Hans') {
initial-letters-align: ideographic;
}
</pre>
Issue: This only covers the most common cross-linguistic transcription systems.
Should we include any other / all script tags in the UA style sheet?
<h3 id="initial-letter-layout">
Initial Letter Layout</h3>
There are two types of <a>initial letter boxes</a>:
those that arise from non-replaced <a>inline boxes</a>
and those that arise from <a>atomic inlines</a>.
For the non-atomic <dfn lt="inline initial letter | inline initial letter box">inline initial letter</dfn>,
the box and its contents
participate in the same <a>inline formatting context</a>
as the line on which it occurs,
and a lot of special rules apply
to give the expected sizing and alignment.
For an <dfn lt="atomic initial letter | atomic initial letter box">atomic initial letter</dfn>,
however,
which is either a <a>replaced element</a>
or which establishes an <a>independent formatting context</a> for its contents,
the sizing of the box
(aside from its <a>automatic size</a> in the <a>block axis</a>)
and layout of the contents within the box
follows the usual rules:
it is primarily the positioning of the box
which is special.
<h4 id="initial-letter-properties">
Properties Applying to Initial Letters</h4>
All properties that apply to an <a>inline box</a>
also apply to an <a>inline initial letter</a>
except for 'vertical-align' and its <a>sub-properties</a>,
'font-size', 'line-height', 'line-sizing', and 'inline-sizing'.
<!-- Basically, any properties defined in css-inline
except those specific to initial letters,
so keep this list updated as we add things to this spec. -->
Additionally, all of the <a>sizing properties</a>
and 'box-sizing' also apply to <a>initial letters</a>,
(see [[!css-sizing-3]]).