Skip to content

Commit 88b332f

Browse files
fantasaifantasai
committed
[css-inline-3] Draft up leading-trim. #3240 
1 parent 8e8d8c6 commit 88b332f

File tree

1 file changed

+229
-0
lines changed

1 file changed

+229
-0
lines changed

‎css-inline-3/Overview.bs

+229
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,15 @@ Introduction</h2>
5050
are <a>fragmentation containers</a> generated by their <a>formatting context</a>
5151
and are not part of the CSS <a>box tree</a>.
5252

53+
ISSUE: Many aspects of layout here depend on font metrics.
54+
While the relevant metrics exist in OpenType for Latin/Cyrillic/Greek and for CJK,
55+
they are missing for many other writing systems.
56+
For example, the visual top metric for Hebrew has no metric in the OpenType tables.
57+
For this module to work well for the world,
58+
we need fonts to provide the relevant metrics for all writing systems,
59+
and that means both that OpenType needs to allow such metrics
60+
and font designers need to provide accurate numbers.
61+
5362
<h2 id="line-height">
5463
Line Heights and Baseline Alignment</h2>
5564

@@ -385,6 +394,223 @@ Line Sizing Containment: the 'line-sizing' property</h3>
385394
In the latter case, an individual inline could say "pay attention to me"
386395
or "don't pay attention to me".
387396

