up

2-ui/1-document/11-coordinates/article.md

@@ -4,7 +4,7 @@ To move elements around we should be familiar with coordinates.
 
 Most JavaScript methods deal with one of two coordinate systems:
 
-1. Relative to the window top/left.
+1. Relative to the window(or another viewport) top/left.
 2. Relative to the document top/left.
 
 It's important to understand the difference and which type is where.
@@ -27,9 +27,9 @@ Like this:
 ![](coords.png)
 
 
-Window coordinates do not take the scrolled out part of the document into account, they are calculated from the "window itself".
+Window coordinates do not take the scrolled out part of the document into account, they are calculated from the window left-upper corner.
 
-In other words, when we scroll the page, the element goes up or down and *its window coordinates change*. That's kind of important.
+In other words, when we scroll the page, the element goes up or down, *its window coordinates change*. That's very important.
 
 ```online
 Click the button to see its window coordinates:
@@ -48,12 +48,12 @@ If you scroll the page, the button position changes, and window coordinates as w
 
 Also:
 
-- Coordinates may be decimal fractions. That's normal, internally browser uses them for calculations. We don't have to round them when setting to `style.position.left/top` etc.
-- Coordinates may be negative. For instance, if the page is scrolled down and its top edge is above the window then `elem.getBoundingClientRect().top` is negative.
-- Some browsers also add to the result `getBoundingClientRect` properties `width` and `height`. We could also get the same by the substraction: `height=bottom-top`, `width=right-left`.
+- Coordinates may be decimal fractions. That's normal, internally browser uses them for calculations. We don't have to round them when setting to `style.position.left/top`, the browser is fine with fractions.
+- Coordinates may be negative. For instance, if the page is scrolled down and the `elem` top is now above the window then `elem.getBoundingClientRect().top` is negative.
+- Some browsers (like Chrome) also add to the result `getBoundingClientRect` properties `width` and `height`. We can get them also by substraction: `height=bottom-top`, `width=right-left`.
 
 ```warn header="Coordinates right/bottom are different from CSS properties"
-If we compare window coordinates vs CSS positioning, then they are closest to `position:fixed` -- the position relative to the viewport.
+If we compare window coordinates versus CSS positioning, then there are obvious similarities to `position:fixed` -- also the position relative to the viewport.
 
 But in CSS the `right` property means the distance from the right edge, and the `bottom` -- from the bottom edge.
 
@@ -102,9 +102,11 @@ elem.style.background = ''; // Error!
 ```
 ````
 
-## Usage for position:fixed
+## Using for position:fixed
 
-Most of time we need coordinates to position something. In CSS to position an element relative to the viewport we use `position:fixed` together with the coorinates, usually  `left/top`.
+Most of time we need coordinates to position something. In CSS, to position an element relative to the viewport we use `position:fixed` together with `left/top` (or `right/bottom`).
+
+We can use `getBoundingClientRect` to get coordinates of an element, and then to show something near it.
 
 For instance, the function `createMessageUnder(elem, html)` below shows the message under `elem`:
 
@@ -143,21 +145,21 @@ Click the button to run it:
 <button id="coords-show-mark">Button with id="coords-show-mark", the message will appear under it</button>
 ```
 
-The code can be modified to show the message at the left, right, below, apply CSS animations to "fade it in" and so on.
+The code can be modified to show the message at the left, right, below, apply CSS animations to "fade it in" and so on. That's easy, as we have all the coordinates and sizes of the element.
 
-**But note the important detail: when the page is scrolled, the message flows away from the button.**
+But note the important detail: when the page is scrolled, the message flows away from the button.
 
-The reason is obvious: the message element uses `position: fixed`, so it remains at the same place while the page scrolls away.
+The reason is obvious: the message element relies on `position:fixed`, so it remains at the same place of the window while the page scrolls away.
 
-To change that, we need to use document-based coordinates. We'll cover them in the next chapter.
+To change that, we need to use document-based coordinates and `position:absolute`.
 
 ## Document coordinates
 
 Document-relative coordinates start from the left-upper corner of the document, not the window.
 
-In CSS, window coordinates correspond to `position:fixed`, while document coordinates are similar to `position:absolute` (out of other positioned elements, of course).
+In CSS, window coordinates correspond to `position:fixed`, while document coordinates are similar to `position:absolute` on top.
 
-We need document coordinates to stick something at a certain place of the document, so that it remains there during a page scroll.
+We can use `position:absolute` and `top/left` to put something at a certain place of the document, so that it remains there during a page scroll. But we need the right coordinates first.
 
 For clarity we'll call window coordinates `(clientX,clientY)` and document coordinates `(pageX,pageY)`.
 
@@ -167,25 +169,26 @@ When the page is not scrolled, then window coordinate and document coordinates a
 
 And if we scroll it, then `(clientX,clientY)` change, because they are relative to the window, but `(pageX,pageY)` remain the same.
 
-Here's the same page after the vertical scroll.
-
-- `clientY` becomes `0`, because the element is now on window top.
-- `clientX` doesn't change, we didn't scroll horizontally.
-- `pageX` and `pageY` remain the same, because they are relative to the *document*.
+Here's the same page after the vertical scroll:
 
 ![](document-window-coordinates-scroll.png)
 
+- `clientY` of the header `"From today's featured article"` became `0`, because the element is now on window top.
+- `clientX` didn't change, as we didn't scroll horizontally.
+- `pageX` and `pageY` coordinates of the element are still the same, because they are relative to the document.
+
 ## Getting document coordinates [#getCoords]
 
-There's no standard method to get document coordinates. But it's easy to write it.
+There's no standard method to get document coordinates of an element. But it's easy to write it.
 
 The two coordinate systems are connected by the formula:
-- `pageY = clientY + current vertical scroll`.
-- `pageX = clientX + current horizontal scroll`.
+- `pageY` = `clientY` + height of the scrolled-out vertical part of the document.
+- `pageX` = `clientX` + width of the scrolled-out horizontal part of the document.
 
-Our function `getCoords(elem)` will take window coordinates from `elem.getBoundingClientRect()` and add the current scroll to them.
+The function `getCoords(elem)` will take window coordinates from `elem.getBoundingClientRect()` and add the current scroll to them:
 
 ```js
+// get document coordinates of the element
 function getCoords(elem) {
   let box = elem.getBoundingClientRect();
 
@@ -201,8 +204,8 @@ function getCoords(elem) {
 Any point on the page has coordinates:
 
 1. Relative to the window -- `elem.getBoundingClientRect()`.
-2. Relative to the document -- `elem.getBoundingClientRect()` plus the current scroll.
+2. Relative to the document -- `elem.getBoundingClientRect()` plus the current page scroll.
 
 Window coordinates are great to use with `position:fixed`, and document coordinates do well with `position:absolute`.
 
-Both coordinate systems have their "pro" and "contra", there are times we need one or the other one, just like CSS `position`.
+Both coordinate systems have their "pro" and "contra", there are times we need one or the other one, just like CSS `position` `absolute` and `fixed`.