direction

  • Revision slug: CSS/direction
  • Revision title: direction
  • Revision id: 361305
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef}}

Summary

The direction CSS property should be set to match the direction of the text: rtl for Hebrew or Arabic text and ltr for other scripts. This should normally be done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.

The property sets the base text direction of block-level elements and the direction of embeddings created by the {{Cssxref("unicode-bidi")}} property. It also sets the default alignment of text and block-level elements and the direction that cells flow within a table row.

Unlike the dir attribute in HTML, the direction property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of the rows but not inside of the columns.

{{cssbox("direction")}}

Syntax

Formal syntax: {{csssyntax("direction")}}
direction: ltr
direction: rtl

direction: inherit

Values

ltr
The default value of direction. Text and other elements go from left to right
rtl
Text and other elements go from right to left

For the direction property to have any effect on inline-level elements, the {{Cssxref("unicode-bidi")}} property's value must be embed or override.

Examples

blockquote {
  direction: rtl;
}

Specification

Specification Status Comment
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}} {{Spec2('CSS3 Writing Modes')}} No change.
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}} {{Spec2('CSS2.1')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 {{CompatGeckoDesktop("1.0")}} 5.5 9.2 1.3
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{CompatGeckoMobile("1.0")}} 6 8 3.1

See also

  • {{Cssxref("unicode-bidi")}}

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>direction</code> CSS property should be set to match the direction of the text: <code>rtl</code> for Hebrew or Arabic text and <code>ltr</code> for other scripts. This should normally be done as part of the document (e.g., using the <code>dir</code> attribute in HTML) rather than through direct use of CSS.</p>
<p>The property sets the base text direction of block-level elements and the direction of embeddings created by the {{Cssxref("unicode-bidi")}} property. It also sets the default alignment of text and block-level elements and the direction that cells flow within a table row.</p>
<p>Unlike the <code>dir</code> attribute in HTML, the <code>direction</code> property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of the rows but not inside of the columns.</p>
<p>{{cssbox("direction")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("direction")}}</pre>
<pre>
direction: ltr
direction: rtl

direction: inherit
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    <code>ltr</code></dt>
  <dd>
    The default value of <code>direction</code>. Text and other elements go from left to right</dd>
  <dt>
    <code>rtl</code></dt>
  <dd>
    Text and other elements go from right to left</dd>
</dl>
<p>For the <code>direction</code> property to have any effect on inline-level elements, the {{Cssxref("unicode-bidi")}} property's value must be <code>embed</code> or <code>override</code>.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
blockquote {
  direction: rtl;
}
</pre>
<h2 id="Specification" name="Specification">Specification</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}</td>
      <td>{{Spec2('CSS3 Writing Modes')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.0</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>5.5</td>
        <td>9.2</td>
        <td>1.3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoMobile("1.0")}}</td>
        <td>6</td>
        <td>8</td>
        <td>3.1</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{Cssxref("unicode-bidi")}}</li>
</ul>
Revert to this revision