minor

Author: iliakan

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

@@ -4,23 +4,21 @@
 
 Большинство соответствующих методов JavaScript работают в одной из двух указанных ниже систем координат:
 
-1. **Относительно окна браузера** - похоже на `position:fixed`, отсчёт идёт от верхнего левого угла окна браузера.
+1. **Относительно окна браузера** - как `position:fixed`, отсчёт идёт от верхнего левого угла окна.
     - мы будем обозначать эти координаты как `clientX/clientY`, причина выбора таких имён будет ясна позже, когда мы изучим свойства событий.
-2. **Относительно документа** - похоже на `position:absolute` на уровне документа, отсчёт идёт от верхнего левого угла документа.
+2. **Относительно документа** - как `position:absolute` на уровне документа, отсчёт идёт от верхнего левого угла документа.
     - мы будем обозначать эти координаты как `pageX/pageY`.
 
-Когда страница полностью прокручена наверх, то верхний левый угол окна совпадает с левым верхним углом документа, из чего следует, что обе системы координат тоже совпадают. Но если происходит прокрутка вниз, то координаты элементов в контексте окна меняются, так как они двигаются, но в то же время их координаты относительно документа остаются такими же.
+Когда страница полностью прокручена в самое начало, то верхний левый угол окна совпадает с левым верхним углом документа, при этом обе этих системы координат тоже совпадают. Но если происходит прокрутка, то координаты элементов в контексте окна меняются, так как они двигаются, но в то же время их координаты относительно документа остаются такими же.
 
-На приведённой картинке слева показана ситуация до прокрутки страницы, а справа - после:
+На приведённой картинке взята точка в документе и показаны её координат до прокрутки (слева) и после (справа):
 
 ![](document-and-window-coordinates-scrolled.svg)
 
-Поскольку документ сдвинулся вверх, то:
-- `pageY` - координата произвольной точки относительно документа осталась без изменений, так как отсчёт по-прежнему ведётся от верхней границы документа (сейчас она прокручена наверх).
+При прокрутке документа:
+- `pageY` - координата точки относительно документа осталась без изменений, так как отсчёт по-прежнему ведётся от верхней границы документа (сейчас она прокручена наверх).
 - `clientY` - координата точки относительно окна изменилась (стрелка на рисунке стала короче), так как точка стала ближе к верхней границе окна.
 
