FIX: Typos and enhancement in Example (issues 97) (#246)

* Typos and enhancement in Example (issues 97)
* Fix some attributes name, update tags, modify typo
* Update image link
* fix broken link to DOMRect in return value

1 files changed, 50 insertions, 30 deletions

diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html
index ba2e4c2a85..7dd9a66904 100644
--- a/files/fr/web/api/element/getboundingclientrect/index.html
+++ b/files/fr/web/api/element/getboundingclientrect/index.html
@@ -1,27 +1,43 @@
 ---
-title: element.getBoundingClientRect
+title: Element.getBoundingClientRect()
 slug: Web/API/Element/getBoundingClientRect
 tags:
   - API
-  - CSSOM
+  - Boundary
+  - Bounding
+  - Bounds
+  - CSSOM View
+  - Client
+  - Containing
+  - DOM
+  - Element
+  - Enclosing
+  - Method
   - Méthode
-  - Référence(2)
+  - Minimum
+  - Rectangle
+  - Reference
+  - Smallest
+  - clientHeight
+  - getBoundingClientRect
+  - getClientRects
+  - offsetHeight
+  - scrollHeight
 translation_of: Web/API/Element/getBoundingClientRect
 ---
 <div>{{APIRef("DOM")}}</div>
 
-<p>La méthode <code><strong>Element.getBoundingClientRect()</strong></code> retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la <a href="/fr/docs/Glossaire/Viewport">zone d'affichage</a>.</p>
+<p class="summary">La méthode <code><strong>Element.getBoundingClientRect()</strong></code> retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la <a href="/fr/docs/Glossary/Viewport">zone d'affichage</a>.</p>
 
-<h2 id="Syntaxe">Syntaxe</h2>
+<h2 id="Syntax">Syntaxe</h2>
 
-<pre class="syntaxbox notranslate"><var>objetRect</var> = <var>object</var>.getBoundingClientRect();
-</pre>
+<pre class="brush:js"><var>objetRect</var> = <var>object</var>.getBoundingClientRect();</pre>
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+<h3 id="Return_value">Valeur de retour</h3>
 
-<p>La valeur de retour est un objet <code><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect">DOMRect</a></code> qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, et <code>height</code>, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que <code>width</code> et <code>height</code> sont relatives au coin en haut à gauche de la zone d'affichage.<img alt="Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode." src="https://mdn.mozillademos.org/files/17155/element-box-diagram.png" style="height: 1099px; width: 1466px;"></p>
+<p>La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, et <code>height</code>, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que <code>width</code> et <code>height</code> sont relatives au coin en haut à gauche de la zone d'affichage.<img alt="Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode." src="element-box-diagram.png"></p>
 
-<p>Les propriétés <code>width</code> et <code>height</code> de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le <code>padding</code> et <code>border-width</code>, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété <code>width</code> ou <code>height</code> de l'élément + <code>padding</code> + <code>border-width</code>. Mais si <code><a href="/fr/docs/Web/CSS/box-sizing">box-sizing: border-box</a></code> est définit pour l'élément, cela correpondrait seulement <code>width</code> ou <code>height</code>.</p>
+<p>Les propriétés <code>width</code> et <code>height</code> de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le <code>padding</code> et <code>border-width</code>, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété <code>width</code> ou <code>height</code> de l'élément + <code>padding</code> + <code>border-width</code>. Mais si <code><a href="/fr/docs/Web/CSS/box-sizing">box-sizing: border-box</a></code> est défini pour l'élément, cela correpondrait seulement <code>width</code> ou <code>height</code>.</p>
 
 <p>La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.</p>
 
@@ -31,11 +47,11 @@ translation_of: Web/API/Element/getBoundingClientRect
 
 <p>Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés <code>top</code> et <code>left</code> (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.</p>
 
-<h3 id="Solution_de_prise_en_charge_multi-navigateurs">Solution de prise en charge multi-navigateurs</h3>
+<h3 id="Cross-browser_fallback">Solution de prise en charge multi-navigateurs</h3>
 
 <p>Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser <code>window.pageXOffset</code> et <code>window.pageYOffset</code> plutôt que <code>window.scrollX</code> et <code>window.scrollY.</code> Les scripts qui ne peuvent pas utiliser <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ou <code>window.scrollY</code> pourront utiliser cette méthode :</p>
 
-<pre class="brush:js notranslate">// Pour scrollX
+<pre class="brush:js">// Pour scrollX
 (((t = document.documentElement) || (t = document.body.parentNode))
   &amp;&amp; typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
 // Pour scrollY
@@ -43,14 +59,13 @@ translation_of: Web/API/Element/getBoundingClientRect
   &amp;&amp; typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
 </pre>
 
-<h2 id="Exemple">Exemple</h2>
+<h2 id="Example">Exemple</h2>
 
 <p>Ce simple exemple récupère l'objet <code>DOMRect</code> représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.</p>
 
-<pre class="brush:html notranslate">&lt;div&gt;&lt;/div&gt;
-</pre>
+<pre class="brush:html">&lt;div&gt;&lt;/div&gt;</pre>
 
-<pre class="brush:css notranslate">div {
+<pre class="brush:css">div {
   width: 400px;
   height: 200px;
   padding: 20px;
@@ -58,24 +73,32 @@ translation_of: Web/API/Element/getBoundingClientRect
   background: purple;
 }</pre>
 
-<pre class="brush:js notranslate">let elem = document.querySelector('div');
-let rect = elem.getBoundingClientRect();
-for (var key in rect) {
+<pre class="brush:js">let <var>elem</var> = document.querySelector('div');
+let <var>rect</var> = elem.getBoundingClientRect();
+for (let <var>key</var> in rect) {
   if(typeof rect[key] !== 'function') {
-    let para = document.createElement('p');
+    let <var>para</var> = document.createElement('p');
     para.textContent  = `${ key } : ${ rect[key] }`;
     document.body.appendChild(para);
   }
 }</pre>
 
-<h2 id="Spécifications">Spécifications</h2>
+<p>{{EmbedLiveSample('Example', '100%', 640)}}</p>
+
+<p>Remarquez comme les <code>width</code>/<code>height</code> sont égales à
+  <code>width</code>/<code>height</code> + <code>padding</code>.</p>
+
+<p>Remarquez aussi que les valeurs de <code>x</code>/<code>left</code>,
+  <code>y</code>/<code>top</code>, <code>right</code>, et <code>bottom</code> sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas.</p>
+
+<h2 id="Specifications">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>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
   </tr>
  </thead>
  <tbody>
@@ -91,11 +114,11 @@ for (var key in rect) {
 
 <p>L'objet <code>DOMRect</code> retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement <code>DOMRectReadOnly</code>. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">ClientRect </a>qu'ils retournent empêche d'ajouter le support de <code>x</code> et <code>y</code>.</p>
 
-<p>En raison de problèmes de comptabilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code>.</p>
+<p>En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code>.</p>
 
 <p>Les propriétés dans l'objet <code>DOMRect</code> retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs <code>in</code> et <code>for...in</code> vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que <code>Object.assign()</code> et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.</p>
 
-<pre class="brush:js notranslate">rect = elt.getBoundingClientRect()
+<pre class="brush:js">rect = elt.getBoundingClientRect()
 // The result in emptyObj is {}
 emptyObj = Object.assign({}, rect)
 emptyObj = { ...rect }
@@ -103,14 +126,11 @@ emptyObj = { ...rect }
 
 <p>Les propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code> de <code>DOMRect</code> sont calculées en utilisant les valeurs des autres propriétés de l'objet.</p>
 
-<ul>
-</ul>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
 
 <div>{{Compat("api.Element.getBoundingClientRect")}}</div>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="See_also">Voir aussi</h2>
 
 <ul>
  <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>