Skip to content

Commit 0a4eb5b

Browse files
frivoalfrivoal
committed
[css-text] Update letter-spacing example to newest spec
See #10193
1 parent 067ad40 commit 0a4eb5b

2 files changed

Lines changed: 74 additions & 62 deletions

File tree

‎css-text-3/Overview.bs‎

Lines changed: 37 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,27 @@ spec:css-ruby-1; type:dfn; text:ruby
113113
padding: 0.25em;
114114
display: table;
115115
}
116+
117+
.ls-ex .letter {
118+
position: relative;
119+
padding: 0 0.5em;
120+
display: inline-block;
121+
}
122+
.ls-ex .letter::before {
123+
content: "";
124+
position: absolute;
125+
border: 1px solid black;
126+
border-bottom: none;
127+
left: 0;
128+
right: 0;
129+
top: 0;
130+
height: 10px;
131+
margin: 0 0.5px;
132+
}
133+
.ls-ex .letter.ls1 { padding: 0 0.5em 0 0.5em; }
134+
.ls-ex .letter.ls2 { padding: 0 1em 0 1em; }
135+
.ls-ex .letter.first { padding-left: 0; }
136+
.ls-ex .letter.last { padding-right: 0; }
116137
</style>
117138

118139
<h2 id="intro">
@@ -6355,49 +6376,35 @@ Tracking: the 'letter-spacing' property</h3>
63556376
letter-spacing/letter-spacing-205.html
63566377
</wpt>
63576378

6358-
<!-- THIS EXAMPLE IS WRONG FIX IT
63596379
<div class="example">
6360-
An inline box is expected to only include
6361-
letter spacing between characters completely contained within that element,
6362-
thus excluding letter spacing on the right or trailing edge of the element:
6380+
As each letter with letter-spacing places
6381+
half of the space assigned to it before
6382+
and half after,
6383+
this adds up to the full amount of spacing between adjacent letters.
6384+
No spacing is added at the start or end of the line.
63636385

63646386
<pre highlight=css>p { letter-spacing: 1em; }</pre>
63656387

6366-
<xmp highlight=html><p>a<span>bb</span>c</p></xmp>
6367-
6368-
<p class="ls-ex good">a&#x3000;<span class="color-box">b&#x3000;b</span>&#x3000;c</p>
6388+
<xmp highlight=html><p>aa<span>bb</span>cc</p></xmp>
63696389

6370-
<p class="ls-ex bad">a&#x3000;<span class="color-box">b&#x3000;b&#x3000;</span>c</p>
6390+
<p class="ls-ex"><span class="letter first ls1">a</span><span class="letter ls1">a</span><span><span class="letter ls1">b</span><span class="letter ls1">b</span></span><span class="letter ls1">c</span><span class="letter ls1 last">c</span></p>
63716391

6372-
Consequently a given value of 'letter-spacing' is expected
6373-
to only affect the spacing between characters
6374-
completely contained within the element for which it is specified:
6392+
When the value varies between adjacent inlines,
6393+
the effective spacing between adjacent letters of different inlines
6394+
amounts to the average between the two.
63756395

63766396
<pre highlight=css>
63776397
p { letter-spacing: 1em; }
63786398
span { letter-spacing: 2em; }
63796399
</pre>
63806400

6381-
<xmp highlight=html><p>a<span>bb</span>c</p></xmp>
6401+
<xmp highlight=html><p>aa<span>bb</span>cc</p></xmp>
63826402

6383-
<p class="ls-ex">a&#x3000;<span class="color-box">b&#x3000;&#x3000;b</span>&#x3000;c</p>
6403+
<p class="ls-ex"><span class="letter first ls1">a</span><span class="letter ls1">a</span><span><span class="letter ls2">b</span><span class="letter ls2">b</span></span><span class="letter ls1">c</span><span class="letter ls1 last">c</span></p>
63846404

