wpt/css/css-text/letter-spacing/letter-spacing-cursive-002.html at 8e25c28d31ed5d7eb036c5c809ae0b175dd9b8df · web-platform-tests/wpt · GitHub

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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>
CSS Text Test - Letter-spacing should not be applied for Cursive Scripts.
</title>

<link rel="help" href="https://drafts.csswg.org/css-text-4/#cursive-tracking">
<link rel="help" href="https://drafts.csswg.org/css-text-4/#example-9902d8b5">
<link rel="match" href="reference/letter-spacing-cursive-002-ref.html">
<meta name="assert" content="Suppress letter-spacing between Arabic letters.
Letter-spacing is nonetheless applied to non-Arabic characters (like spaces).">

<style>
div {
  margin: 1em;
  font: 24px serif;
}

.letterspace {
  letter-spacing: 1em; /* Does not affect Arabic text, but does affect the space */
}

.ws {
  white-space: pre;
}
.ws::after { /* Fake letter-spacing for the space only */
  content: ' ';
  display: inline-block;
  width: 1em;
}
</style>
</head>
<body>
<p>
Both Arabic texts should display identically.
</p>
<div class=letterspace>
الإبداع المتجدد
</div>
<br>
<div>
الإبداع<span class=ws> </span>المتجدد
</div>
<br>
</body>
</html>