Ruby: Fix annotation overhang overlap

If the width of a text item between overhanging ruby columns was shorter than total overhang amount from both ruby columns, ruby annotations were overlapped. To avoid this issue, we limit available size for overhang to a half of the text item width. Fixed: 329776386 Change-Id: I1d2724fcf288e951f59de7fbd4a2ffba1223e052 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6108639 Reviewed-by: Koji Ishii <kojii@chromium.org> Auto-Submit: Kent Tamura <tkent@chromium.org> Commit-Queue: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/main@{#1399053}
web-platform-tests · Dec 20, 2024 · bd74372 · bd74372
1 parent 44c2b3b
commit bd74372
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/css/css-ruby/ruby-overhang-no-overlap.html b/css/css-ruby/ruby-overhang-no-overlap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://crbug.com/329776386">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+p {
+  font-size: 10px;
+}
+ruby {
+  font-size: 40px;
+}
+</style>
+
+<p>
+<ruby>安<rt>ān</rt></ruby>〓<ruby>装<rt>zhuāng</rt></ruby>〓<ruby>窗<rt>chuāng</rt></ruby>〓<ruby>户<rt>hù</rt></ruby>
+</p>
+
+<script>
+test(() => {
+  const rts = document.querySelectorAll('rt');
+  const bounds2 = rts[1].getBoundingClientRect();
+  const bounds3 = rts[2].getBoundingClientRect();
+  assert_less_than_equal(Math.round(bounds2.right), Math.round(bounds3.left));
+}, "Annotations should not be overlapped");
+</script>