Home > Article > Web Front-end > Detailed explanation on the use of ruby-position attribute in css

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

黄舟Original: 2017-06-20 15:42:301980browse

Syntax:

ruby-position : above | inline

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; }

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the usage of css ruby-align attributeNext article：Detailed explanation of the usage of css ruby-align attribute

See more

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

Related articles