Skip to content

Commit 95ba24d

Browse files
fantasaifantasai
committed
[css-inline] MOve some examples.
1 parent 422ceb8 commit 95ba24d

2 files changed

Lines changed: 74 additions & 109 deletions

File tree

‎css-inline/Overview.bs‎

Lines changed: 32 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -269,13 +269,6 @@ The alignment constraints for drop initials depend on the writing system. In ide
269269
<p class="caption">Two-line drop initial in vertical writing mode</p>
270270
</figure>
271271

272-
<figure>
273-
<img src="images/CJK-Initial.001.png" width="480" alt="Diagram of Japanese initial letter in vertical writing mode"/>
274-
<p class="caption">Diagram of Japanese initial letter in vertical writing mode</p>
275-
</figure>
276-
277-
Note: In some cases, the exclusion area for the drop initial is larger than its glyph in order to preserve inline-axis alignment. This effect is out-of-scope for this level. However, extra spacing can still be given using margins.
278-
279272
In some Indic scripts, the top alignment point
280273
is the hanging baseline,
281274
and the bottom alignment point is the text-after-edge.
@@ -585,12 +578,12 @@ However, if the <a>initial letter</a> is a non-atomic inline with zero padding a
585578

586579

587580
<h3 id="initial-letter-wrapping">
588-
Initial Letter Wrapping</h3>
581+
Initial Letter Wrapping: the 'initial-letter-wrap' property</h3>
589582

590583
<pre class="propdef">
591584
Name: <dfn id="propdef-initial-letter-wrap">initial-letter-wrap</dfn>
592585
Value: none | first | all | auto | grid
593-
Initial: auto
586+
Initial: none
594587
Applies to: <code>::first-letter</code> pseudo-elements and inline-level first child of a block container
595588
Inherited: yes
596589
Percentages: N/A
@@ -608,35 +601,34 @@ or follow the contour of its end-edge glyph outline.
608601
each impacted line is aligned flush to the end margin edge of the <a>initial letter</a>.</dd>
609602

610603
<dt><dfn>first</dfn>
611-
<dd>Behaves as for ''all'' on the first line of the block containing the initial letter and as ''none'' on the rest.</dd>
604+
<dd>Behaves as ''none'' if
605+
the first <a>typographic character unit</a> after the <a>initial letter</a>
606+
belongs to Unicode General Category Zs.
607+
Otherwise behaves as for ''all'' on the first line of the block containing the initial letter
608+
and as ''none'' on the rest.
609+
610+
<div class="example">
611+
This example shows why the contour-fitting the first line is necessary,
612+
and why it is dropped when the <a>initial letter</a> is followed by a space:
613+
<figure>
614+
<img src="images/OpticalKerning.png" alt="optical kerning in the presence or absence of a space after the initial letter" width="200"/>
615+
<p class="caption">
616+
In the top paragraph, the initial letter "A" has a word space after it:
617+
the gap between the top of the "A" and the next letter provides the necessary word separation.
618+
In the next paragraph, the initial letter "A" is part of the first word,
619+
and leaving a gap between the top of the "A" and the next letter would create a jarring visual break within the word.
620+
In this case, the first line of text should be kerned into the initial letter's area, as shown in the bottom paragraph.
621+
</figure>
622+
</div>
623+
624+
Issue: Do we need an unconditional ''first''?
625+
(I.e. Should we rename this value to ''auto'' and add a ''first'' value that does not check for spaces?)
612626

613627
<dt><dfn>all</dfn></dt>
614628
<dd>For each line of text impacted by the initial letter, the line box adjacent to the intial letter starts at the start-most point that touches the ink of the initial letter, plus the amount of the <a>initial letter</a>’s end-side border+padding+margin.</dd>
615629

616630
This value is at-risk.
617631

618-
<dt><dfn>auto</dfn>
619-
<dd>Behaves as ''none'' if
620-
the <a>initial letter</a>’s end-side padding or margin is nonzero <em>or</em>
621-
the first <a>typographic character unit</a> after the <a>initial letter</a> belongs to Unicode General Category Zs <em>or</em>
622-
the last <a>typographic character unit</a> of the <a>initial letter</a>
623-
<ul>
624-
<li>belongs to the Symbols <a>Unicode General Category</a> (<code>S</code>)
625-
<li>has an East Asian Width property of <code>Wide</code> or <code>Fullwidth</code>
626-
<li>belongs to a script that is commonly used without spaces between words.
627-
(Such scripts include:
628-
Cham,
629-
Han,
630-
Khmer,
631-
Lao,
632-
Thai,
633-
Yi
634-
)
635-
</ul>
636-
Behaves as ''first'' otherwise.
637-
638-
Issue: Do we want to make this script-dependent?
639-
640632
<dt><dfn>grid</dfn>
641633
<dd>This value is the same as ''none'',
642634
except that the exclusion area of the impacted lines
@@ -651,21 +643,17 @@ as specified by the 'initial-letter' property,
651643
and 1em represents the typical character advance width for ideographic characters
652644
(and may be replaced by a more accurate value if known).
653645

