Position and order in the CSS world

In CSS, we often deal with various directions.

For example, margin , padding , they will have margin-left , margin-right or padding-left , padding-right . There are also left , top , right , bottom , which indicate different directions up, down, left, and right.

There is also a case from x-direction to x-direction, such as writing-mode , direction , which represents a sequence, indicating the direction of block flow, or the direction of writing.

This article will explore the position and order in the CSS world, and explore some of the interesting points.

writing-mode & direction & unicode-bidi

In the CSS world, these three attributes are all related to the order of typesetting, and they are related to each other but have different functions.

• writing-mode : Defines the horizontal or vertical arrangement of text and the direction of text in block-level elements.
• direction : Set the direction of text arrangement. rtl means right to left (similar to Hebrew or Arabic), ltr means left to right.
• unicode-bidi : It is direction , the two will often appear together. In modern computer applications, the most commonly used algorithm to process bidirectional text is the Unicode bidirectional algorithm. unicode-bidi is used to rewrite this algorithm.

Just looking at the definition is a bit awkward, let's simply look at a few application diagrams:

writing-mode signal

writing-mode basically only needs to pay attention to the most common horizontal-tb , vertical-lr , vertical-rl . Indicates the direction of the text. The following figure shows the appearance of the output when the writing-mode

direction signal

OK, what about direction It represents the direction of text arrangement .

• direction: ltr : The default attribute. The default direction of text and other elements that can be set is from left to right.
• direction: rtl : The default direction of text and other elements that can be set is from right to left.

It's a bit convoluted, so the demo is the most intuitive. Suppose, we have the following structure:

<ul class="wrap">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<p>这是一段正常顺序的文本</p>

The simple CSS is as follows:

p, ul {
    background: #ff00ff50;
    padding: 10px;
}
ul {
    display: flex;
    justify-content: space-between;
    
    & > li {
        border: 1px solid #333;
    }
}

The style under normal conditions is as follows:

We add direction: ltr and direction: rtl <p> and <ul> two groups of elements respectively, and the final effect is as follows:

As you can see, direction can change the arrangement direction of sub-elements, but does not change the writing order of each text in a single paragraph of text (or inline elements) .

Then, if I want be a normal sequence of text, this text is not written from left to right, but the other way round, from right to left, how to set it?

unicode-bidi signal

This requires unicode-bidi .

Using direction: rtl alone cannot make the writing order of the text within a single paragraph of text (or within an inline element) change from right to left. Need to cooperate with unicode-bidi .

The unicode-bidi property and direction property in CSS jointly determine how to deal with double writing direction text in the document.

Still the above code, let's transform it:

<p>这是一段正常顺序的文本</p>

p {
    direction: rtl;
    unicode-bidi: bidi-override;
}

The results are as follows:

Put it together and compare:

In addition to unicode-bidi: bidi-override , unicode-bidi: isolate-override can also get the same effect.

Here involves a very important knowledge- Unicode two-way algorithm .

Unicode bidirectional algorithm

Bidirectional text means that a string contains two types of text, including both left-to-right text and right-to-left text.

For writing habits, it is divided into:

1. Most characters are written from left to right: such as Latin characters (English letters) and Chinese characters;
2. A few characters are written from right to left, such as Arabic (ar) and Hebrew (he).

In modern computer applications, the most commonly used algorithm to process bidirectional text is the Unicode Bidirectional Algorithm.

There is a general direction in an area, which determines which side of the area to start writing text from, usually called the basic direction. browser will set the default basic direction according to your default language. For example, the basic direction of English and Chinese is from left to right, and the basic direction of Arabic is from right to left .

In the Web, we have 3 ways to control the text direction:

1. html entities- ‎ and ‏ )
2. <bid> and <bdo> tags and dir attributes
3. CSS property direction + unicode-bidi

This article introduces the direction + unicode-bidi method in CSS to control the writing direction of the text. Regarding the Unicode Bidirectional Algorithm itself is still very complicated, this article is only a brief mention. For more detailed content, you can refer to UNICODE BIDIRECTIONAL ALGORITHM

Some applications of writing-mode & direction & unicode-bidi

In addition to its own functions, let's take a look at some of their other application scenarios.

Use writing-mode for creative layout

writing-mode is very suitable for some creative typesetting.

Some basic vertical displays similar to ancient Chinese poems:

<div class="g-wrap">
    <h2>凉州词</h2>
    <p>葡萄美酒夜光杯,</p>
    <p>欲饮琵琶马上催。</p>
    <p>醉卧沙场君莫笑,</p>
    <p>古来征战几人回。</p>
</div>

To .g-wrap added separately writing-mode: vertical-rl or writing-mode: vertical-lr obtained different results:

.rl {
    writing-mode: vertical-rl;
}
.lr {
    writing-mode: vertical-lr;
}

CodePen Demo -- display poems by writing-mode

Or like this, use writing-mode:vertical-rl realize the vertical arrangement of headlines, and match the content to form an interesting newspaper layout:

<div>
  <h2>Title Loomings</h2>
  <p>Call me Ishmael. Some years ago- never mind ho....
  </p>
</div>

div {
  width: 750px;
  padding-left: 150px;
}
h2 {
  position: absolute;
  writing-mode: vertical-rl;
}

Get this typesetting layout:

CodePen Demo -- writing-mode Layout Demo

Change the omission position of the text overflow to make it omit at the head

As we all know, the omission of the long overflow in this article is passed at the end of the text. Like this:

<p>Make CSS Ellipsis Beginning of String</p>

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Here, we can use direction to move the position where the dot is omitted from the tail to the head:

p {
    direction: rtl;
}

The results are as follows:

