blob: 0b0f9b9da21bf44f0735258cf08422c852bf1a30 (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style>
@font-face {
font-family: test;
src: url(../fonts/NotoSansCJKjp-Regular.subset.otf);
}
body {
font-family: test, serif;
line-height: 2em;
}
p {
margin: 1em;
}
span {
display: inline-block;
}
.v {
writing-mode: vertical-rl;
}
.halt {
font-feature-settings: "halt";
/* there are 3 characters in the text that should be affected by 'halt',
so if we add 1.5em of padding, the overall width will be the same */
padding-inline-end: 1.5em;
}
.palt {
font-feature-settings: "palt";
/* 'palt' results in even tighter spacing than 'halt', so we can add a
little more padding and the result should still be obscured by the
overlaid 'halt' span. (We don't try for an exact match as this involves
fractional pixel widths and would be very fragile.) */
padding-inline-end: 1.6em;
}
.vhal {
font-feature-settings: "vhal";
padding-inline-end: 1.5em;
}
.vpal {
font-feature-settings: "vpal";
padding-inline-end: 1.6em;
}
.red {
color: red;
background: red;
}
.green {
color: green;
background: green;
}
.overlay {
position: relative;
inset-block-start: -3em;
}
</style>
</head>
<body>
There should be no red:
<div>
<!-- check that the red 'halt' span is entirely hidden by the green default span -->
<p><span class="halt red">やっほう、「世界」</p>
<p class="overlay"><span class="green">やっほう、「世界」</p>
<!-- check that the red 'palt' span is entirely hidden by the green default span -->
<p><span class="palt red">やっほう、「世界」</p>
<p class="overlay"><span class="green">やっほう、「世界」</p>
</div>
<div class="v">
<!-- check the equivalent vertical-mode features -->
<p><span class="vhal red">やっほう、「世界」</p>
<p class="overlay"><span class="green">やっほう、「世界」</p>
<p><span class="vpal red">やっほう、「世界」</p>
<p class="overlay"><span class="green">やっほう、「世界」</p>
</div>
|