654-
This value is also at-risk.
655-
</dl>
656-
657-
658-
Issue: Do we need anything else for scripts where this behavior is undesirable? Or is default "none" sufficient?
659-
660-
661-
Note: If the next character after the initial letter is a whitespace character, auto and first compute to none, in order to avoid the initial letter appearing to be part of the subsequent word.
662-
663-
664646
<figure>
665-
<img src="images/OpticalKerning.png" alt="optical kerning in the presence or absence of a space after the initial letter" width="200"/>
666-
<p class="caption">In the top paragraph, the initial letter "A" has a word space after it. In the middle paragraph, the initial letter "A" is part of a word. In this case, the first line of text should be kerned into the initial letter's area as shown in the bottom paragraph.</p>
647+
<img src="images/CJK-Initial.001.png" width="480" alt="Diagram of Japanese initial letter in vertical writing mode"/>
648+
<p class="caption">Diagram of Japanese initial letter in vertical writing mode</p>
667649
</figure>
668650

651+
Note: In this example, the exclusion area for the drop initial
652+
is larger than its glyph in order to preserve inline-axis alignment.
653+
654+
This value is also at-risk.
655+
</dl>
656+
669657
Issue: Edit figure to show how auto behaves in varying contexts
670658

671659

‎css-inline/Overview.html‎

Lines changed: 42 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
232232
<li><a href="#initial-letter-position"><span class="secno">2.9</span> <span class="content">
233233
Positioning and Kerning Initial Letters</span></a>
234234
<li><a href="#initial-letter-wrapping"><span class="secno">2.10</span> <span class="content">
235-
Initial Letter Wrapping</span></a>
235+
Initial Letter Wrapping: the <span class="property">initial-letter-wrap</span> property</span></a>
236236
<li><a href="#initial-letter-paragraphs"><span class="secno">2.11</span> <span class="content">
237237
Clearing Initial Letters</span></a>
238238
<ul class="toc">
@@ -688,16 +688,6 @@ <h4 class="heading settled" data-level="2.1.1" id="drop-initial"><span class="se
688688
</figure>
689689

690690

691-
<figure>
692-
<img alt="Diagram of Japanese initial letter in vertical writing mode" src="images/CJK-Initial.001.png" width="480">
693-
694-
<p class="caption">Diagram of Japanese initial letter in vertical writing mode</p>
695-
</figure>
696-
697-
698-
<p class="note" role="note">Note: In some cases, the exclusion area for the drop initial is larger than its glyph in order to preserve inline-axis alignment. This effect is out-of-scope for this level. However, extra spacing can still be given using margins.</p>
699-
700-
701691
<p>In some Indic scripts, the top alignment point
702692
is the hanging baseline,
703693
and the bottom alignment point is the text-after-edge.</p>
@@ -1120,7 +1110,7 @@ <h3 class="heading settled" data-level="2.9" id="initial-letter-position"><span
11201110

11211111

11221112
<h3 class="heading settled" data-level="2.10" id="initial-letter-wrapping"><span class="secno">2.10. </span><span class="content">
1123-
Initial Letter Wrapping</span><a class="self-link" href="#initial-letter-wrapping"></a></h3>
1113+
Initial Letter Wrapping: the <a class="property" data-link-type="propdesc" href="#propdef-initial-letter-wrap">initial-letter-wrap</a> property</span><a class="self-link" href="#initial-letter-wrapping"></a></h3>
11241114

11251115

11261116
<table class="definition propdef" data-link-for-hint="<dfn id=&quot;propdef-initial-letter-wrap&quot;>initial-letter-wrap</dfn>">
@@ -1133,7 +1123,7 @@ <h3 class="heading settled" data-level="2.10" id="initial-letter-wrapping"><span
11331123
<td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> first <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> all <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> grid
11341124
<tr>
11351125
<th>Initial:
1136-
<td>auto
1126+
<td>none
11371127
<tr>
11381128
<th>Applies to:
11391129
<td><code>::first-letter</code> pseudo-elements and inline-level first child of a block container
@@ -1169,44 +1159,41 @@ <h3 class="heading settled" data-level="2.10" id="initial-letter-wrapping"><span
11691159

11701160
<dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-first">first<a class="self-link" href="#valdef-initial-letter-wrap-first"></a></dfn>
11711161

