Skip to content

Commit 7a553b2

Browse files
fantasaifantasai
committed
[css-text-decor-4] Move section
1 parent 79f978b commit 7a553b2

File tree

1 file changed

+86
-79
lines changed

1 file changed

+86
-79
lines changed

‎css-text-decor-4/Overview.bs

Lines changed: 86 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -585,85 +585,6 @@ Text Underline Position: the 'text-underline-position' property</h3>
585585
treated as ''text-underline-position/under''.)
586586
</div>
587587

588-
The exact position and thickness of line decorations is UA-defined in this level.
589-
However, for underlines and overlines
590-
the UA must use a single thickness and position on each line
591-
for the decorations deriving from a single <i>decorating box</i>.
592-
593-
<div class="figure">
594-
<img src="images/underline-single.png"
595-
alt="A single underline drawn under varying font sizes and vertical positions must be a single line.">
596-
vs.
597-
<img src="images/underline-broken.png"
598-
alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect.">
599-
<p class="caption">Correct and incorrect rendering of <code>&lt;u>A&lt;sup>B&lt;/sup>&lt;big>C&lt;/big>D&lt;/u></code>
600-
</div>
601-
602-
<div class="note">
603-
Note, since line decorations can span elements with varying font sizes and
604-
vertical alignments, the best position for a line decoration is not
605-
necessarily the ideal position dictated by the <i>decorating box</i>.
606-
For example, an overline positioned to a small font
607-
will effectively become a line-through if the element contains text in a significantly larger font-size.
608-
Even for underlines, if the text is not aligned to the alphabetic baseline
609-
(for example, in vertical typesetting styles,
610-
text is aligned by its central baseline by default [[CSS-WRITING-MODES-4]])
611-
an underline will cut through descendant text of a larger font-size.
612-
UA consideration of descendant content will therefore result in better typography.
613-
614-
<div class="figure">
615-
<img src="images/leftline-cross.png" alt="">
616-
<img src="images/leftline-under.png" alt="">
617-
<p class="caption">
618-
Due to the central baseline alignment of vertical text,
619-
a left-side underline on small vertical text will cut through the text
620-
of a child with a larger font size.
621-
The underline is not allowed to be broken,
622-
but adjusting its position further to the left
623-
properly accommodates all of the underlined text.
624-
</div>
625-
</div>
626-
627-
UAs <em>must</em> adjust line positions
628-
to match the shifted metrics of <i>decorating boxes</i> shifted
629-
with 'vertical-align' values other than ''vertical-align/baseline'' [[!CSS2]]
630-
or subscripted/superscripted via 'font-variant-position' [[!CSS-FONTS-3]],
631-
but <em>must not</em> adjust the line position or thickness
632-
in response to descendants of a <i>decorating box</i> that are so styled.
633-
This allows superscripts and subscripts to be properly decorated
634-
(underlined, struck through, etc.)
635-
but prevents them from distorting or breaking the positioning of such decorations on their ancestors.
636-
637-
<div class="figure">
638-
<img src="images/underline-superscript.png"
639-
alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript,
640-
whereas an underline for the entire text is drawn at the appropriate position for full-size text.">
641-
<p class="caption">Example of underline applied to <abbr title="element with 'vertical-align' or 'font-variant-position' applied">superscripted text</abbr>
642-
vs. underline applied to <abbr title="element containing an element with 'vertical-align' or 'font-variant-position' applied">text containing a superscript</abbr>
643-
<!-- illustration code, for future alterations
644-
<!DOCTYPE html>
645-
<style>html { font: 2em Sawasdee; } big { font-size: 2em; }</style>
646-
<u><span>A<sup>B</sup><big>C</big>D</span></u>
647-
<u>A</u><sup><u>B</u></sup><big><u>C</u></big><u>D</u>
648-
<u style='font-weight: bold'>1<sup><u>st</u></sup></u>
649-
-->
650-
</div>
651-
652-
Some font formats (such as OpenType) can offer information
653-
about the appropriate position of a line decoration.
654-
The UA should use such information
655-
(such as the underline thickness,
656-
or appropriate alphabetic underline position)
657-
from the font wherever appropriate.
658-
659-
Note: Typically, OpenType font metrics give the position
660-
of an ''text-underline-position/alphabetic'' underline;
661-
in some cases (especially in CJK fonts),
662-
it gives the position of a ''under left'' underline.
663-
(In this case, the font's underline metrics typically
664-
touch the bottom edge of the em box).
665-
The UA may but is not required to correct for incorrect font metrics.
666-
667588
<h3 id="underline-offset">
668589
Text Underline Offset: the 'text-underline-offset' property</h3>
669590

