Place and order in the CSS world

In CSS, we often work with a variety of directions.

For example, margin, padding, they will have margin-left, margin-right, or padding-left, padding-right. There are also left, top, right, and bottom in the positioning, which represent different positions, up, down, left, and right.

Another case is from x to x, such as writing-mode and direction, which represent an order, indicating the direction of block flow, or the direction of writing, etc.

This article takes a look at the place and order in the CSS world and explores some of the interesting points.

`writing-mode` & `direction` & `unicode-bidi`

In the CSS world, these three properties are all related to typesetting order, and are related to each other but have different uses.

writing-mode: Defines the horizontal or vertical layout of text and the direction of text travel at block level elements.
direction: Sets the orientation of the text arrangement. RTL means right to left (similar to Hebrew or Arabic) and LTR means left to right.
unicode-bidi: it has to do withdirectionVery similar, the two come together a lot. In modern computer applications, the most commonly used algorithm to deal with bidirectional text is Unicode bidirectional algorithm. whileunicode-bidiThis property is used to override the algorithm.

Simply looking at the definition is a little confusing, let’s simply look at a few application schematics:

`writing-mode`schematic

Writing-mode basically only needs to pay attention to the most common horizontal- TB, vertical- LR, and vertical- RL. Represents the direction of the text, and the following figure shows what the output would look like if the browser’s support for writing-mode was complete:

`direction`schematic

OK, but what about direction? It represents the direction in which the text is arranged.

direction: ltr: Default property. You can set the default orientation of text and other elements to be left to right.
direction: rtl: You can set the default orientation of text and other elements from right to left.

It’s a little tricky, so 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 > this is the right order of the text < / 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 normal style is as follows:

and

with direction: LTR and direction: RTL, the final effect is as follows:

As you can see, direction can change the direction of the child elements, but it does not change the order in which each text is written within a single paragraph (or within an inline element).

Now, what if, I want this to be a normal sequence of text where, instead of writing from left to right, I’m writing the other way around, from right to left?

`unicode-bidi`schematic

So we need to call out Unicode-bidi.

Direction alone: RTL cannot be used in a single paragraph of text (or in an inline element) to change the writing order of text from right to left. Need to be compatible with Unicode-BIDI.

The unicode-bidi property in CSS, together with the direction property, determines how to handle double-written directional text in a document.

Or the above code, let’s change it:

<p> This is a paragraph of text in normal order </p>

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

The results are as follows:

Compare them together:

In addition to Unicode-bidi: bidi-override, Unicode-bidi: isolate-override can also achieve the same effect.

A very important piece of knowledge is involved here — Unicode bidirectional algorithms.

Unicode bidirectional algorithm

A bidirectional text is a string that contains two types of text, both left-to-right and right-to-left.

Writing habits are divided into:

Most scripts are written from left to right: for example, Latin (English alphabet) and Chinese;
A few scripts are written from right to left, such as Arabic (ar) and Hebrew (he).

In modern computer applications, the Unicode Bidirectional Algorithm (Unicode Bidirectional Algorithm) is the most commonly used Algorithm for Bidirectional text processing.

The general direction within an area determines which side of the area to start writing on, often called the base direction. The browser will set the default base orientation based on your default language, such as English, Chinese, Arabic, from left to right base orientation.

On the Web, there are three ways to control text direction:

HTML entities –&lrm; 与 &rlm;)
<bid> 与 <bdo>Labels anddirattribute
CSS propertiesdirection + unicode-bidi

This article introduces the direction + Unicode-bidi method in CSS to control the writing direction of text. The Unicode Bidirectional Algorithm itself is quite complex, and this article is only a short one. For more details, you can refer to the Unicode Bidirectional Algorithm

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

Apart from their own functions, let’s take a look at some of their other applications.

use`writing-mode`Carry out creative layout

Writing-mode is great for some creative typography.

Some vertical displays similar to basic Chinese ancient poetry:

< div class = "g - wrap" > < h2 > liangzhou word < / h2 > < p > wine luminous wine glass, < / p > < p > to drink immediately pipa to rush. < / p > < p > ZuiWo battlefield MoXiao, < / p > < p > throughout the play back to a few people. </p> </div>

Write-mode: Vertical-rl or Write-mode: Vertical-lr to.g-wrap for a different effect:

.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 for vertical arrangement of headlines to create interesting newspaper layout with content:

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

The resulting layout looks like this:

CodePen Demo — writing-mode Layout Demo

Change the overflow ellipsis position of the text so that it is omitted at the head

As we all know, the overflowing omissions in this text are at the very end of the text. Something 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 ellipsis from the tail to the head:

p {
    direction: rtl;
}

The results are as follows:

