initial commit

1 files changed, 148 insertions, 0 deletions

diff --git a/files/fr/web/html/element/rb/index.html b/files/fr/web/html/element/rb/index.html
new file mode 100644
index 0000000000..27bb5d7fae
--- /dev/null
+++ b/files/fr/web/html/element/rb/index.html
@@ -0,0 +1,148 @@
+---
+title: '<rb> : l''élément de base ruby'
+slug: Web/HTML/Element/rb
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Ruby
+translation_of: Web/HTML/Element/rb
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">L'élément de <strong>base ruby (<code>&lt;rb&gt;</code>) </strong>est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté.</span> Un élément <code>&lt;rb&gt;</code> devrait encadrer chaque segment atomique du texte de base.</p>
+
+<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.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>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Seuls les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> peuvent être utilisés sur cet élément.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<ul>
+ <li>Les annotations ruby sont utilisées afin d'afficher la prononciation pour les caractères d'Asie orientale tels que les caractères japonais furigana ou les caractères taïwanais bopomofo. L'élément <code>&lt;rb&gt;</code> permet de séparer chaque segment du texte de base ruby.</li>
+ <li>Bien que <code>&lt;rb&gt;</code> ne soit pas un élément vide, il est courant de n'inclure que la balise d'ouverture de chaque élément afin de simplifier le balisage dédié aux annotations ruby.</li>
+ <li>Il faut inclure un élément {{htmlelement("rt")}} pour chaque segment de base <code>&lt;rb&gt;</code> qu'on souhaite annoter.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on fournit une annotation pour le caractère original correspondant à "Kanji" :</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;漢&lt;rb&gt;字
+  &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;kan&lt;rt&gt;ji&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<p>On voit ici que deux éléments <code>&lt;rb&gt;</code> sont inclus et permettent de délimiter les deux segments du texte de base. Pour l'annotation, chaque partie correspondante est délimitée par un élément {{htmlelement("rt")}}.</p>
+
+<p>On aurait également pu écrire cet exemple avec les deux parties du texte de base complètement séparées. Dans ce cas, il n'aurait pas été nécessaire d'inclure les éléments <code>&lt;rb&gt;</code> :</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<div class="hidden">
+<div id="with-ruby">
+<pre class="brush: html">&lt;ruby&gt; &lt;rb&gt;漢&lt;rb&gt;字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;kan&lt;rt&gt;ji&lt;rp&gt;)&lt;/rp&gt; &lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}</pre>
+</div>
+</div>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p>
+
+<p>Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :</p>
+
+<div id="without-ruby">
+<div class="hidden">
+<pre class="brush: html">漢字 (kan ji)</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples.</p>
+</div>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Cet élément peut être l'élément fils d'un élément {{htmlelement("ruby")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>La balise de fin peut être omise si l'élément est immédiatement suivi d'un élément {{HTMLElement("rt")}}, {{HTMLElement("rtc")}} ou {{HTMLElement("rp")}} ou encore par un autre élément <code>&lt;rb&gt;</code> ou s'il n'y a plus de contenu dans l'élément parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Éléments parents autorisés</th>
+   <td>Un élément {{HTMLElement("ruby")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>N'importe quel rôle</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('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '&lt;rb&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.rb")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("ruby")}}</li>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>
+  <p>{{HTMLElement("rtc")}}</p>
+ </li>
+</ul>