blob: a89e7a1b6c0f5d768532926f7a292883127cf41c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
---
title: direction
slug: Web/CSS/direction
tags:
- Referencia_CSS
translation_of: Web/CSS/direction
---
<p>
{{ CSSRef() }}
</p>
<h3 id="Resumo" name="Resumo"> Resumo </h3>
<p>The <code>direction</code> 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>
<ul><li> Valor inicial: <code>ltr</code>
</li><li> Aplica-se a: todos os elementos
</li><li> Herdado: sim
</li><li> Porcentagens: N/A
</li><li> Mídia: <a href="pt/CSS/Media/Visual">visual</a>
</li></ul>
<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3>
<pre class="eval">direction: [ 'ltr' | 'rtl' | inherit ] ;
</pre>
<h3 id="Valores" name="Valores"> Valores </h3>
<dl><dt> ltr </dt><dd> The default value of <code>direction</code>. Text and other elements go from left to right
</dd><dt> rtl </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 'embed' or 'override'.
</p>
<h3 id="Exemplos" name="Exemplos"> Exemplos </h3>
<pre class="eval">blockquote {
direction : rtl ;
}
</pre>
<h3 id="Notas" name="Notas"> Notas </h3>
<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>
<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o"> Especificação </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#direction">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction">CSS 3 Text Module</a>
</li></ul>
<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3>
<p>{{ Cssxref("unicode-bidi") }}
</p><p><span class="comment">Categorias</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p>{{ languages( { "en": "en/CSS/direction", "fr": "fr/CSS/direction", "pl": "pl/CSS/direction" } ) }}
|
