Share some interesting properties of CSS

This text will share with you some interesting css attributes
direction
unicode-bidi
writing-mode
text-orientation

Button or text replacement in left and right order

Replacement button position


Conventional practice:

• HTML elements change positions
• float:right , what about centering?
• js replacement dom order
• CSS , css OK? Can!

Key attributes direction

The CSS property direction used to set the horizontal overflow direction of text and table columns. rtl means from right to left (similar to Hebrew or Arabic), ltr means from left to right (similar to most languages such as English).

We can use this attribute to change button, which is really convenient 🤙🤙🤙

online example

<div class='wrap wrap-rtl'>
  <button class="button">取消</button>
  <button class="button button-primary">确认</button>
</div>

.wrap {
  width: 200px;
  text-align: center;
}
.wrap-rtl {
  direction: rtl;
}

compatible with


Flip text


Conventional practice:

• js str.split('').reverse().join('')
• CSS , css okay? Can!

direction attribute seems to only change the picture or button order of presentation, but the character of pure content (Chinese) seem to have little effect, we can make use of direction partner property Unicode-BIDI to decide how to handle dual writing direction of the document properties text
Online example

<div class="text">我是被翻转的文字</div>

.text{
  direction:rtl;
  unicode-bidi:bidi-override;
  text-align:left
}

compatible with


Text is rotated vertically or 90°


Conventional practice:

• CSS3 rotate(90deg) , not very easy to use, but also need to adjust the position
• Or try the following 👇

css attributes used
writing-mode defines the horizontal or vertical arrangement of text and the direction of text in block-level elements
text-orientation Set the direction of the characters in the line
Online example

Vertical text layout

<span class='mixed'>中国人不骗中国人🇨🇳</span>

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

text is laid out vertically, the text is rotated 90°

<span class='sideways'>中国人不骗中国人🇨🇳</span>

.sideways{
 writing-mode: vertical-lr;
 text-orientation: sideways-right;
}

compatible with


Exchange group