@@ -743,6 +664,92 @@ Text Underline Offset: the 'text-underline-offset' property</h3>
743664
''spelling-error'' or ''grammar-error'',
744665
the UA may ignore the value of 'text-underline-position'.
745666
667+
<h3 id="text-line-constancy">
668+
Text Decoration Line Uniformity</h3>
669+
670+
The exact position and thickness of line decorations
671+
depends on the values of
672+
'text-underline-position', 'text-underline-offset', and 'text-decoration-thickness'
673+
as defined above,
674+
and is otherwise UA-defined.
675+
However, for underlines and overlines
676+
the UA must use a single thickness and position on each line
677+
for the decorations deriving from a single <i>decorating box</i>.
678+
679+
<div class="figure">
680+
<img src="images/underline-single.png"
681+
alt="A single underline drawn under varying font sizes and vertical positions must be a single line.">
682+
vs.
683+
<img src="images/underline-broken.png"
684+
alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect.">
685+
<p class="caption">Correct and incorrect rendering of <code>&lt;u>A&lt;sup>B&lt;/sup>&lt;big>C&lt;/big>D&lt;/u></code>
686+
</div>
687+
688+
<div class="note">
689+
Note, since line decorations can span elements with varying font sizes and
690+
vertical alignments, the best position for a line decoration is not
691+
necessarily the ideal position dictated by the <i>decorating box</i>.
692+
For example, an overline positioned to a small font
693+
will effectively become a line-through if the element contains text in a significantly larger font-size.
694+
Even for underlines, if the text is not aligned to the alphabetic baseline
695+
(for example, in vertical typesetting styles,
696+
text is aligned by its central baseline by default [[CSS-WRITING-MODES-4]])
697+
an underline will cut through descendant text of a larger font-size.
698+
UA consideration of descendant content will therefore result in better typography.
699+
700+
<div class="figure">
701+
<img src="images/leftline-cross.png" alt="">
702+
<img src="images/leftline-under.png" alt="">
703+
<p class="caption">
704+
Due to the central baseline alignment of vertical text,
705+
a left-side underline on small vertical text will cut through the text
706+
of a child with a larger font size.
707+
The underline is not allowed to be broken,
708+
but adjusting its position further to the left
709+
properly accommodates all of the underlined text.
710+
</div>
711+
</div>
712+
713+
UAs <em>must</em> adjust line positions
714+
to match the shifted metrics of <i>decorating boxes</i> shifted
715+
with 'vertical-align' values other than ''vertical-align/baseline'' [[!CSS2]]
716+
or subscripted/superscripted via 'font-variant-position' [[!CSS-FONTS-3]],
717+
but <em>must not</em> adjust the line position or thickness
718+
in response to descendants of a <i>decorating box</i> that are so styled.
719+
This allows superscripts and subscripts to be properly decorated
720+
(underlined, struck through, etc.)
721+
but prevents them from distorting or breaking the positioning of such decorations on their ancestors.
722+
723+
<div class="figure">
724+
<img src="images/underline-superscript.png"
725+
alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript,
726+
whereas an underline for the entire text is drawn at the appropriate position for full-size text.">
727+
<p class="caption">Example of underline applied to <abbr title="element with 'vertical-align' or 'font-variant-position' applied">superscripted text</abbr>
728+
vs. underline applied to <abbr title="element containing an element with 'vertical-align' or 'font-variant-position' applied">text containing a superscript</abbr>
729+
<!-- illustration code, for future alterations
730+
<!DOCTYPE html>
731+
<style>html { font: 2em Sawasdee; } big { font-size: 2em; }</style>
732+
<u><span>A<sup>B</sup><big>C</big>D</span></u>
733+
<u>A</u><sup><u>B</u></sup><big><u>C</u></big><u>D</u>
734+
<u style='font-weight: bold'>1<sup><u>st</u></sup></u>
735+
-->
736+
</div>
737+
738+
Some font formats (such as OpenType) can offer information
739+
about the appropriate position of a line decoration.
740+
The UA should use such information
741+
(such as the underline thickness,
742+
or appropriate alphabetic underline position)
743+
from the font wherever appropriate.
744+
745+
Note: Typically, OpenType font metrics give the position
746+
of an ''text-underline-position/alphabetic'' underline;
747+
in some cases (especially in CJK fonts),
748+
it gives the position of a ''under left'' underline.
749+
(In this case, the font's underline metrics typically
750+
touch the bottom edge of the em box).
751+
The UA may but is not required to correct for incorrect font metrics.
752+
746753
<h3 id="text-decoration-skipping">
747754
Text Decoration Line Continuity</h3>
748755

0 commit comments

Comments
 (0)