CSS properties - writing-mode

revision:


writing-mode property

- specifies whether lines of text are laid out horizontally or vertically.

CSS syntax : writing-mode: horizontal-tb | vertical-rl | vertical-lr;

Property values:

horizontal-tb : let the content flow horizontally from left to right, vertically from top to bottom

vertical-lr : let the content flow vertically from top to bottom, horizontally from right to left

vertical-rl : let the content flow vertically from top to bottom, horizontally from left to right

JavaScript syntax: object.style.writingMode="vertical-rl"

example: writing-mode property

Some text with default writing-mode.

Some text with a span element with a vertical-rl writing-mode.

Some text with writing-mode: vertical-rl.

code:
                    <div>
                        <p class="test1">Some text with default writing-mode.</p>
                        <p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>
                        <p class="test2">Some text with writing-mode: vertical-rl.</p>
                    </div>
                    <style>
                        p.test1 {writing-mode: horizontal-tb;}
                        p.test2 {writing-mode: vertical-rl;}
                        span.test2 {writing-mode: vertical-rl; }
                    </style>