styling/relative/above-below-2.html

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

  body {
    width: 20em;
  }
</style>
</head>
<body>
<p>う瘢雹つくしい<ruby><rb>日本語</rb><rp> (</rp><rt>にほんご</rt><rp> / </rp><rt class=secondary>Japanese</rt><rp>) </rp></ruby>の文書。
う瘢雹つくしい<ruby><rb>日本語</rb><rp> (</rp><rt>にほんご</rt><rp> / </rp><rt class=secondary>Japanese</rt><rp>) </rp></ruby>の文書。
う瘢雹つくしい<ruby><rb>日本語</rb><rp> (</rp><rt>にほんご</rt><rp> / </rp><rt class=secondary>Japanese</rt><rp>) </rp></ruby>の文書。
</body>
</html>
1	<!DOCTYPE HTML>
2	<html>
3	<head>
4	<title>Ruby styling approximation by position: relative</title>
5	<style>
6	p {
7	line-height: 3;
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	top: -1.2em;
21	left: 0;
22	right: 0;
23	font-size: 70%;
24	line-height: 1.3;
25	text-align: center;
26	white-space: nowrap;
27	}
28	ruby /* rt ~ rt */
29	rt.secondary {
30	top: 1.5em;
31	}
32
33	body {
34	width: 20em;
35	}
36	</style>
37	</head>
38	<body>
39	<p>う瘢雹つくしい<ruby><rb>日本語</rb><rp> (</rp><rt>にほんご</rt><rp> / </rp><rt class=secondary>Japanese</rt><rp>) </rp></ruby>の文書。
40	う瘢雹つくしい<ruby><rb>日本語</rb><rp> (</rp><rt>にほんご</rt><rp> / </rp><rt class=secondary>Japanese</rt><rp>) </rp></ruby>の文書。
41	う瘢雹つくしい<ruby><rb>日本語</rb><rp> (</rp><rt>にほんご</rt><rp> / </rp><rt class=secondary>Japanese</rt><rp>) </rp></ruby>の文書。
42	</body>
43	</html>