Try to use in multi – line ellipsis, multi – line ellipsis dot will appear on the left of the last line, do not meet the requirements.

CodePen Demo — CSS Ellipsis Beginning of String

use`writing-mode`Change element orientation

Here’s a tip I learned from Zhang’s blog: Change the Writing-Mode property of CSS Worlds Rule

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

The < div > ➤ < / div >

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

See the effect, when hover, change the arrow from right ➡️ to down print:

Now, of course, this feature is perfectly usable
transformReplacement, but before you need to be compatible with the IE series, it’s an interesting little trick.

Logical properties in CSS

In the next section, we’ll talk about logical locations in CSS.

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

However, properties that use the physical orientation dimensions of top/left/bottom/right can be problematic under different typographical rules.

Consider a DEMO like this, where we want to add a padding value to the title of an ancient poem:

<div class="g-wrap pt" </p> <p class="g-wrap "> <p class="g-wrap "> <p class="g-wrap "> <p class="g-wrap "> <p class="g-wrap "> <p class="g-wrap "> <p class="g-wrap "> <p class="g-wrap "> < / p > < p > ZuiWo battlefield MoXiao, < / p > < p > throughout the play back to a few people. < / p > < / div > < div class = "g - wrap rl pt" > < h2 > liangzhou word < / h2 > < p > wine luminous wine glass, < / p > < p > to drink immediately pipa to rush. < / p > < p > ZuiWo battlefield MoXiao, < / p > < p > throughout the play back to a few people. </p> </div>

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

As you can see, regardless of the writing-mode, the padding-top always refers to the top of the physical direction.

Because of these different typography rules, and because physical orientation can be a bit of a problem, CSS has introduced CSS Logical Properties and Values Level 1 specification.

CSS Logical Properties and Values is a new CSS module that introduces properties and values that control layout from a logical point of view, rather than physical, directional, or dimensional control.

In the same DEMO above, we can use PADDING-BLOCK-START instead of PADDING-TOP.

Use PADDING-BLOCK-START instead of PADDING-TOP:

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

Look at the effect again this time:

The padding goes from being above physically to being above logically.

For the full Demo you can click here: Codepen Demo– Physical Directions and Logical Directions

Mapping of Margin, Padding, Border, Relative physical attributes to logical attributes

There are a lot of such attributes defined in the specification. Here are the specific mapping rules:

`margin`Mapping physical attributes to logical attributes:

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

`padding`Mapping physical attributes to logical attributes:

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

`border`Mapping physical attributes to logical attributes:

The Property attribute	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`Mapping physical attributes to logical attributes:

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

And so on… (For the full list, you can stamp here: MDN-CSS logical properties and values)

There is no concept of direction in logical attributes, only 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 properties

The whole box model can also be changed to take into account the logic problems caused by different typography.

Below is the physical box model on the left and the logical box model on the right.

The physical direction overlaps the logical direction

Of course, there is also a case where the logical direction and the physical direction overlap. For example, if we set a normal left-to-right, top-to-bottom element to both PADDING-TOP and PADDING-BLOCk-start, let’s see what happens:

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

So if the physical direction overlaps the logical direction and the padding overlaps, it’s going to take the larger of the two values, like the padding overlaps.

Codepen Demo– Physical Direction and Logic Direction Overlap Demo

To summarize

To sum up, when projects start to go international, and when more domestic businesses start to go overseas, international compatibility and adaptation will become more and more important. Fortunately, CSS keeps up with The Times, and when your layout needs to consider different writing-modes, you should start thinking about using logical attributes instead of physical ones!

The last

Well, that’s the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public number – ICSS front end stories 😄

More exciting CSS technical articles in my GitHub — ICSS, keep updating, welcome to click star to subscribe to the favorites.

If there are any questions or suggestions, you can communicate more, the original article, the writing is limited, the talent is shallow, if there is something wrong in the article, wang told.

Refer to the article

BIDI (bidirectional text) and RTL layout summary
Change the Writing-Mode property of the CSS Worlds rule
CSS Logical Properties and Values Level 1
Diagram CSS: CSS logical properties
CSS Logical Properties Are the Future of the Web & I18N

writing-mode & direction & unicode-bidi

writing-modeschematic

directionschematic

unicode-bidischematic

Unicode bidirectional algorithm

writing-mode & direction & unicode-bidiSome of the applications of

usewriting-modeCarry out creative layout

Change the overflow ellipsis position of the text so that it is omitted at the head

usewriting-modeChange element orientation

Logical properties in CSS

Mapping of Margin, Padding, Border, Relative physical attributes to logical attributes

marginMapping physical attributes to logical attributes:

paddingMapping physical attributes to logical attributes:

borderMapping physical attributes to logical attributes:

relativeMapping physical attributes to logical attributes: