Writing-Mode CSS3. New way to change text direction

.19

Writing-Mode CSS3. New way to change text direction

The writing-mode CSS3 property assets modifications the alignment direction of the text.

This CSS property to determined whether a string data of spread out on a horizontally or vertically level. Basically writing-mode supports the following values:

vertical-lr - The text direction from left to right horizontally and from top to bottom vertically. Take a look an exapmple:

.txt-vertical-lr { writing-mode:vertical-lr }
<p class="txt-vertical-lr">text vertical-lr</p>

Text content vertical-lr. The content direction left to right horizontally

vertical-rl - The text direction from right to left horizontally and from top to bottom vertically. Take a look an exapmple:

.txt-vertical-rl { writing-mode:vertical-rl }
<p class="txt-vertical-lr">text vertical-rl</p>

Text content vertical-rl. The content direction right to left horizontally

horizontal-tb - The text direction from left to right horizontally and from top to bottom vertically.Take a look an exapmple:

.txt-horizontal-tb { writing-mode:horizontal-tb }
<p class="txt-horizontal-tb">text horizontal-tb</p>

Text content horizontal-tb. The content direction left to right horizontally

Internet Explorer has carried out this approach as "-ms-writing-mode" which supports the following values:

.ms-txt-vertical-lr {
-ms-writing-mode:tb-lr; /* IE syntax */
writing-mode:vertical-lr;
}

<p class="ms-txt-vertical-lr">text vertical-lr</p>

Text content vertical-lr. The content direction left to right horizontally

Additonal text direction property that support both -ms-writing-mode and ms-writing-mode

lr-tb - The text direction horizontally from left to right, top to bottom
bt-lr - The text direction vertically from bottom to top , left to right
tb-rl - The text direction vertically from top to boom, right to left
bt-rl - The text direction vertically from bottom to top , right to left
tb-lr - The text direction vertically from bottom to top , left to right
rl-tb - The text direction horizontally from right to left, top to bottom
lr-bt - The text direction horizontally from left to right , bottom to top
rl-bt - The text direction horizontally from right to left, bottom to top

Unfortunately the most part of old browser versions are doesn't support this CSS property, writing-mode and -ms-writing-mode support only:

Desktop: Internet Explorer 9+, Firefox 41, Chrome 9, Opera 15, Edge 12, Safari 5.1

Mobile: Firefox 64, Chrome 71, Opera Mobile 46, Safari 5.2

Conclusion: Writing-mode CSS3 property intended for multilingual tasks, but additionally you can be exploited for design needs.

.

More than 40 Happy Customers

Over the last 5 years, we have helped and guided organisations to to achieve outstanding results

Commition

Photostudio

Restaurant

Agency

Resume

Wedding

Studio

Construction