User:Eirikr/Template Tests/ruby

  

Description
This is a template for adding ruby text to a word or phrase. See Ruby characters for more information on what ruby text is.

Note that this is only for text layout -- this does not do anything to link text, or to deal with different languages or scripts. It will accept wikitext, so make sure to specify any such linking or languages in the input arguments.

Usage
This template takes three arguments:


 *  : required: The base text to add a ruby to.  Equivalent to the    element that is described in the HTML 5 specification, but that does not currently work in Firefox (as of version 11.0).
 *  : required: The ruby text to add.  Equivalent to the    element that is described in the HTML 5 specification, but that does not currently work in Firefox (as of version 11.0).
 *  : optional: The position of the ruby text.  If omitted, defaults to placing the ruby over the base text.  Possible values:
 * over</tt>
 * <tt>under</tt>
 * Ruby text generally goes over the base text. This parameter is intended for cases where the ruby might want to go beneath, and for future extensibility if and when browser technology is capable of handling rubies to the left or right of the base text, such as to the right in common top-to-bottom text layouts for Chinese and Japanese (and to a lesser extent for Korean).

Examples
To add the ruby above the base text:

Sample in running text:


 * Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, <span title="ruby" style="display:inline-table; text-align:center; white-space:nowrap; background-color:inherit; "><span title="rb" style="display:table--group;">qui dolorem ipsum quia dolor sit amet, <span title="rt" style="display:table--group; line-height:100%; font-size:70%;">who loves or pursues or desires to obtain pain of itself, because it is pain, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

To add the ruby below the base text:

Sample in running text:


 * Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, <span title="ruby" style="display:inline-table; text-align:center; white-space:nowrap; background-color:inherit; "><span title="rb" style="display:table--group;">qui dolorem ipsum quia dolor sit amet, <span title="rt" style="display:table--group; line-height:100%; font-size:70%;">who loves or pursues or desires to obtain pain of itself, because it is pain, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Japanese furigana example:

する

Rendering:


 * <span title="ruby" style="

display:inline-table; text-align:center; white-space:nowrap; background-color:inherit; line-height:100%; vertical-align:text-top; "> <span title="rb" style=" display:table--group; line-height:110%; "> <span title="rt" style=" display:table--group; line-height:90%; font-size:70%; ">かんかつ . する

<span title="outer block" style=" display:inline-block; background-color:inherit; line-height:100%;  "> <span title="inner block: ruby text" style=" display:inline-block; position:relative;  font-size: 70%;  min-width:100%; line-height:90%; text-align:center;   "> <span title="inner block: main text" style=" display:inline-block; position:relative;  min-width:100%; line-height:110%; text-align: center;  z-index:1;   ">. する

<span title="outer block" style=" display:inline-block; background-color:inherit;  vertical-align:text-top; margin-top:1px;  "><span style=" display:inline-block;  position:relative;  line-height: 110%;  min-width:100%;  text-align: center;  ">  <span style=" display:inline-block;  position:relative;  font-size: 70%;  line-height: 90%;  min-width:100%; text-align:center;   ">.

<span title="outer block" style=" display:inline-block; background-color:inherit;  vertical-align:text-top; margin-top:1px;  "><span style=" display:inline-block;  position:relative;  font-size: 70%;  line-height: 90%;  min-width:100%; text-align:center;   ">  <span style=" display:inline-block;  position:relative;  line-height: 110%;  min-width:100%;  text-align: center;  ">.

Limitations

 * Justified alignment:
 * Due to incomplete support of CSS3, it is not currently possible to justify the ruby text using the <tt>kashida</tt> option that stretches the text to fit the full width of the bounding box, as can be seen in Japanese publications. This can lead to some visual uncertainty when using a short ruby text with a long base text.
 * Vertical ruby text:
 * Vertical text in general is not yet supported by the major browsers.