minor

iliakan · iliakan · commit 91311c367984 · 2019-08-05T17:37:43.000+03:00
diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md
@@ -4,7 +4,7 @@ importance: 5
 
 # Найти размер прокрутки снизу
 
-Свойство `elem.scrollTop` содержит размер прокрученной области при отсчёте сверху. А как подсчитать "`scrollBottom`" -- размер прокрутки снизу?
+Свойство `elem.scrollTop` содержит размер прокрученной области при отсчёте сверху. А как подсчитать размер прокрутки снизу (назовём его `scrollBottom`)?
 
 Напишите соответствующее выражение для произвольного элемента `elem`.
 
diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md
@@ -32,44 +32,38 @@
 Вы можете [открыть этот пример в песочнице](sandbox:metric).
 
 ```smart header="Внимание, полоса прокрутки"
-В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) оставляют место для неё, забирая его у области, отведённой для содержимого.
+В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как "content width" выше).
 
-Таким образом, без учёта полосы прокрутки ширина области содержимого будет `300px`, но если предположить, что ширина полосы прокрутки равна `16px` (её точное значение зависит от устройства и браузера), тогда остаётся только `300 - 16 = 284px`, и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Если её не будет, то вычисления будут немного проще.
+Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет `300px`, но если предположить, что ширина полосы прокрутки равна `16px` (её точное значение зависит от устройства и браузера), тогда остаётся только `300 - 16 = 284px`, и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Без неё некоторые вычисления будут проще.
 ```
 
 ```smart header="Область `padding-bottom` (нижний внутренний отступ) может быть заполнена текстом"
-Нижние внутренние отступы `padding-bottom` изображены пустыми на иллюстрациях, но если элемент содержит много текста, то браузеры отображают его перекрывающим `padding-bottom`.
-
-Это заметка, чтобы избежать недопониманий, так как во всех стилях дальнейших примеров `padding-bottom` есть (если не указано противное).
+Нижние внутренние отступы `padding-bottom` изображены пустыми на наших иллюстрациях, но если элемент содержит много текста, то он будет перекрывать `padding-bottom`, это нормально.
 ```
 
 ## Метрики
 
-Вот общая картина:
+Вот общая картина с геометрическими свойствами:
 
 ![](metric-all.svg)
 
 Значениями свойств являются числа, подразумевается, что они в пикселях.
 
-Существует множество свойств, и довольно трудно уместить их на одном изображении, но их значения просты и понятны.
-
-Давайте начнём исследовать их снаружи элемента.
+Давайте начнём исследовать, начиная снаружи элемента.
 
-## Свойства: offsetParent, offsetLeft/Top
+## offsetParent, offsetLeft/Top
 
 Эти свойства редко используются, но так как они являются "самыми внешними" метриками, мы начнём с них.
 
 В свойстве `offsetParent` находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге.
 
-Это ближайший предок, который браузер использует при вычислении координат во время рендеринга.
-
 То есть, ближайший предок, который удовлетворяет следующим условиям:
 
 1. Является CSS-позиционированным (CSS-свойство `position` равно `absolute`, `relative`, `fixed` или `sticky`),
 2. или `<td>`, `<th>`, `<table>`,
 3. или `<body>`.
 
-Свойства `offsetLeft/offsetTop` содержат координаты x/y относительно верхнего левого угла родительского элемента.
+Свойства `offsetLeft/offsetTop` содержат координаты x/y относительно верхнего левого угла `offsetParent`.
 
 В примере ниже внутренний `<div>` имеет элемент `<main>` в качестве `offsetParent`, а свойства `offsetLeft/offsetTop` являются сдвигами относительно верхнего левого угла (`180`):
 
@@ -88,14 +82,13 @@
 
 ![](metric-offset-parent.svg)
 
-
 Существует несколько ситуаций, когда `offsetParent` равно `null`:
 
 1. Для скрытых элементов (с CSS-свойством `display:none` или когда его нет в документе).
 2. Для элементов `<body>` и `<html>`.
 3. Для элементов с `position:fixed`.
 
-## Свойства: offsetWidth/Height
+## offsetWidth/Height
 
 Теперь переходим к самому элементу.
 
@@ -126,7 +119,7 @@ function isHidden(elem) {
 Заметим, что функция `isHidden` также вернёт `true` для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые `<div>`).
 ````
 
-## Свойства: clientTop/Left
+## clientTop/Left
 
 Пойдём дальше. Внутри элемента у нас рамки (border).
 
