| <!DOCTYPE html> |
| <html lang="en" > |
| <meta charset="utf-8"> |
| <title>Ruby Markup Content Model: two levels of annotations, each with pairing.</title> |
| <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-rb-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-rt-element"> |
| <link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#ruby-pairing"> |
| <link rel="mismatch" href="reference/html-ruby-502-a-ref.html"> |
| <link rel="mismatch" href="reference/html-ruby-502-b-ref.html"> |
| <link rel="mismatch" href="reference/html-ruby-502-c-ref.html"> |
| <link rel="mismatch" href="reference/html-ruby-502-d-ref.html"> |
| <link rel="mismatch" href="reference/html-ruby-502-e-ref.html"> |
| <link rel="mismatch" href="reference/html-ruby-502-f-ref.html"> |
| <link rel="mismatch" href="reference/html-ruby-502-y-ref.html"> |
| <link rel="mismatch" href="reference/html-ruby-502-z-ref.html"> |
| <style> |
| .r1 { color: orange; } |
| .r2 { color: blue; } |
| 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 2 base characters, each annotated twice with its pronunciation (once in the latin alphabet, once in kana) |
| “<span class=r1>京</span>” is annotated by “<span class=r1>きょう</span>” and “<span class=r1>kyo</span>”. |
| “<span class=r2>都</span>” is annotated by “<span class=r2>と</span>” and “<span class=r2>to</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><rb class=r1>京<rb class=r2>都<rtc><rt class=r1>きょう<rt class=r2>と<rtc><rt class=r1>kyo<rt class=r2>to</ruby> |
