ÿþ<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> body { background: white; } .test { font-size: 300%; border: 0.1em solid green; text-decoration: underline; color: lime;} span { border-top: 0.1em solid red; border-bottom: 0.1em solid blue; color: black; } .line-height1 { line-height: 0.5; } .line-height2 { line-height: 2; } .align { vertical-align: top; } .small ruby { font-size: 75%; } </style> </head> <body> <h1>Test with Ruby position</h1> <ul> <li><a href="ruby.htm">Test with Horizontal</a></li> <li><a href="ruby-vertical.htm">Test with Vertical</a></li> </ul> <p>Example 1 - line-height default</p> <p class="test"> <span> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl </span> </p> <p>Example 2 - line-height 0.5</p> <p class="test line-height1"> <span> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl </span> </p> <p>Example 3 - line-height 0.5</p> <p class="test line-height2"> <span> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl </span> </p> <p>Example 4 - line-height default with vertical-align bottom</p> <p class="test align"> <span> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl </span> </p> <p>Example 5 - line-height 0.5 with vertical-align bottom</p> <p class="test line-height1 align"> <span> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl </span> </p> <p>Example 6 - line-height 0.5 with vertical-align bottom</p> <p class="test line-height2 align"> <span> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl </span> </p> <p>Example 7 - line-height default with vertical-align bottom</p> <p class="test align small"> <span> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl </span> </p> <p>Example 8 - line-height 0.5 with vertical-align bottom</p> <p class="test line-height1 align small"> <span> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl </span> </p> <p>Example 9 - line-height 0.5 with vertical-align bottom</p> <p class="test line-height2 align small"> <span> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl<br /> <ruby><rb>qg</rb><rp>(</rp><rt>h0F0</rt><rp>)</rp></ruby> <ruby><rb>¬N</rb><rp>(</rp><rt>M0‡0F0</rt><rp>)</rp></ruby> defghijkl </span> </p> <p><a href="http://css-class.com/test/">CSS Class test</a></p> </body> </html>