The difference between css direction attribute and writing-mode attribute-CSS Tutorial-php.cn

The difference between css direction attribute and writing-mode attribute

黄舟

Release： 2017-06-20 10:05:08

Original

1729 people have browsed it

In css, writing-mode and direction are both used to control the display direction of text, but there are differences between them.

The parameters in writing-mode include lr-tb (left and right - up and down) tb-rl (up and down - right and left). The writing method in Western countries is usually left and right - up and down, but in Asian countries, such as China Ancient poetry is from right to left, and the writing-mode attribute is reflected!

Example:

<div class="mode">  
  <h3>登鹳雀楼</h3>  
<p>白日依山尽,<br>黄河入海流.<br>欲穷千里目,<br>更上一层楼。</p>  
</div>

Copy after login

.mode{  
            writing-mode: tb-rl;      
        }  
        p{  
            font-size: 24px;  
        }

Copy after login

The effect displayed:

The difference between css direction attribute and writing-mode attribute

##direction parameters ltr (left to right) and rtl (right to left) .

Use direction to control whether the writing direction of text is from left to right or right to left.

First of all,

layout-flow: also controls the flow of the object’s text content (but this attribute can be replaced by the writing-mode attribute)

In css, writing-mode and Direction is used to set the way text is displayed. The two have some similarities and essential differences. Let’s first introduce the usage of the two:

writing-mode

Syntax:

writing-mode : lr-tb | tb-rl

Copy after login

Parameters:

lr-tb: left-right, top -Down
tb-rl: Top-Down, Right-Left

Description:

Set or retrieve the inherent writing direction of the object's content block. Western languages do use left-right, top-bottom writing. But Asian languages often have up-down, right-left writing styles.
When the value of this attribute changes, the functions of the
text-align attribute and the vertical-align attribute will also change. The corresponding script feature is writingMode. Please see other books I have written.

direction

Syntax:

direction: ltr | rtl

Copy after login

Parameters:

ltr: left-right
rtl: right-left

Description:

The direction attribute sets the writing direction of the text from left to right or from right to left.

Through the above comparison, we can conclude that if it is just for the way text is displayed, such as from left to right or from right to left, we often use direction, and in order to cope with different writing habits of text, Especially when the text is written vertically from the top, such as the writing method of ancient Chinese characters, we need to use writing-mode.

The above is the detailed content of The difference between css direction attribute and writing-mode attribute. For more information, please follow other related articles on the PHP Chinese website!