-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathOverview.bs
More file actions
2122 lines (1748 loc) · 76.6 KB
/
Overview.bs
File metadata and controls
2122 lines (1748 loc) · 76.6 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>.
ISSUE: Many aspects of layout here depend on font metrics.
While the relevant metrics exist in OpenType for Latin/Cyrillic/Greek and for CJK,
they are missing for many other writing systems.
For example, the visual top metric for Hebrew has no metric in the OpenType tables.
For this module to work well for the world,
we need fonts to provide the relevant metrics for all writing systems,
and that means both that OpenType needs to allow such metrics
and font designers need to provide accurate numbers.
<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: legacy | normal
Initial: legacy
Applies to: 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.
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>.
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>legacy</dfn>
<dd>
The inline box contributes to the sizing of its line box
based on its 'line-height',
rather than based on its box edges,
as defined in [[!CSS2]].
In Quirks Mode [[!QUIRKS]],
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 when sizing the line box.
Note: In this model, vertical rhythm is broken
any time there is a change in font metrics within a paragraph.
<dt><dfn>normal</dfn>
<dd>
The inline box contributes to the sizing of its line box
based on its <a>margin box</a>,
rather than its 'line-height'.
Half-leading is inserted inside the <a>content box</a> edges,
rather than overlapping the padding/border/margin areas.
However, positive half-leading is only applied to the <a>root inline box</a>.
Negative half-leading is applied to all inline boxes,-
reducing the size of the <a>content box</a> as needed.
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/descent of its descendants.
The line box will grow, however, to accommodate
content that would otherwise overflow,
to avoid overlap between lines.
</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".
<h3 id="leading-trim-property">
Leading Control: the 'leading-trim-over' and 'leading-trim-under' properties and 'leading-trim' shorthand</h3>
ISSUE: This is a rought draft of a proposal,
and is likely to change significantly
as design critiques and use cases are registered.
Values and property names may be added, dropped, and/or renamed,
and the overall syntax or behavior may change.
Do not implement (yet).
The CSSWG particularly invites feedback on
which font metrics need corresponding keyword values.
To ensure consistent spacing in the basic case of running text,
CSS line layout introduces leading both above and below
the text content of each line.
In addition, the ascend and descent font metrics themselves
include extra space above and below the most common glyph sizes
in order to accommodate occasional characters and diacritics
which ascend or descend beyond the typical bounds.
This prevents subsequent lines of text from overlapping each other.
However, all this extra spacing interferes with visual alignment
and with control over effective (visually-apparent) spacing.
The 'leading-trim' properties allow controlling the spacing above and below
the first and last lines of a block.
It allows precise control over spacing;
moreover, by relying on font metrics rather than hard-coded lengths,
it allows content to be resized, rewrapped, and rendered in a variety of fonts
while maintaining that spacing.
<div class="example">
<!-- Example from Weston Thayer in https://github.com/w3c/csswg-drafts/issues/3240#issuecomment-432375650 -->
A common problem is vertical centering.
It's easy to vertically center the text container to an icon,
but because the visual boundaries of Latin text
are the cap height and the alphabetic baseline,
rather than the ascent and descent,
this often doesn't yield the intended visual effect.
<figure>
<img src="images/leading-trim-centering-fail.png"
alt="Consider some Latin text placed to the right of an image,
to be centered between its top and bottom.
Measuring from the top of the image to the top of the text box yields 13px;
likewise measuring from the bottom of the image to the bottom of the text box yelds 13px,
theoretically perfectly centering the text.
However, measuring from the top of the image to the cap-height yields 21px;
and measuring from the bottom to the alphabetic baseline yields 19px,
showing that visually the text is not actually centered.">
<figcaption>
Measuring to the top/bottom of the text may yield equal results,
but measuring to the visual bounds shows that it is not visually centered.
</figcaption>
</figure>
To center the text visually,
it's necessary to asume the cap height and alphabetic baseline
as the top and bottom edges of the text,
respectively.
<figure>
<img src="images/leading-trim-centering-goal.png"
alt="If the text were visually centered,
the distance between the top of the image and the cap height would be 20px,
and the distance between the bottom of the image and the alphabetic baseline would be equally 20px."
style="width: 50%">
<figcaption>
Measuring to the cap height / alphabetic baseline
instead of the ascent / descent
and equalizing those distances
visually centers the text.
</figure>
By using 'leading-trim' to strip out the spacing above the cap height
and below the alphabetic baseline,
centering the box actually centers the text;
and does so reliably, regardless of what font is used to render it.
<figure>
<img src="images/leading-trim-centering-variants.gif"
alt="">
<figcaption>
Even though different fonts have different cap heights,
by using the font's metric rather than a magic number,
the layout intention is met even as the font is changed.
</figcaption>
</figure>
</div>
<pre class="propdef">
Name: leading-trim-over
Value: normal | text | cap | ex | ideographic | ideographic-ink
Initial: normal
Applies to: block containers
Inherited: no
Percentages: N/A
Computed value: the specified keyword
</pre>
The 'leading-trim-over' property trims
the <a>line-over</a> side of the first line box in the block container
to better match the box’s content edge to its text content.
The property affects only the <a>first formatted line</a> of the block container;
if there is no such line, it has no effect.
Values have the following meanings:
<dl dfn-for="leading-trim-over, leading-trim" dfn-type=value>
<dt><dfn>normal</dfn>
<dd>
Half-leading is applied over the first line,
just as for every other line.
<dt><dfn>text</dfn>
<dd>
Half-leading is not applied over the first line;
the top of the line box is set to
the text-top metric
of the root inline box.
<dt><dfn>cap</dfn>
<dd>
Half-leading is not applied over the first line;
the top of the line box is set to
the cap-height metric
of the root inline box.
<dt><dfn>ex</dfn>
<dd>
Half-leading is not applied over the first line;
the top of the line box is set to
the ex-height metric
of the root inline box.
<dt><dfn>ideographic</dfn>
<dd>
Half-leading is not applied over the first line;
the top of the line box is set to
the ideographic top (<code>idtp</code>) metric
of the root inline box.
<dt><dfn>ideographic-ink</dfn>
<dd>
Half-leading is not applied over the first line;
the top of the line box is set to
the ideographic character face top (<code>icft</code>) metric
of the root inline box.
</dl>
<pre class="propdef">
Name: leading-trim-under
Value: normal | text | alphabetic | ideographic | ideographic-ink
Initial: normal
Applies to: block containers
Inherited: yes
Percentages: N/A
Computed value: the specified keyword
</pre>
The 'leading-trim-over' property trims
the <a>line-over</a> side of the first line box in the block container
to better match the box’s content edge to its text content.
The property affects only the <a>first formatted line</a> of the block container;
if there is no such line, it has no effect.
Values have the following meanings:
<dl dfn-for="leading-trim-under" dfn-type=value>
<dt><dfn>normal</dfn>
<dd>
Half-leading is applied over the first line,
just as for every other line.
<dt><dfn>text</dfn>
<dd>
Half-leading is not applied over the first line;
the top of the line box is set to
the text-top metric
of the root inline box.
<dt><dfn>alphabetic</dfn>
<dd>
Half-leading is not applied over the first line;
the top of the line box is set to
the alphabetic baseline metric
of the root inline box.
<dt><dfn>ideographic</dfn>
<dd>
Half-leading is not applied over the first line;
the top of the line box is set to
the ideographic bottom (<code>ideo</code>) metric
of the root inline box.
<dt><dfn>ideographic-ink</dfn>
<dd>
Half-leading is not applied over the first line;
the top of the line box is set to
the ideographic character face top (<code>icfb</code>) metric
of the root inline box.
</dl>
<pre class="propdef">
Name: leading-trim
Value: normal | text | cap | ex | ideographic | ideographic-ink
Initial: normal
Applies to: block containers
Inherited: no
Percentages: N/A
Computed value: the specified keyword
</pre>
This property is a <a>shorthand</a> of 'leading-trim-over' and 'leading-trim-under'.
If ''leading-trim/cap'' or ''leading-trim/ex'' is specified,
'leading-trim-over' is set to that value
and 'leading-trim-under' is set to ''leading-trim-under/alphabetic'';
otherwise both <a>longhands</a> are set to the specified keyword.
<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>
Once the line box has been sized,
the final <a>logical height</a> of the <a>inline box</a>’s <a>content area</a>
is calculated as the <a>stretch fit</a>
into the line box,
and it is 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>