6385-
<p>This further implies that applying 'letter-spacing' to
6386-
an element containing only a single character
6387-
has no effect on the rendered result:
6388-
6389-
<pre highlight=css>
6390-
p { letter-spacing: 1em; }
6391-
span { letter-spacing: 2em; }
6392-
</pre>
6393-
6394-
<xmp highlight=html><p>a<span>b</span>c</p></xmp>
6395-
6396-
<p class="ls-ex">a&#x3000;<span class="color-box">b</span>&#X3000;c</p>
6397-
6398-
Since letter spacing is inserted <strong>after</strong> RTL reordering,
6399-
the letter spacing applied to the inner span below likewise has no effect,
6400-
since after reordering the "c" doesn’t end up next to "&#x5d0;":
6405+
Letter spacing is inserted <strong>after</strong> RTL reordering.
6406+
This affects which letter has spacing suppressed on one side
6407+
due to being at the edge of the line.
64016408

64026409
<pre highlight=css>
64036410
p { letter-spacing: 1em; }
@@ -6411,9 +6418,8 @@ Tracking: the 'letter-spacing' property</h3>
64116418
<bdo dir=ltr>&lt;p>ab&lt;span>c&#x5d0;&lt;/span>&#x5d1;&#x5d2;&lt;/p></bdo>
64126419
</pre>
64136420

6414-
<p class="ls-ex">a&#x3000;b&#x3000;<span class="color-box">c</span>&#x3000;<span class="color-box">&#x5d0;</span>&#x3000;&#x5d1;&#x3000;&#x5d2;</p>
6421+
<p class="ls-ex"><span class="letter first ls1">a</span><span class="letter ls1">b</span><span class="letter ls2">c</span><bdi dir=rtl><span class="letter ls2 last">&#x5d0;</span><span class="letter ls1">&#x5d1;</span><span class="letter ls1">&#x5d2;</span></bdi></p>
64156422
</div>
6416-
-->
64176423

64186424
For the purpose of 'letter-spacing',
64196425
each consecutive run of [=atomic inlines=]

‎css-text-4/Overview.bs‎

Lines changed: 37 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,27 @@ spec:selectors-4; type:dfn; text:selector
125125
padding: 0.25em;
126126
display: table;
127127
}
128+
129+
.ls-ex .letter {
130+
position: relative;
131+
padding: 0 0.5em;
132+
display: inline-block;
133+
}
134+
.ls-ex .letter::before {
135+
content: "";
136+
position: absolute;
137+
border: 1px solid black;
138+
border-bottom: none;
139+
left: 0;
140+
right: 0;
141+
top: 0;
142+
height: 10px;
143+
margin: 0 0.5px;
144+
}
145+
.ls-ex .letter.ls1 { padding: 0 0.5em 0 0.5em; }
146+
.ls-ex .letter.ls2 { padding: 0 1em 0 1em; }
147+
.ls-ex .letter.first { padding-left: 0; }
148+
.ls-ex .letter.last { padding-right: 0; }
128149
</style>
129150

130151
<h2 id="intro">
@@ -10203,49 +10224,35 @@ Tracking: the 'letter-spacing' property</h3>
1020310224
letter-spacing/letter-spacing-205.html
1020410225
</wpt>
1020510226

10206-
<!-- THIS EXAMPLE IS WRONG FIX IT
1020710227
<div class="example">
10208-
An inline box is expected to only include
10209-
letter spacing between characters completely contained within that element,
10210-
thus excluding letter spacing on the right or trailing edge of the element:
10228+
As each letter with letter-spacing places
10229+
half of the space assigned to it before
10230+
and half after,
10231+
this adds up to the full amount of spacing between adjacent letters.
10232+
No spacing is added at the start or end of the line.
1021110233

1021210234
<pre highlight=css>p { letter-spacing: 1em; }</pre>
1021310235

