Orientation and order in the CSS world

In CSS, we often deal with various orientations.

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

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

This article will take a look at orientation 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 typesetting order, and are related to each other but do different things.

• writing-mode: defines the horizontal or vertical arrangement of text and the direction of text travel in block-level elements.
• direction: Sets the text alignment direction. 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 will often appear together. In modern computer applications, the most commonly used algorithm for processing bidirectional text is the Unicode bidirectional algorithm. whileunicode-bidiThis property is used to override the algorithm.

It’s a bit confusing to just look at the definition, but let’s look at a few examples:

writing-modeschematic

Basically, you only need to pay attention to the most common horizontal-TB, vertical-LR and vertical-RL writing-mode. Represents the direction of the text, and the following shows what the output would look like with full browser writing-mode support:

directionschematic

What’s the direction? It represents the direction in which the text is arranged.

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

It’s a little 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>This is a normal sequence of text</p>
Copy the code

The simple CSS is as follows:

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

The normal pattern is as follows:

We add direction: LTR and direction: RTL to the parent containers

and

respectively.

As you can see, direction can change the orientation of child elements, but it does not change the writing order of each text within a single paragraph (or inline elements).

So what if I want this to be a normal sequence of text and instead of writing it from left to right, I want to write it from right to left?

unicode-bidischematic

This requires unicode-bidi.

Using direction alone: RTL does not allow text to be written from right to left within a single block of text (or inline elements). Need to work with Unicode-bidi.

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

The same code as above, let’s change it:

<p>This is a normal sequence of text</p>
Copy the code

p {
    direction: rtl;
    unicode-bidi: bidi-override;
}
Copy the code

The results are as follows:

Put it all together:

In addition to Unicode-bidi: Bidi-Override, Unicode-bidi: isolate-Override also works.

There is a very important knowledge involved here – the Unicode bidirectional algorithm.

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 can be divided into:

1. Most writing is written from left to right: Latin (English letters) and Chinese characters, for example;
2. A few scripts are written from right to left like Arabic (AR) and Hebrew (he).

Unicode Bidirectional Algorithm is the most commonly used Algorithm to process Bidirectional text in modern computer applications.

The general direction within a region determines which side of the region to start writing, often called the base direction. The browser sets the default base orientation based on your default language, such as left to right for English and Chinese, and right to left for Arabic.

On the Web, we have three ways to control text direction:

1. HTML entities –‎ 与 ‏)
2. <bid> 与 <bdo>Labels anddirattribute
3. 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 only briefly covers it. For more information, see Unicode Bidirectional Algorithm

writing-mode & direction & unicode-bidiSome applications of

In addition to their functions, let’s take a look at some of their other applications.

usewriting-modeCreative layout

Writing – Mode is ideal for some creative typography.

Some vertical displays of basic Chinese poetry:

<div class="g-wrap">
    <h2>Liangzhou word</h2>
    <p>Sparkling cups of wine,</p>
    <p>If you want to drink the lute, hurry immediately.</p>
    <p>Drunk on the battlefield,</p>
    <p>Ancient to fight a few people back.</p>
</div>
Copy the code

Add writing-mode: vertical-rl or writing-mode: vertical-lr to. G-wrap to get different results:

.rl {
    writing-mode: vertical-rl;
}
.lr {
    writing-mode: vertical-lr;
}
Copy the code

CodePen Demo — display poems by writing-mode

Or, like this, use writing-mode:vertical-rl to create a vertical arrangement of headlines, matching content to create an interesting newspaper layout:

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

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

Get a layout like this:

CodePen Demo — writing-mode Layout Demo

Change the text overflow ellipsis position so that it is omitted in the header

As we all know, the text’s super-long overflow of ellipsis is passed at the very end of the text. Something like this:

<p>Make CSS Ellipsis Beginning of String</p>
Copy the code

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

Here, we can move the dot position from the tail to the head by direction:

p {
    direction: rtl;
}
Copy the code

The results are as follows:

Tried to use in multi-line ellipsis, multi-line ellipsis dot will appear on the left of the last line, does not meet the requirements.

CodePen Demo — CSS Ellipsis Beginning of String

usewriting-modeChange element orientation

This tip was learned from Zhang’s blog: change the writing-mode property of CSS world rules

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

<div>➤</div>
Copy the code

div:hover {
    writing-mode: vertical-rl;
}
Copy the code

To see the effect, when hover, change the arrow from right ➡️ to down 🔽 :

Of course, this could be replaced by Transform, but it was an interesting trick to use when you needed to be compatible with the IE series.

Logical properties in the 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, such attributes defined using the dimensions of top/left/bottom/right physical orientation can be very problematic under different typesetting rules.

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

<div class="g-wrap pt">
    <h2>Liangzhou word</h2>
    <p>Sparkling cups of wine,</p>
    <p>If you want to drink the lute, hurry immediately.</p>
    <p>Drunk on the battlefield,</p>
    <p>Ancient to fight a few people back.</p>
</div>
<div class="g-wrap pt rl">
    <h2>Liangzhou word</h2>
    <p>Sparkling cups of wine,</p>
    <p>If you want to drink the lute, hurry immediately.</p>
    <p>Drunk on the battlefield,</p>
    <p>Ancient to fight a few people back.</p>
</div>
Copy the code

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

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

Due to the different typography rules, the physical orientation can cause some confusion. CSS introduces CSS Logical Properties in the CSS Logical Properties and Values Level 1 specification.

The logical properties and values of the CSS are a new module of the CSS. The properties and values introduced in the CSS can control the layout from the logical point of view, rather than the physical, direction, or dimension.

Again, we can use padding-block-start instead of padding-top.

Padding-top with padding-block-start

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

Let’s see how it looks this time:

The padding goes from the top of the physical to the top of the logic.

For a complete Demo you can click here: CodePen Demo- physical and logical direction Demo

Margin, padding, border, and relative mapping of physical attributes to logical attributes

Attributes like this are defined in the specification quite a lot. Let’s list the specific mapping rules:

marginMapping of physical attributes to logical attributes:

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

paddingMapping of physical attributes to logical attributes:

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

borderMapping of physical attributes to logical attributes:

The Property attribute	Logical Property Indicates the 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}

relativeMapping of physical attributes to logical attributes:

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

• And so on… (For a full list, you can poke here: mDN-CSS logical properties and values)

There is no directionality in logical properties, 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.

Logical properties under the box model

The entire box model can be changed to take into account the logical problems posed by different typography.

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

Physical and logical directions overlap

For example, if we set padding-top and padding-block-start to a normal element from left to right and top to bottom, let’s see what happens:

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

Here, if the physical orientation overlaps the padding of the logical orientation, the value defined later will be taken. Padding-block-start is defined after padding-top, so the padding value is 100px.

Margin and border are the same. There can only be one margin\padding\border in the same direction, no matter the logical direction or the physical direction, whichever value is defined later.

CodePen Demo- Physical and logical direction overlap Demo

To summarize

To sum up, when the project starts to internationalize and more domestic businesses start to go abroad, international compatibility and adaptation will become more and more important. The good news is that CSS keeps up with The Times, and when you need to consider different writing modes in your layout, you need to start thinking about using logical properties instead of physical properties!

The last

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

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.

Refer to the article

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