direction

  • Raccourci de la révision : CSS/direction
  • Titre de la révision : direction
  • ID de la révision : 355039
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS direction doit être paramétrée afin de correspondre à la direction du texte :rtl (right to left) pour les texte en hébreu ou en arabe et ltr pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant l'attribut dir en HTML) plutôt qu'avec une feuille de style CSS.

La propriété définit la direction principale du texte des éléments de type bloc et celle des éléments incorporés créés par la propriété {{ Cssxref("unicode-bidi") }}. Elle définit également l'alignement par défaut du texte et des éléments de type bloc, ainsi que le sens de progression des cellules dans une ligne de tableau.

  • {{Xref_cssinitial()}} ltr
  • S'applique à tous les éléments
  • {{Xref_cssinherited()}} oui
  • Média {{Xref_cssvisual()}}
  • {{Xref_csscomputed()}} comme spécifiée

Syntaxe

direction: [ 'ltr' | 'rtl' | inherit ] ;

Valeurs

ltr 
Valeur par défaut de direction. Le contenu, texte ou autre, va de la gauche vers la droite.
rtl 
Le contenu, texte ou autre, va de la droite vers la gauche.

Pour que la propriété direction s'applique aux éléments de type en-ligne, la valeur de la propriété {{ Cssxref("unicode-bidi") }} doit être embed ou override.

Exemples

blockquote {
  direction : rtl ;
}

Notes

Contrairement à l'attribut HTML dir, la propriété CSS direction n'est pas héritée des colonnes de tableaux par les cellules, car l'héritage CSS suit l'arbre du document et que les cellules de tableau appartiennent à un rang et non à une colonne.

Spécification

Voir également

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

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>direction</code> doit être paramétrée afin de correspondre à la direction du texte&nbsp;<code>:rtl</code> (right to left) pour les texte en hébreu ou en arabe et <code>ltr</code> pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant l'attribut <code>dir</code> en HTML) plutôt qu'avec une feuille de style CSS.</p>
<p>La propriété définit la direction principale du texte des éléments de type bloc et celle des éléments incorporés créés par la propriété {{ Cssxref("unicode-bidi") }}. Elle définit également l'alignement par défaut du texte et des éléments de type bloc, ainsi que le sens de progression des cellules dans une ligne de tableau.</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial()}} </dfn><code>ltr</code></li>
  <li><dfn>S'applique à&nbsp;</dfn>tous les éléments</li>
  <li><dfn>{{Xref_cssinherited()}} </dfn>oui</li>
  <li><dfn>Média </dfn>{{Xref_cssvisual()}}</li>
  <li><dfn>{{Xref_csscomputed()}} </dfn>comme spécifiée</li>
</ul>
<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
direction: [ 'ltr' | 'rtl' | inherit ]&nbsp;;
</pre>
<h3 id="Valeurs" name="Valeurs">Valeurs</h3>
<dl>
  <dt>
    ltr&nbsp;</dt>
  <dd>
    Valeur par défaut de <code>direction</code>. Le contenu, texte ou autre, va de la gauche vers la droite.</dd>
  <dt>
    rtl&nbsp;</dt>
  <dd>
    Le contenu, texte ou autre, va de la droite vers la gauche.</dd>
</dl>
<p>Pour que la propriété <code>direction</code> s'applique aux éléments de type en-ligne, la valeur de la propriété {{ Cssxref("unicode-bidi") }} doit être <code>embed</code> ou <code>override</code>.</p>
<h2 id="Exemples" name="Exemples">Exemples</h2>
<pre class="eval">
blockquote {
  direction&nbsp;: rtl&nbsp;;
}
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>Contrairement à l'attribut HTML <code>dir</code>, la propriété CSS <code>direction</code> n'est pas héritée des colonnes de tableaux par les cellules, car l'héritage CSS suit l'arbre du document et que les cellules de tableau appartiennent à un rang et non à une colonne.</p>
<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
<ul>
  <li><a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/visuren.html#direction">CSS2 (fr)</a> ou <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#direction">CSS 2.1 (en)</a></li>
  <li><a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction">CSS 3 Text Module (en)</a></li>
</ul>
<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h2>
<p>{{ Cssxref("unicode-bidi") }}</p>
Revenir à cette révision