Home > Article > Web Front-end > Detailed explanation of the usage of css ruby-align attribute

Detailed explanation of the usage of css ruby-align attribute

黄舟Original: 2017-06-20 15:38:593240browse

Syntax:

ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge

Parameters:
auto: The alignment is determined by the browser. For ideographic (East Asian text), align with distributed-space value. For Latin text, align with center value
left: Left-aligned according to the basic width
center: Center-aligned according to the basic width. If the base width is less than the width of the ruby text, then the ruby text is centered in the width of the ruby text. Evenly distributed across the width. If the width of the ruby text is greater than or equal to the base width, center alignment
distribute-space: If the width of the ruby text is less than the base width, the ruby text is evenly distributed in the base width. In ruby text, there is a half-kerning white space before the first character and after the last character. If the width of the ruby text is greater than or equal to the base width, center alignment
line-edge: If the ruby text is not adjacent to a line edge, it is centered. Otherwise the ruby text line is above the base text edge

Description:
Sets or retrieves the
comment
text or pronunciation guide specified by the rt object (see ruby object ) alignment position. Ruby objects and rt objects please refer to my other works. The corresponding script feature is rubyAlign. Please see other books I have written.

Example:

ruby { ruby-align: right; }

Specific example:

<!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-align </title>   
<style>   
ruby.sample1 {ruby-align:auto;}   
ruby.sample2 {ruby-align:start;}   
ruby.sample3 {ruby-align:left;}   
ruby.sample4 {ruby-align:center;}   
ruby.sample5 {ruby-align:end;}   
ruby.sample6 {ruby-align:rightright;}   
ruby.sample7 {ruby-align:distribute-letter;}   
ruby.sample8 {ruby-align:distribute-space;}   
ruby.sample9 {ruby-align:line-edge;}   
ruby {background-color:pink;}   
rt {background-color:yellow;}    
</style>   
    
</head>   
    
<body>   
<p><ruby class="sample1">中国<rt>ちゅうごく</rt></ruby>
<ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:auto;）</p>   
<p><ruby class="sample2">中国<rt>ちゅうごく</rt></ruby>
<ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:start;）</p>   
<p><ruby class="sample3">中国<rt>ちゅうごく</rt></ruby>
<ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:left;）</p>   
<p><ruby class="sample4">中国<rt>ちゅうごく</rt></ruby>
<ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:center;）</p>   
<p><ruby class="sample5">中国<rt>ちゅうごく</rt></ruby>
<ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:end;）</p>   
<p><ruby class="sample6">中国<rt>ちゅうごく</rt></ruby>
<ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:rightright;）</p>   
<p><ruby class="sample7">中国<rt>ちゅうごく</rt></ruby>
<ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:distribute-letter;）</p>   
<p><ruby class="sample8">中国<rt>ちゅうごく</rt></ruby>
<ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:distribute-space;）</p>   
<p><ruby class="sample9">中国<rt>ちゅうごく</rt></ruby>
<ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:line-edge;）</p>   
</body>   
</html>

Example diagram

The above is the detailed content of Detailed explanation of the usage of css ruby-align attribute. 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 use of css text-justify attributeNext article：Detailed explanation of the use of css text-justify attribute

See more

Detailed explanation of the usage of css ruby-align attribute

Related articles