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-001.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</title>
<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
<link rel="match" href="reference/letter-spacing-combining-mark-001-ref.html">
<meta name="assert" content="Letter spacing is inserted between typographic character units. 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, even when the font positions the mark with a GPOS mark-to-base anchor rather than with glyph advances.">
<style>
/* /fonts/mark-anchor-test.ttf positions U+0301 and U+0300 on 'A' with GPOS
mark-to-base anchors. Each glyph is a full-width bar in its own horizontal
band: 'A' is the bottom bar, U+0301 the middle bar, U+0300 the top bar, and
the marks are zero-advance glyphs whose anchors place them directly above
their base. 'B' draws the bottom and middle bars as one glyph and 'C' draws
all three, so a correctly positioned cluster paints exactly what the
reference paints. Letter-spacing that displaces a mark slides that mark's
bar out from over the base's bar instead.
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;
white-space: nowrap;
}
</style>
<p>Test passes if every black bar below is exactly as wide as, and left-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 right 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>