css/css-ruby/ruby-001.xht

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Ruby: Ping Test</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ruby/001.html"/>
  <link rel="help" href="http://www.w3.org/TR/css3-ruby/"/>
    <style type="text/css">
   p { color: navy; }
   .a ruby { display: ruby-base; display: inline; display: ruby-base; }
   .a rbc { display: ruby-base-container; display: inline; display: ruby-base-container; }
   .a rb { display: ruby-base; display: inline; display: ruby-base; }
   .a rtc.before { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: before; }
   .a rtc.after  { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: after; }
   .a rt { display: ruby-text; display: inline; display: ruby-text; ruby-span: 3; }
   .b ruby { display: inline; }
   .b rbc { display: inline; }
   .b rb { display: inline; }
   .b rtc { display: inline; }
   .b rt { display: inline; }
  </style>
 </head>
 <body>
  <p>There should be exactly four lines of text below.</p>
  <p>
   <ruby class="a">
     <rbc>
       <rb> 2. This is </rb>
       <rb> the second </rb>
       <rb> line. </rb>
     </rbc>
     <rtc class="before">
       <rt> 1. This is </rt>
       <rt> the first </rt>
       <rt> line. </rt>
     </rtc>
     <rtc class="after">
       <rt> 3. This is the third line. </rt>
     </rtc>
   </ruby>
  </p>
  <p>
   <ruby class="b">
     <rbc>
       <rb> 4. This </rb>
       <rb> is </rb>
       <rb> the </rb>
     </rbc>
     <rtc class="before">
       <rt> fourth </rt>
       <rt> and </rt>
       <rt> final </rt>
     </rtc>
     <rtc class="after">
       <rt> line. </rt>
     </rtc>
   </ruby>
  </p>
 </body>
</html>