Coordinates

2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md

@@ -1,8 +1,8 @@
-# Outer corners
+# Coins extérieurs
 
-Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
+Les coins extérieurs sont essentiellement ce que nous obtenons de [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
 
-Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
+Les coordonnées du coin supérieur gauche `answer1` et du coin inférieur droit` answer2` :
 
 ```js
 let coords = elem.getBoundingClientRect();
@@ -11,19 +11,19 @@ let answer1 = [coords.left, coords.top];
 let answer2 = [coords.right, coords.bottom];
 ```
 
-# Left-upper inner corner
+# Coin intérieur supérieur gauche
 
-That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
+Cela diffère du coin extérieur par la largeur de la bordure. Un moyen fiable pour obtenir la distance est `clientLeft/clientTop` :
 
 ```js
 let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
 ```
 
-# Right-bottom inner corner
+# Coin intérieur en bas à droite
 
-In our case we need to substract the border size from the outer coordinates.
+Dans notre cas, nous devons soustraire la taille de la bordure des coordonnées extérieures.
 
-We could use CSS way:
+Nous pourrions utiliser la manière CSS :
 
 ```js
 let answer4 = [
@@ -32,7 +32,7 @@ let answer4 = [
 ];
 ```
 
-An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
+Une autre façon serait d'ajouter `clientWidth/clientHeight` aux coordonnées du coin supérieur gauche. C'est probablement encore mieux :
 
 ```js
 let answer4 = [

2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md

@@ -2,23 +2,23 @@ importance: 5
 
 ---
 
-# Find window coordinates of the field
+# Trouver les coordonnées de la fenêtre du champ
 
-In the iframe below you can see a document with the green "field".
+Dans l'iframe ci-dessous, vous pouvez voir un document avec le "champ" vert.
 
-Use JavaScript to find window coordinates of corners pointed by with arrows.
+Utilisez JavaScript pour trouver les coordonnées de la fenêtre des coins pointés par des flèches.
 
-There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
+Il y a une petite fonctionnalité implémentée dans le document pour plus de commodité. Un clic à n'importe quel endroit montre les coordonnées là-bas.
 
 [iframe border=1 height=360 src="source" link edit]
 
-Your code should use DOM to get window coordinates of:
+Votre code doit utiliser DOM pour obtenir les coordonnées de la fenêtre de :
 
-1. Upper-left, outer corner (that's simple).
-2. Bottom-right, outer corner (simple too).
-3. Upper-left, inner corner (a bit harder).
-4. Bottom-right, inner corner (there are several ways, choose one).
+1. Coin extérieur supérieur gauche (c'est simple).
+2. En bas à droite, coin extérieur (simple aussi).
+3. Coin intérieur supérieur gauche (un peu plus dur).
+4. En bas à droite, coin intérieur (il y a plusieurs façons, choisissez-en une).
 
-The coordinates that you calculate should be the same as those returned by the mouse click.
+Les coordonnées que vous calculez doivent être les mêmes que celles renvoyées par le clic de souris.
 
-P.S. The code should also work if the element has another size or border, not bound to any fixed values.
+P.S. Le code devrait également fonctionner si l'élément a une autre taille ou bordure, qui n'est lié à aucune valeur fixe.

2-ui/1-document/11-coordinates/2-position-at/solution.md

@@ -1,4 +1,4 @@
-In this task we only need to accurately calculate the coordinates. See the code for details.
+Dans cet exercice, il suffit de calculer avec précision les coordonnées. Voir le code pour plus de détails.
 
-Please note: the elements must be in the document to read `offsetHeight` and other properties.
-A hidden (`display:none`) or out of the document element has no size.
+Veuillez noter : les éléments doivent être dans le document pour lire `offsetHeight` et d'autres propriétés.
+Un élément caché (`display:none`) ou hors du document n'a pas de taille.

2-ui/1-document/11-coordinates/2-position-at/task.md

@@ -2,17 +2,17 @@ importance: 5
 
 ---
 
-# Show a note near the element
+# Afficher une note près de l'élément
 
-Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element.
+Créez une fonction `positionAt(anchor, position, elem)` qui positionne `elem`, en fonction de `position` près de l'élément `anchor`.
 
-The `position` must be a string with any one of 3 values:
-- `"top"` - position `elem` right above `anchor`
-- `"right"` - position `elem` immediately at the right of `anchor`
-- `"bottom"` - position `elem` right below `anchor`
+La `position` doit être une chaîne de caractères avec l'une des 3 valeurs :
+- `"top"` - position `elem` juste au dessus de `anchor`
+- `"right"` - position `elem` immédiatement à droite de `anchor`
+- `"bottom"` - position `elem` juste en dessous `anchor`
 
-It's used inside function `showNote(anchor, position, html)`, provided in the task source code, that creates a "note" element with given `html` and shows it at the given `position` near the `anchor`.
+Il est utilisé à l'intérieur de la fonction `showNote(anchor, position, html)`, fournie dans le code source de la tâche, qui crée un élément "note" avec `html` donné et l'affiche à la `position` donnée près de `anchor`.
 
-Here's the demo of notes:
+Voici la démo des notes :
 
 [iframe src="solution" height="350" border="1" link]

2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md

@@ -1,4 +1,4 @@
-The solution is actually pretty simple:
+La solution est en fait assez simple :
 
-- Use `position:absolute` in CSS instead of `position:fixed` for `.note`.
-- Use the function [getCoords()](info:coordinates#getCoords) from the chapter <info:coordinates> to get document-relative coordinates.
+- Utilisez `position:absolute` dans le CSS au lieu de `position:fixed` pour `.note`.
+- Utilisez la fonction [getCoords()](info:coordinates#getCoords) du chapitre <info:coordinates> pour obtenir les coordonnées relatives au document.

2-ui/1-document/11-coordinates/3-position-at-absolute/task.md

@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Show a note near the element (absolute)
+# Afficher une note près de l'élément (absolute)
 
-Modify the solution of the [previous task](info:task/position-at) so that the note uses `position:absolute` instead of `position:fixed`.
+Modifier la solution du [précédent exercice](info:task/position-at) de sorte que la note utilise `position:absolute` au lieu de `position:fixed`.
 
-That will prevent its "runaway" from the element when the page scrolls.
+Cela empêchera son "éloignement" de l'élément lorsque la page défile.
 
-Take the solution of that task as a starting point. To test the scroll, add the style `<body style="height: 2000px">`.
+Prenez la solution de cet exercice comme point de départ. Pour tester le défilement, ajoutez le style `<body style="height: 2000px">`.

2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md

@@ -2,27 +2,27 @@ importance: 5
 
 ---
 
-# Position the note inside (absolute)
+# Positionnez la note à l'intérieur (absolute)
 
-Extend the previous task <info:task/position-at-absolute>: teach the function  `positionAt(anchor, position, elem)` to insert `elem` inside the `anchor`.
+Étendre l'exercice précédent <info:task/position-at-absolute> : enseigner la fonction `positionAt(anchor, position, elem)` pour inserer `elem` dans le `anchor`.
 
-New values for `position`:
+Nouvelles valeurs pour `position` :
 
-- `top-out`, `right-out`, `bottom-out` -- work the same as before, they insert the `elem` over/right/under `anchor`.
-- `top-in`, `right-in`, `bottom-in` -- insert `elem` inside the `anchor`: stick it to the upper/right/bottom edge.
+- `top-out`, `right-out`, `bottom-out` -- fonctionnent de la même manière qu'avant, ils insèrent le `elem` au-dessus/à droite/sous le `anchor`.
+- `top-in`, `right-in`, `bottom-in` -- insèrent `elem` à l'intérieur de `anchor` : collez-le sur le bord supérieur/droit/inférieur.
 
-For instance:
+Par exemple :
 
 ```js
-// shows the note above blockquote
+// affiche la note au dessus de blockquote
 positionAt(blockquote, "top-out", note);
 
-// shows the note inside blockquote, at the top
+// affiche la note à l'intérieur de blockquote, en haut
 positionAt(blockquote, "top-in", note);
 ```
 
-The result:
+Le resultat :
 
 [iframe src="solution" height="310" border="1" link]
 
-As the source code, take the solution of the task <info:task/position-at-absolute>.
+En tant que code source, prenez la solution de l'exercice <info:task/position-at-absolute>.