Home > Article > Web Front-end > Introduction to usage examples of using CSS3’s ruby-position to fix the phonetic position
Introduction to usage examples of using CSS3’s ruby-position to fix the phonetic position
- 高洛峰Original
- 2017-03-08 13:20:491727browse
ruby-position can customize the phonetic notation position around the text in the style. After the page encoding is set, it can be used to create annotation translation effects between various languages. Let’s take a look at ruby-position fixed phonetic notation using CSS3 Usage examples of position:
ruby-position is used when specifying the position of attention.
Attribute value
1.before The phonetic text will be displayed above the basic text. (Default value)
2.after The phonetic text will be displayed below the basic text.
3.right The phonetic text will be displayed on the right side of the basic text.
Example code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ruby-position </title>
<style>
ruby.sample1 {ruby-position:before;}
ruby.sample2 {ruby-position:after;}
ruby.sample3 {ruby-position:right;}
</style>
</head>
<body>
<p><ruby class="sample1">新幹線<rt>しんかんせん</rt></ruby></p>
<p><ruby class="sample2">新干线<rt>xinganxian</rt></ruby></p>
<p><ruby class="sample3">高铁<rt>High-speed rail</rt></ruby></p>
</body>
</html>
Example picture
The above is the detailed content of Introduction to usage examples of using CSS3’s ruby-position to fix the phonetic position. For more information, please follow other related articles on the PHP Chinese website!