1172-
<dd>Behaves as for <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-all">all</a> on the first line of the block containing the initial letter and as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-none">none</a> on the rest.
1173-
1174-
1175-
<dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-all">all<a class="self-link" href="#valdef-initial-letter-wrap-all"></a></dfn>
1162+
<dd>Behaves as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-none">none</a> if
1163+
the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">typographic character unit</a> after the <a data-link-type="dfn" href="#initial-letter">initial letter</a>
1164+
belongs to Unicode General Category Zs.
1165+
Otherwise behaves as for <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-all">all</a> on the first line of the block containing the initial letter
1166+
and as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-none">none</a> on the rest.
11761167

1177-
<dd>For each line of text impacted by the initial letter, the line box adjacent to the intial letter starts at the start-most point that touches the ink of the initial letter, plus the amount of the <a data-link-type="dfn" href="#initial-letter">initial letter</a>’s end-side border+padding+margin.
11781168

1169+
<div class="example" id="example-cdb7c78e"><a class="self-link" href="#example-cdb7c78e"></a>
1170+
This example shows why the contour-fitting the first line is necessary,
1171+
and why it is dropped when the <a data-link-type="dfn" href="#initial-letter">initial letter</a> is followed by a space:
1172+
1173+
<figure>
1174+
<img alt="optical kerning in the presence or absence of a space after the initial letter" src="images/OpticalKerning.png" width="200">
1175+
1176+
<p class="caption">
1177+
In the top paragraph, the initial letter "A" has a word space after it:
1178+
the gap between the top of the "A" and the next letter provides the necessary word separation.
1179+
In the next paragraph, the initial letter "A" is part of the first word,
1180+
and leaving a gap between the top of the "A" and the next letter would create a jarring visual break within the word.
1181+
In this case, the first line of text should be kerned into the initial letter’s area, as shown in the bottom paragraph.
1182+
</p>
1183+
</figure>
1184+
</div>
11791185

1180-
<p>This value is at-risk.</p>
11811186