397+
<h3 id="leading-trim-property">
398+
Leading Control: the 'leading-trim-over' and 'leading-trim-under' properties and 'leading-trim' shorthand</h3>
399+
400+
ISSUE: This is a rought draft of a proposal,
401+
and is likely to change significantly
402+
as design critiques and use cases are registered.
403+
Values and property names may be added, dropped, and/or renamed,
404+
and the overall syntax or behavior may change.
405+
Do not implement (yet).
406+
The CSSWG particularly invites feedback on
407+
which font metrics need corresponding keyword values.
408+
409+
To ensure consistent spacing in the basic case of running text,
410+
CSS line layout introduces leading both above and below
411+
the text content of each line.
412+
In addition, the ascend and descent font metrics themselves
413+
include extra space above and below the most common glyph sizes
414+
in order to accommodate occasional characters and diacritics
415+
which ascend or descend beyond the typical bounds.
416+
This prevents subsequent lines of text from overlapping each other.
417+
However, all this extra spacing interferes with visual alignment
418+
and with control over effective (visually-apparent) spacing.
419+
420+
The 'leading-trim' properties allow controlling the spacing above and below
421+
the first and last lines of a block.
422+
It allows precise control over spacing;
423+
moreover, by relying on font metrics rather than hard-coded lengths,
424+
it allows content to be resized, rewrapped, and rendered in a variety of fonts
425+
while maintaining that spacing.
426+
427+
<div class="example">
428+
<!-- Example from Weston Thayer in https://github.com/w3c/csswg-drafts/issues/3240#issuecomment-432375650 -->
429+
430+
A common problem is vertical centering.
431+
It's easy to vertically center the text container to an icon,
432+
but because the visual boundaries of Latin text
433+
are the cap height and the alphabetic baseline,
434+
rather than the ascent and descent,
435+
this often doesn't yield the intended visual effect.
436+
437+
<figure>
438+
<img src="images/leading-trim-centering-fail.png"
439+
alt="Consider some Latin text placed to the right of an image,
440+
to be centered between its top and bottom.
441+
Measuring from the top of the image to the top of the text box yields 13px;
442+
likewise measuring from the bottom of the image to the bottom of the text box yelds 13px,
443+
theoretically perfectly centering the text.
444+
However, measuring from the top of the image to the cap-height yields 21px;
445+
and measuring from the bottom to the alphabetic baseline yields 19px,
446+
showing that visually the text is not actually centered.">
447+
<figcaption>
448+
Measuring to the top/bottom of the text may yield equal results,
449+
but measuring to the visual bounds shows that it is not visually centered.
450+
</figcaption>
451+
</figure>
452+
453+
To center the text visually,
454+
it's necessary to asume the cap height and alphabetic baseline
455+
as the top and bottom edges of the text,
456+
respectively.
457+
458+
<figure>
459+
<img src="images/leading-trim-centering-goal.png"
460+
alt="If the text were visually centered,
461+
the distance between the top of the image and the cap height would be 20px,
462+
and the distance between the bottom of the image and the alphabetic baseline would be equally 20px."
463+
style="width: 50%">
464+
<figcaption>
465+
Measuring to the cap height / alphabetic baseline
466+
instead of the ascent / descent
467+
and equalizing those distances
468+
visually centers the text.
469+
</figure>
470+
471+
By using 'leading-trim' to strip out the spacing above the cap height
472+
and below the alphabetic baseline,
473+
centering the box actually centers the text;
474+
and does so reliably, regardless of what font is used to render it.
475+
476+
<figure>
477+
<img src="images/leading-trim-centering-variants.gif"
478+
alt="">
479+
<figcaption>
480+
Even though different fonts have different cap heights,
481+
by using the font's metric rather than a magic number,
482+
the layout intention is met even as the font is changed.
483+
</figcaption>
484+
</figure>
485+
</div>
486+
487+
<pre class="propdef">
488+
Name: leading-trim-over
489+
Value: normal | text | cap | ex | ideographic | ideographic-ink
490+
Initial: normal
491+
Applies to: block containers
492+
Inherited: no
493+
Percentages: N/A
494+
Computed value: the specified keyword
495+
</pre>
496+
497+
The 'leading-trim-over' property trims
498+
the <a>line-over</a> side of the first line box in the block container
499+
to better match the box’s content edge to its text content.
500+
The property affects only the <a>first formatted line</a> of the block container;
501+
if there is no such line, it has no effect.
502+
Values have the following meanings:
503+
504+
<dl dfn-for="leading-trim-over, leading-trim" dfn-type=value>
505+
<dt><dfn>normal</dfn>
506+
<dd>
507+
Half-leading is applied over the first line,
508+
just as for every other line.
509+
510+
<dt><dfn>text</dfn>
511+
<dd>
512+
Half-leading is not applied over the first line;
513+
the top of the line box is set to
514+
the text-top metric
515+
of the root inline box.
516+
517+
<dt><dfn>cap</dfn>
518+
<dd>
519+
Half-leading is not applied over the first line;
520+
the top of the line box is set to
521+
the cap-height metric
522+
of the root inline box.
523+
524+
<dt><dfn>ex</dfn>
525+
<dd>
526+
Half-leading is not applied over the first line;
527+
the top of the line box is set to
528+
the ex-height metric
529+
of the root inline box.
530+
531+
<dt><dfn>ideographic</dfn>
532+
<dd>
533+
Half-leading is not applied over the first line;
534+
the top of the line box is set to
535+
the ideographic top (<code>idtp</code>) metric
536+
of the root inline box.
537+
538+
<dt><dfn>ideographic-ink</dfn>
539+
<dd>
540+
Half-leading is not applied over the first line;
541+
the top of the line box is set to
542+
the ideographic character face top (<code>icft</code>) metric
543+
of the root inline box.
544+
</dl>
545+
546+
<pre class="propdef">
547+
Name: leading-trim-under
548+
Value: normal | text | alphabetic | ideographic | ideographic-ink
549+
Initial: normal
550+
Applies to: block containers
551+
Inherited: yes
552+
Percentages: N/A
553+
Computed value: the specified keyword
554+
</pre>
555+
556+
The 'leading-trim-over' property trims
557+
the <a>line-over</a> side of the first line box in the block container
558+
to better match the box’s content edge to its text content.
559+
The property affects only the <a>first formatted line</a> of the block container;
560+
if there is no such line, it has no effect.
561+
Values have the following meanings:
562+
563+
<dl dfn-for="leading-trim-under" dfn-type=value>
564+
<dt><dfn>normal</dfn>
565+
<dd>
566+
Half-leading is applied over the first line,
567+
just as for every other line.
568+
569+
<dt><dfn>text</dfn>
570+
<dd>
571+
Half-leading is not applied over the first line;
572+
the top of the line box is set to
573+
the text-top metric
574+
of the root inline box.
575+
576+
<dt><dfn>alphabetic</dfn>
577+
<dd>
578+
Half-leading is not applied over the first line;
579+
the top of the line box is set to
580+
the alphabetic baseline metric
581+
of the root inline box.
582+
583+
<dt><dfn>ideographic</dfn>
584+
<dd>
585+
Half-leading is not applied over the first line;
586+
the top of the line box is set to
587+
the ideographic bottom (<code>ideo</code>) metric
588+
of the root inline box.
589+
590+
<dt><dfn>ideographic-ink</dfn>
591+
<dd>
592+
Half-leading is not applied over the first line;
593+
the top of the line box is set to
594+
the ideographic character face top (<code>icfb</code>) metric
595+
of the root inline box.
596+
</dl>
597+
598+
<pre class="propdef">
599+
Name: leading-trim
600+
Value: normal | text | cap | ex | ideographic | ideographic-ink
601+
Initial: normal
602+
Applies to: block containers
603+
Inherited: no
604+
Percentages: N/A
605+
Computed value: the specified keyword
606+
</pre>
607+
608+
This property is a <a>shorthand</a> of 'leading-trim-over' and 'leading-trim-under'.
609+
If ''leading-trim/cap'' or ''leading-trim/ex'' is specified,
610+
'leading-trim-over' is set to that value
611+
and 'leading-trim-under' is set to ''leading-trim-under/alphabetic'';
612+
otherwise both <a>longhands</a> are set to the specified keyword.
613+
388614
<h2 id="inline-box-dimensions">
389615
Drawing Inline Boxes</h2>
390616

@@ -1883,11 +2109,14 @@ Acknowledgments</h2>
18832109
Stephen Deach,
18842110
Sylvain Galineau,
18852111
David Hyatt,
2112+
Myles Maxfield,
18862113
Shinyu Murakami,
2114+
Jan Nicklas,
18872115
Tess O’Connor,
18882116
Sujal Parikh,
18892117
Florian Rivoal,
18902118
Alan Stearns,
2119+
Weston Thayer,
18912120
Bobby Tung,
18922121
Chris Wilson,
18932122
Grzegorz Zygmunt.

0 commit comments

Comments
 (0)