Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html-ruby-extensions/html-ruby-403.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html lang="en" >
<meta charset="utf-8">
<title>Ruby Markup Content Model: single ruby element, anonymous bases, interleaved markup, annotation with rtc, adding rp in all the places where it's allowed by the content model, as well as some where it's not.</title>
<!-- Even then, the spec states that Ruby Segmentation and Pairing occurs ignoring rp elements, without limiting itself to validly placed rp elements. -->
<!-- Same markup pattern as -303 -->
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-ruby-element">
<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rtc-element">
<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rp-element">
<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#ruby-pairing">
<link rel="mismatch" href="reference/html-ruby-001-a-ref.html">
<link rel="mismatch" href="reference/html-ruby-001-b-ref.html">
<link rel="mismatch" href="reference/html-ruby-001-c-ref.html">
<link rel="mismatch" href="reference/html-ruby-001-d-ref.html">
<link rel="mismatch" href="reference/html-ruby-001-e-ref.html">
<link rel="mismatch" href="reference/html-ruby-001-f-ref.html">
<link rel="mismatch" href="reference/html-ruby-001-g-ref.html">
<link rel="mismatch" href="reference/html-ruby-001-h-ref.html">
<link rel="mismatch" href="reference/html-ruby-001-y-ref.html">
<link rel="mismatch" href="reference/html-ruby-001-z-ref.html">
<style>
.r1 { color: orange; }
.r2 { color: blue; }
.r3 { color: purple; }
ruby { ruby-merge: separate; } /* Not strictly required, but added just in case some user agent otherwise has a jukugo-like default rendering. */
</style>
<body>
<p>The example below consists of 3 base characters, each annotated with its pronunciation.
“<span class=r1>浄</span>” is annotated by “<span class=r1>じょう</span>”.
“<span class=r2>瑠</span>” is annotated by “<span class=r2>る</span>”.
“<span class=r3>璃</span>” is annotated by “<span class=r3>り</span>”.
For ease of comparison, it is preceded by some context text: “例文は”.
This test passes if:
<ul>
<li>each base character is presented inline with and similarly to the context text, as if they are all part of the same sentence, and
<li>each annotation is presented as an annotation, and
<li>the correct annotation is presented clearly as being associated with the correct base.
</ul>
<p>Note: The colors are not part of the test,
they are merely provided as help to the person running the test,
to make it easier to recognize the various parts of the text.
<p>Note: This is not a layout or rendering test.
The precise appearance is not specified,
and implementations may therefore validly vary.
<hr>
例文は<ruby><rp>!</rp><span class=r1>浄<rp>!</rp></span><rp>!</rp><rtc class=r1><rp>!</rp>じょ<rp>!</rp>う<rp>!</rp></rtc><rp>!</rp><span class=r2>瑠<rp>!</rp></span><rp>!</rp><rtc class=r2><rp>!</rp>る<rp>!</rp></rtc><rp>!</rp><span class=r3>璃</span><rp>!</rp><rtc class=r3><rp>!</rp>り<rp>!</rp></rtc><rp>!</rp></ruby>