Detailed explanation of the use of direction:rtl in layout on the Web

Perhaps because most languages ​​​​in the world are read from left to right, there is not much information about direction:rtl. The specific behavior of right-to-left writing of text is defined in Unicode, but this is not what we want to consider. What we need is to use the relevant characteristics of the impact of right-to-left writing on block-level boxes to make basic layouts.
To make the content run to the right, we usually use text-align:right, but that just makes the content right-aligned, which means pushing the elements to the right in a rush. Sometimes our need is to arrange the content to the right one by one, so flat:right is used. But float:right also has its problems. Float itself will cause the content to run out of the stream, causing the container to collapse. This in turn requires other measures to correct.
Use direction:rtl to achieve a float-like effect without other side effects, but the premise is that the child elements must be block-level elements. Inline-level elements may have unexpected results in RTL, because RTL will perform special processing on some characters based on the character attributes in Unicode. The specific processing method is very complicated and will not be mentioned in this article. In short, if this rtl is only for layout, do not use inline-level elements in child elements.

<style>
body {font:14px/18px Consolas;}
div {
  width:100px;padding:10px;
  margin:10px 0px 30px 0px;
  border:1px solid #CCC;
}
.float {overflow:hidden;} /*加overflow防止容器坍缩*/
.float span {float:right;}
.align {text-align:right;}
.align span {text-align:left;}
.direction {direction:rtl;}
.direction span {direction:ltr;display:inline-block;}
</style>
float right
<div class="float">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
align right
<div class="align">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
direction rtl
<div class="direction">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>

In fact, the direction style is a very deep topic, here we just use one of its basic properties for layout. Other properties have to start with the character attributes of unicode, and there is also a related unicode-bidi style. If you are not working on Arabic or ancient Chinese projects, you will basically not use it, so generally you don’t need to study it in depth, just understand it.

The above is the detailed content of Detailed explanation of the use of direction:rtl in layout on the Web. For more information, please follow other related articles on the PHP Chinese website!