1187+
<p class="issue" id="issue-a826765c"><a class="self-link" href="#issue-a826765c"></a> Do we need an unconditional <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a>?
1188+
(I.e. Should we rename this value to <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-auto">auto</a> and add a <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a> value that does not check for spaces?)</p>
11821189

1183-
<dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-auto">auto<a class="self-link" href="#valdef-initial-letter-wrap-auto"></a></dfn>
11841190

1185-
<dd>Behaves as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-none">none</a> if
1186-
the <a data-link-type="dfn" href="#initial-letter">initial letter</a>’s end-side padding or margin is nonzero <em>or</em>
1187-
the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">typographic character unit</a> after the <a data-link-type="dfn" href="#initial-letter">initial letter</a> belongs to Unicode General Category Zs <em>or</em>
1188-
the last <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">typographic character unit</a> of the <a data-link-type="dfn" href="#initial-letter">initial letter</a>
1191+
<dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-all">all<a class="self-link" href="#valdef-initial-letter-wrap-all"></a></dfn>
11891192

1190-
<ul>
1191-
1192-
<li>belongs to the Symbols <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#unicode-general-category">Unicode General Category</a> (<code>S</code>)
1193-
1194-
<li>has an East Asian Width property of <code>Wide</code> or <code>Fullwidth</code>
1195-
1196-
<li>belongs to a script that is commonly used without spaces between words.
1197-
(Such scripts include:
1198-
Cham,
1199-
Han,
1200-
Khmer,
1201-
Lao,
1202-
Thai,
1203-
Yi
1204-
)
1205-
</ul>
1206-
Behaves as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a> otherwise.
1193+
<dd>For each line of text impacted by the initial letter, the line box adjacent to the intial letter starts at the start-most point that touches the ink of the initial letter, plus the amount of the <a data-link-type="dfn" href="#initial-letter">initial letter</a>’s end-side border+padding+margin.
12071194

12081195

1209-
<p class="issue" id="issue-36a8e5f0"><a class="self-link" href="#issue-36a8e5f0"></a> Do we want to make this script-dependent?</p>
1196+
<p>This value is at-risk.</p>
12101197

12111198

12121199
<dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-grid">grid<a class="self-link" href="#valdef-initial-letter-wrap-grid"></a></dfn>
@@ -1226,24 +1213,19 @@ <h3 class="heading settled" data-level="2.10" id="initial-letter-wrapping"><span
12261213
(and may be replaced by a more accurate value if known).</p>
12271214

12281215

1229-
<p>This value is also at-risk.</p>
1230-
</dl>
1231-
1232-
1233-
1234-
<p class="issue" id="issue-d0eaa352"><a class="self-link" href="#issue-d0eaa352"></a> Do we need anything else for scripts where this behavior is undesirable? Or is default "none" sufficient?</p>
1235-
1236-
1237-
1238-
<p class="note" role="note">Note: If the next character after the initial letter is a whitespace character, auto and first compute to none, in order to avoid the initial letter appearing to be part of the subsequent word.</p>
1216+
<figure>
1217+
<img alt="Diagram of Japanese initial letter in vertical writing mode" src="images/CJK-Initial.001.png" width="480">
1218+
1219+
<p class="caption">Diagram of Japanese initial letter in vertical writing mode</p>
1220+
</figure>
12391221

12401222

1223+
<p class="note" role="note">Note: In this example, the exclusion area for the drop initial
1224+
is larger than its glyph in order to preserve inline-axis alignment.</p>
12411225

1242-
<figure>
1243-
<img alt="optical kerning in the presence or absence of a space after the initial letter" src="images/OpticalKerning.png" width="200">
12441226

1245-
<p class="caption">In the top paragraph, the initial letter "A" has a word space after it. In the middle paragraph, the initial letter "A" is part of a word. In this case, the first line of text should be kerned into the initial letter’s area as shown in the bottom paragraph.</p>
1246-
</figure>
1227+
<p>This value is also at-risk.</p>
1228+
</dl>
12471229

12481230

12491231
<p class="issue" id="issue-c4ff3304"><a class="self-link" href="#issue-c4ff3304"></a> Edit figure to show how auto behaves in varying contexts</p>
@@ -1582,11 +1564,7 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
15821564
<li><a href="#valdef-dominant-baseline-alphabetic">value for dominant-baseline</a><span>, in §1.1</span>
15831565
<li><a href="#valdef-alignment-baseline-alphabetic">value for alignment-baseline</a><span>, in §1.2.1</span>
15841566
</ul>
1585-
<li>auto
1586-
<ul>
1587-
<li><a href="#valdef-dominant-baseline-auto">value for dominant-baseline</a><span>, in §1.1</span>
1588-
<li><a href="#valdef-initial-letter-wrap-auto">value for initial-letter-wrap</a><span>, in §2.10</span>
1589-
</ul>
1567+
<li><a href="#valdef-dominant-baseline-auto">auto</a><span>, in §1.1</span>
15901568
<li>baseline
15911569
<ul>
15921570
<li><a href="#valdef-alignment-baseline-baseline">value for alignment-baseline</a><span>, in §1.2.1</span>
@@ -1654,7 +1632,6 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
16541632
<li><a href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing">letter-spacing</a>
16551633
<li><a href="https://drafts.csswg.org/css-text-3/#propdef-text-indent">text-indent</a>
16561634
<li><a href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">typographic character unit</a>
1657-
<li><a href="https://drafts.csswg.org/css-text-3/#unicode-general-category">unicode general category</a>
16581635
</ul>
16591636
<li><a data-link-type="biblio" href="#biblio-css-values-3">[css-values]</a> defines the following terms:
16601637
<ul>
@@ -1795,7 +1772,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
17951772
<tr>
17961773
<th scope="row"><a class="css" data-link-type="property" href="#propdef-initial-letter-wrap">initial-letter-wrap</a>
17971774
<td>none | first | all | auto | grid
1798-
<td>auto
1775+
<td>none
17991776
<td>::first-letter pseudo-elements and inline-level first child of a block container
18001777
<td>yes
18011778
<td>N/A
@@ -1814,8 +1791,8 @@ <h2 class="no-num heading settled" id="issues-index"><span class="content">Issue
18141791
<div class="issue"> Define interaction with Ruby. Easiest is to make it not apply to/within ruby.<a href="#issue-664624cd"> ↵ </a></div>
18151792
<div class="issue">Input from those knowledgeable about non-Western typographic traditions would be very helpful in describing the appropriate alignments. More values may be required for this property.<a href="#issue-209367a3"> ↵ </a></div>
18161793
<div class="issue"> Are there other things we need to consider here?<a href="#issue-bef56215"> ↵ </a></div>
1817-
<div class="issue"> Do we want to make this script-dependent?<a href="#issue-36a8e5f0"> ↵ </a></div>
1818-
<div class="issue"> Do we need anything else for scripts where this behavior is undesirable? Or is default "none" sufficient?<a href="#issue-d0eaa352"> ↵ </a></div>
1794+
<div class="issue"> Do we need an unconditional <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a>?
1795+
(I.e. Should we rename this value to <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-auto">auto</a> and add a <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a> value that does not check for spaces?)<a href="#issue-a826765c"> ↵ </a></div>
18191796
<div class="issue"> Edit figure to show how auto behaves in varying contexts<a href="#issue-c4ff3304"> ↵ </a></div>
18201797
<div class="issue"> Handle glyph ink above cap height of font.<a href="#issue-f77cbeb9"> ↵ </a></div>
18211798
<div class="issue"> Is this the behavior we want? What if the float is on the same line as the initial letter?<a href="#issue-2ad0a0cb"> ↵ </a></div>

0 commit comments

Comments
 (0)