diff options
Diffstat (limited to 'files/fr/web/html/element/bdi/index.html')
| -rw-r--r-- | files/fr/web/html/element/bdi/index.html | 35 |
1 files changed, 15 insertions, 20 deletions
diff --git a/files/fr/web/html/element/bdi/index.html b/files/fr/web/html/element/bdi/index.html index 858ece9f1f..4fa34fd952 100644 --- a/files/fr/web/html/element/bdi/index.html +++ b/files/fr/web/html/element/bdi/index.html @@ -26,7 +26,7 @@ browser-compat: html.elements.bdi --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément <strong><code><bdi></code></strong> (ou élément d'isolation de texte bidirectionnel) isole une portée (<em>span</em>) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).</p> +<p>L'élément <strong><code><bdi></code></strong> (ou élément d'isolation de texte bidirectionnel) isole une portée (<em>span</em>) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).</p> <div>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</div> @@ -94,71 +94,66 @@ browser-compat: html.elements.bdi <h2 id="examples">Exemples</h2> -<h3 id="no_<bdi>_with_only_ltr">Texte de gauche à droite uniquement, sans <bdi></h3> +<h3 id="Gauche_à_droite_sans_bdi">Gauche à droite sans bdi</h3> <p>Cet exemple affiche les gagnants d'une compétition grâce à des éléments <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :</p> -<div id="bdi-sample-1"> <pre class="brush: html"><ul> <li><span class="name">Henrietta Boffin</span> - 1<sup>re</sup> place</li> <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li> </ul></pre> -<div class="hidden"> -<pre class="brush: css">body { + +<pre class="brush: css hidden">body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; }</pre> -</div> -</div> -<div>{{EmbedLiveSample("bdi-sample-1", "100%", 150)}}</div> + +<p>{{EmbedLiveSample("Gauche_à_droite_sans_bdi", "100%", 150)}}</p> <h3 id="no_<bdi>_with_rtl_text">Texte sans <bdi> avec deux directionnalités</h3> <p>Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie « <code>- 1</code> » sera captée par le texte en RTL et le résultat sera confus :</p> -<div id="bdi-sample-2"> +<h4>Exemple sans bidi</h4> <pre class="brush: html"><ul> <li><span class="name">اَلأَعْشَى</span> - 1<sup>re</sup> place</li> <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li> </ul></pre> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; }</pre> -</div> -</div> -<div>{{EmbedLiveSample("bdi-sample-2", "100%", 150)}}</div> + +<p>{{EmbedLiveSample("Exemple_sans_bidi", "100%", 150)}}</p> <h3 id="using_<bdi>_with_ltr_and_rtl_text">Texte avec <bdi> et deux directionnalités</h3> <p>Pour éviter cet écueil, on pourra utiliser <code><bdi></code> pour séparer le contenu :</p> -<div id="bdi-sample-3"> +<h4>Exemple avec bidi</h4> + <pre class="brush: html"><ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1<sup>re</sup> place</li> <li><bdi class="name">Jerry Cruncher</bdi> - 2<sup>e</sup> place</li> </ul></pre> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; }</pre> -</div> -</div> -<div>{{EmbedLiveSample("bdi-sample-3", "100%", 150)}}</div> + +<p>{{EmbedLiveSample("Exemple_avec_bidi", "100%", 150)}}</p> <h2 id="specifications">Spécifications</h2> |