Files
sousa-gecko/testing/web-platform/tests/css/css-ruby/ruby-overhang-spaces-014-ref.html
T
Minseong Kim 6e4c1eb708 Bug 2038597 [wpt PR 59785] - [ruby-overhang] Support overhang for space, NBSP, other space separator, a=testonly
Automatic update from web-platform-tests
[ruby-overhang] Support overhang for space, NBSP, other space separator

This CL implement support for ruby-overhang: spaces, which allows ruby
annotations to overhang adjacent spaces, including preserved white
space, no-break space (U+00A0), and other space separators.

The implementation sums the widths of consecutive whitespace or control
items surrounding the current ruby column. To prevent annotations from
overlapping with adjacent ruby column, the `end_overhang` is stored in
`InlineItemResultRubyColumn`. The next ruby column uses this value to
avoid overlapping.

This CL also adds new WPTs to verify the behavior across vertical
writing modes, complex case with tabs and ideographic spaces, other
space separators.

Support for overhanging fullwidth opening/closing punctuation and
middle dots will be implemented in a following CL.

There is no behavior change unless the CSSRubyOverhang runtime flag is
enabled.

Spec: https://drafts.csswg.org/css-ruby-1/#ruby-overhang
Bug: 499042741, 366873207
Change-Id: Icfbf52ab5436b554c258daa6510d428f90f602f9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7809406
Commit-Queue: Koji Ishii <kojii@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1628464}

--

wpt-commits: 8577acb6b06659906adeaa6aa81d6a5c93af69ca
wpt-pr: 59785
2026-05-13 04:23:12 +00:00

26 lines
792 B
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<meta charset="UTF-8">
<title>test reference</title>
<style>
ruby {
ruby-overhang: spaces;
ruby-align: center;
}
div {
font-size: 20px;
border-left: 5px solid;
border-right: 5px solid;
width: max-content;
}
.test { border-color: orange; }
.measure { border-color: blue; }
</style>
<body lang="ja">
<p>Test passes if orange and blue lines are aligned.
<div class=test>あ<ruby>   あ   <rt>ああああああ</ruby>あ</div>
<div class=test>あ<ruby>   あ   <rt>ああああああ</ruby>あ</div>
<div class=test>あ<ruby>   あ   <rt>ああああああ</ruby>あ</div>
<div class=test>あ<ruby>   あ   <rt>ああああああ</ruby>あ</div>
<div class=measure>あ   あ   あ</div>
</body>