@@ -145,19 +138,23 @@ function isHidden(elem) {
 
 Она возникает, когда документ располагается справа налево (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство `clientLeft` включает в себя ещё и ширину полосы прокрутки.
 
-В этом случае `clientLeft` будет равно `25`, но с прокруткой -- `25 + 16 = 41`:
+В этом случае `clientLeft` будет равно `25`, но с прокруткой -- `25 + 16 = 41`.
+
+Вот соответствующий пример на иврите:
 
 ![](metric-client-left-top-rtl.svg)
 
-## Свойства: clientWidth/Height
+## clientWidth/Height
 
 Эти свойства -- размер области внутри рамок элемента.
 
 Они включают в себя ширину области содержимого вместе с внутренними отступами `padding`, но без прокрутки:
 
 ![](metric-client-width-height.svg)
 
-На рисунке выше посмотрим вначале на высоту `clientHeight`: её посчитать проще всего. Горизонтальной прокрутки нет, так что это в точности то, что внутри рамок: CSS-высота `200px` плюс верхние и нижние внутренние отступы (`2 * 20px`), итого `240px`.
+На рисунке выше посмотрим вначале на высоту `clientHeight`.
+
+Горизонтальной прокрутки нет, так что это в точности то, что внутри рамок: CSS-высота `200px` плюс верхние и нижние внутренние отступы (`2 * 20px`), итого `240px`.
 
 Теперь `clientWidth` -- ширина содержимого здесь равна не `300px`, а `284px`, т.к. `16px` отведено для полосы прокрутки. Таким образом: `284px` плюс левый и правый отступы -- всего `324px`.
 
@@ -167,10 +164,9 @@ function isHidden(elem) {
 
 Поэтому в тех случаях, когда мы точно знаем, что отступов нет, можно использовать `clientWidth/clientHeight` для получения размеров внутренней области содержимого.
 
-## Свойства: scrollWidth/Height
+## scrollWidth/Height
 
-- Свойства `clientWidth/clientHeight` относятся только к видимой области элемента.
-- Свойства `scrollWidth/scrollHeight` добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали:
+Эти свойства - как `clientWidth/clientHeight`, но также включают в себя прокрученную (которую не видно) часть элемента.
 
 ![](metric-scroll-width-height.svg)
 
@@ -196,7 +192,7 @@ element.style.height = `${element.scrollHeight}px`;
 <button style="padding:0" onclick="element.style.height = `${element.scrollHeight}px`">element.style.height = `${element.scrollHeight}px`</button>
 ```
 
-## Свойства: scrollLeft/scrollTop
+## scrollLeft/scrollTop
 
 Свойства `scrollLeft/scrollTop` -- ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.
 
@@ -234,8 +230,8 @@ alert( getComputedStyle(elem).width ); // показывает CSS-ширину
 
 Почему мы должны использовать свойства-метрики вместо этого? На то есть две причины:
 
-1. Во-первых, CSS-свойства width/height зависят от другого свойства -- `box-sizing`, которое определяет, "что такое", собственно, эти CSS-ширина и высота. Получается, что изменение `box-sizing`, к примеру, для более удобной вёрстки, сломает такой JavaScript.
-2. Во-вторых, в CSS свойства `width/height` могут быть равны `auto`, например, для строчного элемента:
+1. Во-первых, CSS-свойства `width/height` зависят от другого свойства -- `box-sizing`, которое определяет, "что такое", собственно, эти CSS-ширина и высота. Получается, что изменение `box-sizing`, к примеру, для более удобной вёрстки, сломает такой JavaScript.
+2. Во-вторых, в CSS свойства `width/height` могут быть равны `auto`, например, для инлайнового элемента:
 
     ```html run
     <span id="elem">Привет!</span>
@@ -272,9 +268,9 @@ alert( getComputedStyle(elem).width ); // показывает CSS-ширину
 - `offsetParent` -- ближайший CSS-позиционированный родитель или ближайший `td`, `th`, `table`, `body`.
 - `offsetLeft/offsetTop` -- позиция в пикселях верхнего левого угла относительно `offsetParent`.
 - `offsetWidth/offsetHeight` -- "внешняя" ширина/высота элемента, включая рамки.
-- `clientLeft/clientTop` -- расстояние от верхнего левого внешнего угла до верхнего левого внутренного угла элемента. Для операционных систем с ориентацией слева направо эти свойства равны ширинам левой/верхней рамки. Если язык ОС таков, что ориентация справа налево, так что вертикальная полоса прокрутки находится не справа, а слева, то `clientLeft` включает в своё значение её ширину.
-- `clientWidth/clientHeight` -- ширина/высота содержимого вместе с внутренними отступами, но без полосы прокрутки.
+- `clientLeft/clientTop` -- расстояние от верхнего левого внешнего угла до внутренного. Для операционных систем с ориентацией слева-направо эти свойства равны ширинам левой/верхней рамки. Если язык ОС таков, что ориентация справа налево, так что вертикальная полоса прокрутки находится не справа, а слева, то `clientLeft` включает в своё значение её ширину.
+- `clientWidth/clientHeight` -- ширина/высота содержимого вместе с внутренними отступами `padding`, но без полосы прокрутки.
 - `scrollWidth/scrollHeight` -- ширины/высота содержимого, аналогично `clientWidth/Height`, но учитывают прокрученную, невидимую область элемента.
 - `scrollLeft/scrollTop` -- ширина/высота прокрученной сверху части элемента, считается от верхнего левого угла.
 
-Все свойства доступны только для чтения, кроме `scrollLeft/scrollTop`. Изменение этих свойств заставляет браузер прокручивать элемент.
+Все свойства доступны только для чтения, кроме `scrollLeft/scrollTop`, изменение которых заставляет браузер прокручивать элемент.
