styling/relative/above-below-span-1.html

<!DOCTYPE HTML>
<html>
<head>
<title>Ruby styling approximation by position: relative</title>
<style>
  p {
    line-height: 2.5;
  }
  .ruby {
    display: inline;
    ruby-position: inline; /* disable WinIE ruby rendering */
    position: relative;
  }
  .ruby .rp {
    display: none;
  }
  .ruby .rt {
    display: block;
    position: absolute;
    bottom: 1.7em;
    left: 0;
    right: 0;
    font-size: 70%;
    line-height: 1.1;
    text-align: center;
  }
  .ruby /* .rt ~ .rt */
       .rt.secondary {
    top: 1.7em;
    bottom: auto;    
  }

  body {
    width: 20em;
  }
</style>
</head>
<body>
<p>う瘢雹つくしい<span class=ruby><span class=rb>日本語</span><span class=rp> (</span><span class=rt>にほんご</span><span class=rp> / </span><span class="rt secondary">Japanese</span><span class=rp>) </span></span>の文書。
う瘢雹つくしい<span class=ruby><span class=rb>日本語</span><span class=rp> (</span><span class=rt>にほんご</span><span class=rp> / </span><span class="rt secondary">Japanese</span><span class=rp>) </span></span>の文書。
う瘢雹つくしい<span class=ruby><span class=rb>日本語</span><span class=rp> (</span><span class=rt>にほんご</span><span class=rp> / </span><span class="rt secondary">Japanese</span><span class=rp>) </span></span>の文書。
</body>
</html>
1	wakaba	1.1	<!DOCTYPE HTML>
2			<html>
3			<head>
4			<title>Ruby styling approximation by position: relative</title>
5			<style>
6			p {
7			line-height: 2.5;
8			}
9			.ruby {
10			display: inline;
11			ruby-position: inline; /* disable WinIE ruby rendering */
12			position: relative;
13			}
14			.ruby .rp {
15			display: none;
16			}
17			.ruby .rt {
18			display: block;
19			position: absolute;
20			bottom: 1.7em;
21			left: 0;
22			right: 0;
23			font-size: 70%;
24			line-height: 1.1;
25			text-align: center;
26			}
27			.ruby /* .rt ~ .rt */
28			.rt.secondary {
29			top: 1.7em;
30			bottom: auto;
31			}
32
33			body {
34			width: 20em;
35			}
36			</style>
37			</head>
38			<body>
39			<p>う瘢雹つくしい<span class=ruby><span class=rb>日本語</span><span class=rp> (</span><span class=rt>にほんご</span><span class=rp> / </span><span class="rt secondary">Japanese</span><span class=rp>) </span></span>の文書。
40			う瘢雹つくしい<span class=ruby><span class=rb>日本語</span><span class=rp> (</span><span class=rt>にほんご</span><span class=rp> / </span><span class="rt secondary">Japanese</span><span class=rp>) </span></span>の文書。
41			う瘢雹つくしい<span class=ruby><span class=rb>日本語</span><span class=rp> (</span><span class=rt>にほんご</span><span class=rp> / </span><span class="rt secondary">Japanese</span><span class=rp>) </span></span>の文書。
42			</body>
43			</html>