ruby-001.xht (1850B)
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Ruby: Ping Test</title> 5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ruby/001.html"/> 7 <link rel="help" href="http://www.w3.org/TR/css3-ruby/"/> 8 <style type="text/css"> 9 p { color: navy; } 10 .a ruby { display: ruby-base; display: inline; display: ruby-base; } 11 .a rbc { display: ruby-base-container; display: inline; display: ruby-base-container; } 12 .a rb { display: ruby-base; display: inline; display: ruby-base; } 13 .a rtc.before { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: before; } 14 .a rtc.after { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: after; } 15 .a rt { display: ruby-text; display: inline; display: ruby-text; ruby-span: 3; } 16 .b ruby { display: inline; } 17 .b rbc { display: inline; } 18 .b rb { display: inline; } 19 .b rtc { display: inline; } 20 .b rt { display: inline; } 21 </style> 22 </head> 23 <body> 24 <p>There should be exactly four lines of text below.</p> 25 <p> 26 <ruby class="a"> 27 <rbc> 28 <rb> 2. This is </rb> 29 <rb> the second </rb> 30 <rb> line. </rb> 31 </rbc> 32 <rtc class="before"> 33 <rt> 1. This is </rt> 34 <rt> the first </rt> 35 <rt> line. </rt> 36 </rtc> 37 <rtc class="after"> 38 <rt> 3. This is the third line. </rt> 39 </rtc> 40 </ruby> 41 </p> 42 <p> 43 <ruby class="b"> 44 <rbc> 45 <rb> 4. This </rb> 46 <rb> is </rb> 47 <rb> the </rb> 48 </rbc> 49 <rtc class="before"> 50 <rt> fourth </rt> 51 <rt> and </rt> 52 <rt> final </rt> 53 </rtc> 54 <rtc class="after"> 55 <rt> line. </rt> 56 </rtc> 57 </ruby> 58 </p> 59 </body> 60 </html>