Detailed explanation on the use of ruby-position attribute in css-CSS Tutorial-php.cn

Detailed explanation on the use of ruby-position attribute in css

黄舟

Release： 2017-06-20 15:42:30

Original

1994 people have browsed it

Syntax:

ruby-position : above | inline

Copy after login

Parameters:

above: Position ruby text above the basic text
inline: Ruby text is inline with the basic text

Description:
Set or retrieve the position of the annotation text or pronunciation guide (reference ruby object) specified by the rt object.
Ruby objects and rt objects please refer to my other works.
The corresponding script feature is rubyPosition. Please see other books I have written.

Example:

ruby { ruby-position: above; }

Copy after login

ruby-position is used when specifying the position of attention.

AttributeValue
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>

Copy after login

Example diagram

Detailed explanation on the use of ruby-position attribute in css

The above is the detailed content of Detailed explanation on the use of ruby-position attribute in css. For more information, please follow other related articles on the PHP Chinese website!