RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/writing-mode below:

writing-mode · WebPlatform Docs

writing-mode Summary

writing-mode specifies if lines of text are laid out horizontally or vertically, and the direction which lines of text and blocks progress.

Overview table

Initial value: horizontal-tb
Applies to: All elements except table row groups, table column groups, table rows, and table columns
Inherited: Yes
Media: visual
Computed value: specified value
Animatable: No
CSS Object Model Property: writingMode
Percentages: N/A

Syntax

writing-mode: horizontal-tb
writing-mode: vertical-lr
writing-mode: vertical-rl

Values

horizontal-tb: Lines of text are laid out horizontally, and progress from the top to the bottom of the page. This is the writing mode used in many writing systems, such as Latin, Greek, Cyrillic, Arabic, Hebrew, etc.
vertical-rl: Lines of text are laid out vertically, and progress from the right to the left of the page. Asian languages, such as Chinese or Japanese traditionally used this writing mode.
vertical-lr: Lines of text are laid out vertically, and progress from the left to the right of the page. Mongolian-based writing systems typically use this writing mode.

Examples

Sets the writing mode to vertical and to progress from right to left. Sometimes used by East Asian, especially Japanese and Chinese. This example is Japanese use case.

<p>日本では、新聞や書籍などで縦書きを使用することがあります。これは、縦書きのシンプルな例です。</p>

View live example

p {
    width: 100%;
    -webkit-writing-mode: vertical-rl;
}

Sets the writing mode, including a fallback for the previous version of the spec, supported by IE.


writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;


writing-mode: horizontal-tb;
-ms-writing-mode: rl-tb;
direction: rtl;


writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;


writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;

Complete example, including HTML.

<style>
    #horizontal-tb {
    -ms-writing-mode: lr-tb;  
    writing-mode: horizontal-tb;  
    }
   #horizontal-tb-direction-rtl {
    -ms-writing-mode: rl-tb;
        writing-mode: horizontal-tb;

        direction: rtl; 
   }
   #vertical-rl {
        -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    }
    #vertical-lr {
    -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
    }
</style>
<div id="horizontal-tb">
    <h1>Writing-mode: horizontal-tb/lr-tb</h1>
    <p>This text should be horizontal, left to right, and <em>under</em> the heading.</p>
    <ol>
        <li>One</li>
    <li>Two</li>
    <li>Three</li>
    </ol>
</div>
<div id="horizontal-tb-direction-rtl">
    <h1>Writing-mode: horizontal-tb/rl-tb, direction: rtl</h1>
    <p>This text should be horizontal, right to left, and <em>under</em> the heading.</p>
    <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    </ol>
</div>
<div id="vertical-rl">
        <h1>Writing-mode: vertical-rl/tb-rl</h1>
        <p>This text should be vertical, and to the <em>left</em> of the heading.</p>
     <ol>
              <li>One</li>
              <li>Two</li>
          <li>Three</li>
     </ol>
</div>
<div id="vertical-lr">
    <h1>Writing-mode: vertical-lr/tb-lr</h1>
    <p>This text should be vertical, and to the <em>right</em> of the heading.</p>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>
</div>

View live example

Related specifications

CSS Writing Modes Module Level 3: W3C Working Draft