I tried to use it in the multi-line omission. The dots of the multi-line omission will appear on the left side of the last line, which does not meet the requirements.

CodePen Demo -- CSS Ellipsis Beginning of String

Use writing-mode change element orientation

This little trick is learned in Teacher Zhang’s blog: Change the writing-mode attribute of the CSS world's vertical and horizontal rules

We can use writing-mode: vertical-rl to turn the element to a 90° angle:

<div>➤</div>

div:hover {
    writing-mode: vertical-rl;
}

Look at the effect, when hovering, change the arrow from right ➡️ to down 🔽:

Of course, this function can be replaced with transform now, but it is an interesting trick when it needs to be compatible with the IE series before.

Logical properties in CSS

In the next chapter, we will talk about the logical position in CSS.

We know that when we use margin like 060f786b655bf9 and padding , we can control each direction separately, such as margin-top , padding-left .

However, the use of top / left / bottom / right physical direction dimension definition attributes, under different typesetting rules, it is very prone to problems.

Consider the following demo. We hope to add a padding value to the title of the ancient poem:

<div class="g-wrap pt">
    <h2>凉州词</h2>
    <p>葡萄美酒夜光杯,</p>
    <p>欲饮琵琶马上催。</p>
    <p>醉卧沙场君莫笑,</p>
    <p>古来征战几人回。</p>
</div>
<div class="g-wrap pt rl">
    <h2>凉州词</h2>
    <p>葡萄美酒夜光杯,</p>
    <p>欲饮琵琶马上催。</p>
    <p>醉卧沙场君莫笑,</p>
    <p>古来征战几人回。</p>
</div>

.pt {
    padding-top: 100px;
}
.rl {
    writing-mode: vertical-rl;
}

It can be seen that regardless of writing-mode , padding-top always refers to the upper side of the physical direction.

Based on this different typesetting rules, the physical direction may bring certain troubles to this problem. CSS introduced the CSS logical properties CSS Logical Properties and Values Level 1

CSS logical attribute and value is a new module of CSS. The attributes and values it introduces can control the layout from a logical point of view, rather than from physical, direction or dimension control.

Still the above DEMO, we can use padding-block-start instead of padding-top .

Important: uses padding-block-start instead of padding-top :

.pt {
-   padding-top: 100px;
+   padding-block-start: 100px;
}
.rl {
    writing-mode: vertical-rl;
}

Let's look at the effect this time:

padding from physically above to logically above.

For the complete Demo, you can here: 160f786b655ea2 CodePen Demo-- physical and logical direction display

The mapping of margin, padding, border, relative physical attributes to logical attributes

A lot of attributes like this are defined in the specification. Simply list the specific mapping rules:

margin physical attributes to logical attributes:

Property property	Logical Property
margin-top	margin-block-start
margin-left	margin-inline-start
margin-right	margin-inline-end
margin-bottom	margin-block-end

padding physical attributes to logical attributes:

Property property	Logical Property
padding-top	padding-block-start
padding-left	padding-inline-start
padding-right	padding-inline-end
padding-bottom	padding-block-end

border physical attributes to logical attributes:

Property property	Logical Property
border-top{-size\	style\	color}	border-block-start{-size\	style\	color}
border-left{-size\	style\	color}	border-inline-start{-size\	style\	color}
border-right{-size\	style\	color}	border-inline-end{-size\	style\	color}
border-bottom{-size\	style\	color}	border-block-end{-size\	style\	color}

relative physical attribute to logical attribute mapping:

Property property	Logical Property
top	inset-block-start
left	inset-inline-start
right	inset-inline-end
bottom	inset-block-end

• Wait... (for a complete list, you can here: 160f786b6562e5 MDN-CSS logical properties and values )

There is no concept of directionality in logical attributes, only the concepts of start and end, block and inline. For example, in left-to-right (LTR), start is left, but in right-to-left (RTL), it is right.

Box model under logical attributes

Taking into account the logical problems caused by different layouts, the entire box model can also be changed accordingly.

In the figure below, the left side is the physical box model, and the right side is the box model under logical attributes.

The physical direction overlaps the logical direction

Of course, there is also such a situation that the set logical direction and the physical direction overlap. For example, we set padding-top and padding-block-start for a normal left-to-right, top-to-bottom element at the same time, and see what happens:

div {
    padding-top: 120px;
    padding-block-start: 100px;
}

Here, if the physical direction padding set in the logical direction, the one defined later in the two values will be used. Here since padding-block-start after padding-top defined, so padding value 100px .

margin and border same. My understanding here is that there can still only be one margin\padding\border same direction. Regardless of whether it is a logical direction or a physical direction, the later defined value shall prevail.

CodePen Demo-- Physical direction and logical direction overlap DEMO show

in conclusion

To sum up, when the project starts to be internationalized, when more domestic businesses start to go overseas, international compatibility and adaptation will become more and more important. Fortunately, CSS has been keeping up with the times and writing-mode forth the new. When your layout needs to consider different 060f786b6564be, you need to start to consider using logical attributes instead of physical attributes!

At last

Okay, this concludes this article, I hope it helps you :)

Want to get the most interesting CSS information, don’t miss my public - 160f786b656533 iCSS front-end facts 160f786b656536 😄

<img width=160 src="https://raw.githubusercontent.com/chokcoco/chokcoco/main/qrcode_big.png">

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.

Reference article

• bidi (bidirectional text) and RTL layout summary
• Change the writing-mode property of the CSS world's vertical and horizontal rules
• CSS Logical Properties and Values Level 1
• Graphical CSS: CSS logical properties
• CSS Logical Properties Are the Future of the Web & I18N