diff options
| author | tristantheb <tristantheb@users.noreply.github.com> | 2021-06-19 10:25:05 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-06-19 10:25:05 +0200 |
| commit | a47584de1bd47788cb5aa6178fa88b31977b2a8e (patch) | |
| tree | 1c153a5dd0e939a3ef819df87d6b988da950352f /files/fr/web/html/element/bdi | |
| parent | 1b0940218952a8132ceb9e4b56792ad47e94d552 (diff) | |
| download | translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.gz translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.bz2 translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.zip | |
UPDATE: Update translation of the HTML elements — 🛠 Priority work area (#500)
* UPDATE: Updating pages starting with A
* FIX: Update missing KS to html anchor
* Review HTML Element a
* Review HTML Element abbr
* Review HTML Element acronym
* Review HTML Element address
* Review HTML Element applet
* Review HTML Element area
* Review HTML Element article
* Review HTML Element aside
* Review HTML Element audio
* UPDATE: Updating pages wtarting with B
* Review HTML Element b
* Review HTML Element base
* Review HTML Element basefont
* Review HTML Element bdi
* Review HTML Element bdo
* Review HTML Element big
* Review HTML Element blink
* Review HTML Element blockquote
* Review HTML Element body
* Review HTML Element br
* Review HTML Element button
* Review HTML Element button - rm HTMLRef
* Review HTML Element button - lint link
* UPDATE: Updating pages starting with C
* UPDATE: Updating pages starting with D
* UPDATE: Refresh the reference page
* UPDATE: Updating pages starting with E
* Review HTML Element canvas
* Review HTML Element caption
* Review HTML Element center
* Review HTML Element cite
* UPDATE: Updating pages starting with F
* BCD: Update all updated pages with new BCD format
* FIX: add missing bracket
* Review - HTML element - code
* Review - HTML Element - col
* Review - HTML Element - colgroup
* Review - HTML Element - content
* Review - HTML Element - data
* Review - HTML Element - datalist
* Review - HTML Element - dd
* Review - HTML Element - del
* Review - HTML Element
* Review - HTML Element - dfn
* Review - HTML Element - dialog
* Review - HTML element - dir
* Review - HTML Element div
* Review - HTML Element - dl
* Review - HTML Element - dt
* Review - HTML Element - em
* Review - HTML Element - embed
* Review - HTML Element - fieldset
* Review - HTML Element - figcaption
* Review - HTML Element - figure
* Review - HTML Element - font
* Review - HTML Element - footer
* Review - HTML Element - form
* Review - HTML Element - frame
* Review - HTML Element - frameset
* Review updates since PR start - A
* Review updates since PR start - B
* Review updates since PR start - C
* Review updates since PR start - D
* Review updates since PR start - F
Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html/element/bdi')
| -rw-r--r-- | files/fr/web/html/element/bdi/index.html | 199 |
1 files changed, 89 insertions, 110 deletions
diff --git a/files/fr/web/html/element/bdi/index.html b/files/fr/web/html/element/bdi/index.html index cb0e30ee63..858ece9f1f 100644 --- a/files/fr/web/html/element/bdi/index.html +++ b/files/fr/web/html/element/bdi/index.html @@ -2,68 +2,107 @@ title: '<bdi> : l''élément d''isolation bidirectionnelle' slug: Web/HTML/Element/bdi tags: + - BDI - BiDi + - Directionality - Element - HTML + - HTML text-level semantics + - HTML:Flow content + - HTML:Palpable Content + - HTML:Phrasing content + - Internationalization + - Left-to-Right - Reference + - Right-to-left + - Text - Web + - direction + - i18n + - ltr + - rtl translation_of: Web/HTML/Element/bdi +browser-compat: html.elements.bdi --- <div>{{HTMLRef}}</div> -<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> +<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> <div>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Cet élément est utile lorsqu'on intègre du texte dont on ignore la directivité (provenant d'une base de données par exemple), au sein d'un autre texte dont la direction est connue.</p> - -<p class="note"><strong>Note :</strong> On peut également utiliser l'attribut {{htmlattrxref("dir")}} afin de surcharger la directionnalité de l'élément décidée par l'agent utilisateur pour le contenu de l'élément <code><bdi></code>.</p> - -<p>Un texte bidirectionnel est un texte qui contient à la fois des suites de caractères à lire de gauche à droite (LTR pour <em>left-to-right</em>) et des suites de caractères à lire de droite à gauche (RTL pour <em>right-to-left</em>), par exemple une citation en arabe dans un texte en néerlandais. Les navigateurs implémentent <a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">l'algorithme de bidirectionnalité Unicode</a> afin de gérer ces cas. Dans cet algorithme, les caractères ont une directionnalité implicite : les caractères latins sont considérés comme LTR et les caractères arabes comme RTL par exemple. D'autres caractères, comme les espaces ou certains caractères de ponctuation sont considérés comme neutres et leur directionnalité est fournie par les caractères environnant.</p> +<p>Un texte bidirectionnel est un texte qui contient à la fois des suites de caractères à lire de gauche à droite (LTR en anglais pour <i>left-to-right</i>) et des suites de caractères à lire de droite à gauche (RTL en anglais pour <i>right-to-left</i>), par exemple une citation en arabe dans un texte en néerlandais. Les navigateurs implémentent <a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">l'algorithme de bidirection Unicode (W3C)(document en anglais)</a> afin de gérer ces cas. Dans cet algorithme, les caractères ont une direction implicite : les caractères latins sont considérés comme allant de gauche à droite et les caractères arabes comme allant de droite à gauche par exemple. D'autres caractères, comme les espaces ou certains caractères de ponctuation sont considérés comme neutres et leur direction est fournie par les caractères environnants.</p> <p>La plupart du temps, cet algorithme fournira le bon résultat, sans que l'auteur ait besoin de fournir un balisage spécifique. Toutefois, dans certains cas, il faudra aider l'algorithme et c'est là qu'intervient <code><bdi></code>.</p> -<p>L'élément <code><bdi></code> est utilisé afin d'encadrer un fragment de texte pour indiquer à l'algorithme de traiter ce texte avec une directionnalité différente du texte qui l'entoure. Cela fonctionne selon deux axes :</p> +<p>L'élément <code><bdi></code> est utilisé afin d'encadrer un fragment de texte pour indiquer à l'algorithme de traiter ce texte avec une direction différente du texte qui l'entoure. Cela fonctionne selon deux axes :</p> <ul> - <li>La directionnalité du texte contenu dans <code><bdi></code> <em>n'influence pas</em> la directionnalité du texte environnant.</li> - <li>La directionnalité du texte contenu dans <code><bdi></code> <em>n'est pas influencée</em> par la directionnalité du texte environnant.</li> + <li>La direction du texte contenu dans <code><bdi></code> <em>n'influence pas</em> la direction du texte environnant.</li> + <li>La direction du texte contenu dans <code><bdi></code> <em>n'est pas influencée</em> par la direction du texte environnant.</li> </ul> <p>Prenons le texte suivant :</p> -<pre class="no-line-numbers">TEXTE-INJECTÉ - 1re place</pre> +<pre class="brush: plain">TEXTE-INJECTÉ - 1re place</pre> -<p>Si <code>TEXTE-INJECTÉ</code> est un texte LTR, aucun problème. En revanche, si <code>TEXTE-INJECTÉ</code> est RTL, <code> - 1</code> sera considéré comme du texte RTL (car ce fragment est composé de caractères neutres/faibles pour la directionnalité) et le résultat sera donc un mélange incohérent :</p> +<p>Si <code>TEXTE-INJECTÉ</code> est un texte écrit de gauche à droite, aucun problème. En revanche, si <code>TEXTE-INJECTÉ</code> est un texte écrit de droite à gauche, <code>- 1</code> sera considéré comme du texte RTL (car ce fragment est composé de caractères neutres/faibles pour la direction) et le résultat sera donc un mélange incohérent :</p> -<pre class="no-line-numbers">1 - TEXTE-INJECTÉre place</pre> +<pre class="brush: plain">1 - TEXTE-INJECTÉre place</pre> -<p>Si on connaît d'avance la directionnalité de <code>TEXTE-INJECTÉ</code>, on peut corriger le problème en enveloppant <code>TEXTE-INJECTÉ</code> dans un élément {{HTMLElement("span")}} avec un attribut {{htmlattrxref("dir")}} décrivant la bonne directionnalité. Cependant, si on ne connaît pas la directionnalité à l'avance (<code>TEXTE-INJECTÉ</code> provenant d'une base de données ou étant saisi par un utilisateur), on utilisera <code><bdi></code> afin d'empêcher la directionnalité de <code>TEXTE-INJECTÉ</code> d'avoir un impact sur le texte environnant.</p> +<p>Si on connaît d'avance la direction de <code>TEXTE-INJECTÉ</code>, on peut corriger le problème en enveloppant <code>TEXTE-INJECTÉ</code> dans un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> avec un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-dir"><code>dir</code></a> décrivant la bonne direction. Cependant, si on ne connaît pas la direction à l'avance (<code>TEXTE-INJECTÉ</code> provenant d'une base de données ou étant saisi par un utilisateur), on utilisera <code><bdi></code> afin d'empêcher la direction de <code>TEXTE-INJECTÉ</code> d'avoir un impact sur le texte environnant.</p> -<p>Bien que le même effet de rendu puisse être créé avec la règle CSS {{cssxref("unicode-bidi")}}<code> : isolate</code> sur un élément {{HTMLElement("span")}} ou toute méthode de formatage du texte, la sémantique est ici uniquement portée par l'élément <code><bdi></code> . Les navigateurs peuvent notamment ignorer la mise en forme induite par la feuille CSS. Dans ce cas, le texte serait bien affiché en utilisant l'élément HTML mais deviendrait inutilisable si seul CSS est utilisé pour apporter cette information.</p> +<p>Bien que le même effet de rendu puisse être créé avec la règle CSS <a href="/fr/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a><code> : isolate</code> sur un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> ou toute méthode de formatage du texte, la sémantique est ici uniquement portée par l'élément <code><bdi></code>. Les navigateurs peuvent notamment ignorer la mise en forme induite par la feuille CSS. Dans ce cas, le texte serait bien affiché en utilisant l'élément HTML mais deviendrait inutilisable si seul CSS est utilisé pour apporter cette information.</p> <p>Utiliser <code><span dir="auto"></code> aura le même effet qu'utiliser <code><bdi></code> mais la sémantique portée sera moindre.</p> -<p>Pour en apprendre plus sur le texte bidirectionnel en HTML, nous vous invitons à lire <a href="/fr/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm">cet article sur l'algorithme qui détermine la direction du texte</a>.</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme tous les éléments HTML, cet élément dispose des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>. Cependant il a une sémantique légèrement différente. En effet, l'attribut <code><strong>dir</strong></code> n'est pas hérité. S'il n'est pas renseigné, sa valeur par défaut sera <code>auto</code> et le navigateur décidera de la direction à appliquer selon le contenu de l'élément si aucune valeur parmi <code>"rtl"</code>, <code>"ltr"</code> n'est fournie.</p> +<p>Comme tous les éléments HTML, cet élément dispose des <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>. Cependant il a une sémantique légèrement différente. En effet, l'attribut <code><strong>dir</strong></code> n'est pas hérité. S'il n'est pas renseigné, sa valeur par défaut sera <code>auto</code> et le navigateur décidera de la direction à appliquer selon le contenu de l'élément si aucune valeur parmi <code>"rtl"</code>, <code>"ltr"</code> n'est fournie.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="Texte_écrit_de_gauche_à_droite">Texte écrit de gauche à droite</h3> +<h3 id="no_<bdi>_with_only_ltr">Texte de gauche à droite uniquement, sans <bdi></h3> -<p>Cet exemple affiche les gagnants d'une compétition grâce à des éléments {{HTMLElement("span")}}. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :</p> +<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> - 1re place</li> - <li><span class="name">Jerry Cruncher</span> - 2e place</li> -</ul> -</pre> + <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 { @@ -72,23 +111,20 @@ translation_of: Web/HTML/Element/bdi padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; -} -</pre> +}</pre> </div> </div> +<div>{{EmbedLiveSample("bdi-sample-1", "100%", 150)}}</div> -<p>{{EmbedLiveSample('bdi-sample-1','','120','','','bdi-example')}}</p> - -<h3 id="Texte_de_droite_à_gauche">Texte de droite à gauche</h3> +<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> +<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"> <pre class="brush: html"><ul> - <li><span class="name">اَلأَعْشَى</span> - 1re place</li> - <li><span class="name">Jerry Cruncher</span> - 2e place</li> -</ul> -</pre> + <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 { @@ -97,23 +133,20 @@ translation_of: Web/HTML/Element/bdi padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; -} -</pre> +}</pre> </div> </div> +<div>{{EmbedLiveSample("bdi-sample-2", "100%", 150)}}</div> -<p>{{ EmbedLiveSample('bdi-sample-2','','120','','','bdi-example') }}</p> - -<h3 id="Utiliser_<bdi>_avec_du_texte_utilisant_les_deux_directions">Utiliser <code><bdi></code> avec du texte utilisant les deux directions</h3> +<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"> <pre class="brush: html"><ul> - <li><bdi class="name">اَلأَعْشَى</bdi> - 1re place</li> - <li><bdi class="name">Jerry Cruncher</bdi> - 2e place</li> -</ul> -</pre> + <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 { @@ -122,78 +155,24 @@ translation_of: Web/HTML/Element/bdi padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; -} -</pre> +}</pre> </div> </div> +<div>{{EmbedLiveSample("bdi-sample-3", "100%", 150)}}</div> -<p>{{ EmbedLiveSample('bdi-sample-3','','120','','','bdi-example') }}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdi-element', '<bdi>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.bdi")}}</p> +<p>{{Compat}}</p> -<h2 dir="ltr" id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/Localization">La localisation et l'internationalisation</a></li> - <li>{{HTMLElement("bdo")}}</li> - <li>Les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}</li> + <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/">Le balisage en ligne et texte bidirectionnel en HTML (W3C)</a> (en anglais)</li> + <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">Les bases de l'algorithme bidirectionnel Unicode (W3C)</a> (en anglais)</li> + <li>Un élément HTML connexe : <a href="/fr/docs/Web/HTML/Element/bdo"><code><bdo></code></a></li> + <li>Les propriétés CSS <a href="/fr/docs/Web/CSS/direction"><code>direction</code></a> et <a href="/fr/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a></li> </ul> |