Parent Directory
| 
Revision Log
New
| 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> |
| admin@suikawiki.org | ViewVC Help |
| Powered by ViewVC 1.1.24 |