10214-
<xmp highlight=html><p>a<span>bb</span>c</p></xmp>
10215-
10216-
<p class="ls-ex good">a&#x3000;<span class="color-box">b&#x3000;b</span>&#x3000;c</p>
10236+
<xmp highlight=html><p>aa<span>bb</span>cc</p></xmp>
1021710237

10218-
<p class="ls-ex bad">a&#x3000;<span class="color-box">b&#x3000;b&#x3000;</span>c</p>
10238+
<p class="ls-ex"><span class="letter first ls1">a</span><span class="letter ls1">a</span><span><span class="letter ls1">b</span><span class="letter ls1">b</span></span><span class="letter ls1">c</span><span class="letter ls1 last">c</span></p>
1021910239

10220-
Consequently a given value of 'letter-spacing' is expected
10221-
to only affect the spacing between characters
10222-
completely contained within the element for which it is specified:
10240+
When the value varies between adjacent inlines,
10241+
the effective spacing between adjacent letters of different inlines
10242+
amounts to the average between the two.
1022310243

1022410244
<pre highlight=css>
1022510245
p { letter-spacing: 1em; }
1022610246
span { letter-spacing: 2em; }
1022710247
</pre>
1022810248

10229-
<xmp highlight=html><p>a<span>bb</span>c</p></xmp>
10249+
<xmp highlight=html><p>aa<span>bb</span>cc</p></xmp>
1023010250

10231-
<p class="ls-ex">a&#x3000;<span class="color-box">b&#x3000;&#x3000;b</span>&#x3000;c</p>
10251+
<p class="ls-ex"><span class="letter first ls1">a</span><span class="letter ls1">a</span><span><span class="letter ls2">b</span><span class="letter ls2">b</span></span><span class="letter ls1">c</span><span class="letter ls1 last">c</span></p>
1023210252

10233-
<p>This further implies that applying 'letter-spacing' to
10234-
an element containing only a single character
10235-
has no effect on the rendered result:
10236-
10237-
<pre highlight=css>
10238-
p { letter-spacing: 1em; }
10239-
span { letter-spacing: 2em; }
10240-
</pre>
10241-
10242-
<xmp highlight=html><p>a<span>b</span>c</p></xmp>
10243-
10244-
<p class="ls-ex">a&#x3000;<span class="color-box">b</span>&#X3000;c</p>
10245-
10246-
Since letter spacing is inserted <strong>after</strong> RTL reordering,
10247-
the letter spacing applied to the inner span below likewise has no effect,
10248-
since after reordering the "c" doesn’t end up next to "&#x5d0;":
10253+
Letter spacing is inserted <strong>after</strong> RTL reordering.
10254+
This affects which letter has spacing suppressed on one side
10255+
due to being at the edge of the line.
1024910256

1025010257
<pre highlight=css>
1025110258
p { letter-spacing: 1em; }
@@ -10259,9 +10266,8 @@ Tracking: the 'letter-spacing' property</h3>
1025910266
<bdo dir=ltr>&lt;p>ab&lt;span>c&#x5d0;&lt;/span>&#x5d1;&#x5d2;&lt;/p></bdo>
1026010267
</pre>
1026110268

10262-
<p class="ls-ex">a&#x3000;b&#x3000;<span class="color-box">c</span>&#x3000;<span class="color-box">&#x5d0;</span>&#x3000;&#x5d1;&#x3000;&#x5d2;</p>
10269+
<p class="ls-ex"><span class="letter first ls1">a</span><span class="letter ls1">b</span><span class="letter ls2">c</span><bdi dir=rtl><span class="letter ls2 last">&#x5d0;</span><span class="letter ls1">&#x5d1;</span><span class="letter ls1">&#x5d2;</span></bdi></p>
1026310270
</div>
10264-
-->
1026510271

1026610272
For the purpose of 'letter-spacing',
1026710273
each consecutive run of [=atomic inlines=]

0 commit comments

Comments
 (0)