Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-text/letter-spacing/letter-spacing-combining-mark-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>CSS Text test: letter-spacing does not separate a combining mark from its base in RTL</title>
<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
<link rel="match" href="reference/letter-spacing-combining-mark-002-ref.html">
<meta name="assert" content="Letter spacing is inserted between typographic character units, in a right-to-left run as much as in a left-to-right one. A grapheme cluster base and the combining marks following it are one typographic character unit, so letter-spacing must neither be inserted inside the cluster nor displace a mark relative to its base.">
<style>
/* The RTL counterpart of letter-spacing-combining-mark-001, on Hebrew bases (a
genuine RTL run rather than a bidi-override, which would skip bidi rule W1):
ALEF is the bottom bar, BET the bottom and middle bars as one glyph, and GIMEL
all three. U+0301 and U+0300 are zero-advance marks anchored above their base
with a GPOS mark-to-base anchor.
Generated by css/css-text/tools/generate-mark-anchor-font.py. */
@font-face {
font-family: "mark-anchor-test";
src: url("/fonts/mark-anchor-test.ttf") format("truetype");
}
div {
font-family: "mark-anchor-test";
font-size: 100px;
line-height: 150px;
/* One em, so a displaced mark lands clear of the base it belongs on. */
letter-spacing: 100px;
direction: rtl;
white-space: nowrap;
}
</style>
<p>Test passes if every black bar below is exactly as wide as, and right-aligned
with, the bars above and below it in the same group — two groups in the
middle row — and no bar is offset to the left of the others.</p>
<!-- One base, one mark. -->
<div>א́</div>
<!-- Two clusters, so any displacement would accumulate across them. -->
<div>א́א́</div>
<!-- Two marks on one base; each takes its position from the same base. -->
<div>א́̀</div>
</html>