Blitz - WPT: letter-spacing-cursive-002.html

wpt / css / css-text / letter-spacing / letter-spacing-cursive-002.html

/css/css-text/letter-spacing/letter-spacing-cursive-002.html

<!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>

/css/css-text/letter-spacing/reference/letter-spacing-cursive-002-ref.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>
CSS Text reference - Letter-spacing should not be applied for Cursive Scripts.
</title>
<style>
div {
  margin: 1em;
  font: 24px serif;
}

.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>
الإبداع<span class=ws> </span>المتجدد
</div>
<br>
<div>
الإبداع<span class=ws> </span>المتجدد
</div>
<br>
</body>
</html>