-В этой главе мы увидим и другие примеры координат элементов относительно окна и документа.
-
 ## Координаты относительно окна: getBoundingClientRect
 
 Метод `elem.getBoundingClientRect()` возвращает координаты в контексте окна для минимального по размеру прямоугольника, который заключает в себе элемент `elem`, в виде объекта встроенного класса [DOMRect](https://www.w3.org/TR/geometry-1/#domrect).
@@ -38,7 +36,7 @@
 ```online
 Кликните на кнопку, чтобы увидеть её координаты относительно окна:
 
-<input id="brTest" type="button" value="Показать результат вызова button.getBoundingClientRect() для этой кнопки" onclick='showRect(this)'/>
+<p><input id="brTest" type="button" value="Показать результат вызова button.getBoundingClientRect() для этой кнопки" onclick='showRect(this)'/></p>
 
 <script>
 function showRect(elem) {
@@ -55,20 +53,20 @@ right:${r.right}
 }
 </script>
 
-Если вы прокрутите страницу, то расположение кнопки в окне поменяется, и, соответсвенно, её координаты в контексте окна тоже (при вертикальной прокрутке - `y/top/bottom`).
+Если вы прокрутите страницу, то расположение кнопки в окне поменяется, и, соответственно, её координаты в контексте окна тоже (при вертикальной прокрутке - `y/top/bottom`).
 ```
 
 Вот картинка с результатами вызова `elem.getBoundingClientRect()`:
 
 ![](coordinates.svg)
 
-Как вы видите, `x/y` и `width/height` полностью описывают прямоугольник. Остальные свойства могут быть легко вычислены на их основе:
+Как вы видите, `x/y` и `width/height` уже точно задают прямоугольник. Остальные свойства могут быть легко вычислены на их основе:
 - `left = x`
 - `top = y`
 - `right = x + width`
 - `bottom = y + height`
 
-Также:
+Заметим:
 
 - Координаты могут считаться с десятичной частью, например `10.5`. Это нормально, ведь браузер использует дроби в своих внутренних вычислениях. Мы не обязаны округлять значения при установке `style.position.left/top`.
 - Координаты могут быть отрицательными. Например, если страница прокручена так, что элемент `elem` ушёл вверх за пределы окна, то вызов `elem.getBoundingClientRect().top` вернёт отрицательное значение.
@@ -78,25 +76,27 @@ right:${r.right}
 
 Так что дополнительные зависимые свойства существуют лишь для удобства.
 
-Технически, значения `width/height` могут быть отрицательными, это удобно, чтобы задавать "направленные" прямоугольники, например, для выделения мышью с отмеченным началом и концом.
+Технически, значения `width/height` могут быть отрицательными, это позволяет задать "направленный" прямоугольник, например, для выделения мышью с отмеченным началом и концом.
 
 Вот прямоугольник с отрицательными `width` и `height` (например, `width=-200`, `height=-100`):
 
 ![](coordinates-negative.svg)
 
-Он начинается в своём правом-нижнем углу, и затем "разворачивается" влево-вверх, так как отрицательные width/height ведут его назад по координатам.
+Он начинается в своём правом-нижнем углу, и затем "растёт" влево-вверх, так как отрицательные `width/height` ведут его назад по координатам.
 
 Как вы видите, свойства `left/top` здесь не равны `x/y`. То есть они не дублируют друг друга. Формулы выше могут быть исправлены с учётом возможных отрицательных значений `width/height`. Это достаточно просто сделать, но редко требуется, так как результат вызова `elem.getBoundingClientRect()` всегда возвращает положительные значения для ширины/высоты.
+
+Здесь мы упомянули отрицательные `width/height` лишь для того, чтобы вы поняли, почему эти с виду дублирующие свойства на самом деле не являются дубликатами.
 ```
 
 ```warn header="Internet Explorer и Edge: не поддерживают `x/y`"
 Internet Explorer и Edge не поддерживают свойства `x/y` по историческим причинам.
 
-Таким образом, мы можем либо сделать полифил (добавив соответствующие геттеры в `DomRect.prototype`), либо использовать `top/left`, так как это всегда то же, что и `x/y`, в результате `elem.getBoundingClientRect()`.
+Таким образом, мы можем либо сделать полифил (добавив соответствующие геттеры в `DomRect.prototype`), либо использовать `top/left`, так как это всегда одно и то же при положительных `width/height`, в частности - в результате вызова `elem.getBoundingClientRect()`.
 ```
 
 ```warn header="Координаты right/bottom отличаются от одноимённых CSS-свойств"
-Есть очевидное сходство между координатами относительно окна и CSS `position:fixed`. Ведь такое CSS-позиционирование тоже происходит относительно окна браузера (или его видимой части).
+Есть очевидное сходство между координатами относительно окна и CSS `position:fixed`.
 
 Но в CSS свойство `right` означает расстояние от правого края, и свойство `bottom` означает расстояние от нижнего края окна браузера.
 
@@ -145,9 +145,9 @@ elem.style.background = ''; // Ошибка!
 
 ## Применение для fixed позиционирования
 
-Чаще всего нам нужны координаты для позиционирования чего-либо. В CSS для позиционирования элемента относительно окна браузера используется свойство `position:fixed` вместе со свойствами `left/top` (или `right/bottom`).
+Чаще всего нам нужны координаты для позиционирования чего-либо.
 
-Мы можем вызвать `getBoundingClientRect`, чтобы получить координаты элемента, а затем показать что-то около него.
+Чтобы показать что-то около нужного элемента, мы можем вызвать `getBoundingClientRect`, чтобы получить его координаты элемента, а затем использовать CSS-свойство `position` вместе с `left/top` (или `right/bottom`).
 
 Например, функция `createMessageUnder(elem, html)` ниже показывает сообщение под элементом `elem`:
 
@@ -222,6 +222,26 @@ function getCoords(elem) {
 }
 ```
 
+Если бы в примере выше мы использовали её вместе с `position:absolute`, то при прокрутке сообщение оставалось бы рядом с элементом.
+
+Модифицированная функция `createMessageUnder`:
+
+```js
+function createMessageUnder(elem, html) {
+  let message = document.createElement('div');
+  message.style.cssText = "*!*position:absolute*/!*; color: red";
+
+  let coords = *!*getCoords(elem);*/!*
+
+  message.style.left = coords.left + "px";
+  message.style.top = coords.bottom + "px";
+
+  message.innerHTML = html;
+
+  return message;
+}
+```
+
 ## Итого
 
 Любая точка на странице имеет координаты: