Examples of using CSS3 's ruby-position to fix phonetic locations are introduced

Ruby-position can be in style to customize the text around the phonetic location, page encoding settings can be used to create a variety of language between the translation effect, let's look at the use of CSS3 ruby-position fixed phonetic location of the usage example:

Ruby-position is used when specifying the location of the note. < Sets or retrieves the location of the note text or pronunciation guide (reference ruby object) specified by the Rt object. >

Property value
1.before phonetic text is represented above the underlying text. (default value)
2.after phonetic text is represented below the underlying text.
3.right phonetic text is indicated on the right side of the base text.

Instance Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Example diagram