---
title: element.dir
slug: Web/API/HTMLElement/dir
tags:
  - DOM
  - Référence_du_DOM_Gecko
translation_of: Web/API/HTMLElement/dir
---
<p>{{ ApiRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
<p>L'attribut <code><strong>dir</strong></code> obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.</p>
<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h2>
<pre class="brush: js">var <var>DirectionActuelle</var> = referenceElement.dir;
referenceElement.dir = <var>NouvelleDirection</var>;
</pre>
<p><var>DirectionActuelle</var> est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. <var>NouvelleDirection</var> est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.</p>
<p>Les valeurs possibles pour <code><strong>dir</strong></code> sont <strong><code>ltr</code></strong>, pour de gauche à droite (<em>left-to-right</em>), et <strong><code>rtl</code></strong>, pour de droite à gauche (<em>right-to-left</em>).</p>
<h2 id="Exemple" name="Exemple">Exemple</h2>
<pre class="brush: js">var para = document.getElementById("para1");
para.dir = "rtl";
// change la direction du texte sur un paragraphe identifié par "para1"
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).</p>
<p>Une image peut avoir sont attribut <code>dir</code> positionné à « rtl », auquel cas les attributs <code>title</code> et <code>alt</code> seront formatés et définis comme allant de droite à gauche.</p>
<p>Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.</p>
<div class="geckoVersionNote">
 <p>{{ gecko_callout_heading("7.0") }}</p>
 <p>Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.</p>
</div>
<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740">traduction</a> (non normative)</small></td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>
<p> </p>