fix typos

dandgerson · dandgerson · commit 6d68d053fad0 · 2019-05-27T03:22:13.000+03:00
diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md
@@ -1,8 +1,8 @@
 # Размеры и прокрутка элементов
 
-Существует множество JavaScript-свойтв, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики.
+Существует множество JavaScript-свойcтв, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики.
 
-Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript, для того, чтобы правильно вычислить координаты.
+Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript для того, чтобы правильно вычислять координаты.
 
 
 ## Простой пример
@@ -33,13 +33,13 @@
 Вы можете [открыть этот документ в песочнице](sandbox:metric).
 
 ```smart header="Внимание, полоса прокрутки"
-В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) оставляют место для неё забирая его у области отведённой для содержимого.
+В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) оставляют место для неё, забирая его у области отведённой для содержимого.
 
 Таким образом, без учёта полосы прокрутки ширина области содержимого будет `300px`, но если предположить, что ширина полосы прокрутки равна `16px` (её точное значение зависит от устройства и браузера), тогда остаётся только `300 - 16 = 284px` и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Если её не будет, то вычисления будут немного проще.
 ```
 
 ```smart header="CSS-свойство `padding-bottom` может быть заполнено текстом"
-Обычно внутренние отступы изображены пустыми на иллюстрациях, но если элемент содержит много текста, они могут перекрывать друг друга, в этом случае браузеры отображают такой текст "перекрывающим" `нижний внутренний отступ` (padding-bottom). Вы можете наблюдать это в примерах. Несмотря на это, отступы есть, пока не указано иное.
+Обычно внутренние отступы изображены пустыми на иллюстрациях, но если элемент содержит много текста, они могут перекрывать друг друга. В этом случае браузеры отображают такой текст "перекрывающим" `нижний внутренний отступ` (padding-bottom). Вы можете наблюдать это в примерах. Несмотря на это, отступы есть, если не указано иное.
 ```
 
 ## Метрики
@@ -76,7 +76,7 @@
 </main>
 <script>
   alert(example.offsetParent.id); // main
-  alert(example.offsetLeft); // 180 (note: a number, not a string "180px")
+  alert(example.offsetLeft); // 180 (обратите внимание: число, а не строка "180px")
   alert(example.offsetTop); // 180
 </script>
 ```
@@ -86,7 +86,7 @@
 
 Существует несколько частных случаев, когда `offsetParent` равно `null`:
 
-1. Для скрытых элементов (с CSS-свойством `display:none`, либо когда его нет в документе).
+1. Для скрытых элементов (с CSS-свойством `display:none`, либо, когда его нет в документе).
 2. Для элементов `<body>` и `<html>`.
 3. Для элементов с `position:fixed`.
 
@@ -134,33 +134,33 @@ function isHidden(elem) {
 
 ![](metric-client-left-top.png)
 
-...На на самом деле -- оно вовсе не рамки, а отступ внутренней части элемента от внешней.
+...На на самом деле -- это вовсе не рамки, а отступ внутренней части элемента от внешней.
 
 В чём же разница?
 
-Она возникает, когда документ располагается справа налево (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство `clientLeft` включает в себя еще и ширину полосы прокрутки.
+Она возникает, когда документ располагается справа налево (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство `clientLeft` включает в себя ещё и ширину полосы прокрутки.
 
 В этом случае, `clientLeft` будет равно `25`, но с прокруткой -- `25 + 16 = 41`:
 
 ![](metric-client-left-top-rtl.png)
 
 ## Свойства: clientWidth/Height
 
-Эти свойства -- размер элемента внутри рамок border.
+Эти свойства -- размер области внутри рамок элемента.
 
-Они включают в себя ширину содержимого width вместе с полями padding, но без прокрутки:
+Они включают в себя ширину содержимого width вместе с полями внутреннего отступа, но без прокрутки:
 
 ![](metric-client-width-height.png)
 
 На рисунке выше посмотрим вначале на `clientHeight`: её посчитать проще всего. Горизонтально прокрутки нет, так что это в точности то, что внутри рамок: CSS-высота `200px` плюс верхнее и нижнее поля (`2 * 20px`), итого `240px`.
 
 Теперь `clientWidth` -- ширина содержимого здесь равна не `300px`, а `284px`, т.к. `16px` отведено для полосы прокрутки. Таким образом: `284px` плюс левый и правый отступы -- всего `324px`.
 
-**Если нет внутренних отступов, то `clientWidth/Height` в точности равны размеру области содержимого, внутри рамок и полосы прокрутки (если она есть).**
+**Если нет внутренних отступов, то `clientWidth/Height` в точности равны размеру области содержимого внутри рамок и полосы прокрутки (если она есть).**
 
 ![](metric-client-width-nopadding.png)
 
-Поэтому, в тех случаях, когда мы точно знаем, что отступов нет, можно использовать `clientWidth/clientHeight` для получения размеров внутренней области содержимого.
+Поэтому в тех случаях, когда мы точно знаем, что отступов нет, можно использовать `clientWidth/clientHeight` для получения размеров внутренней области содержимого.
 
 ## Свойства: scrollWidth/Height
 
@@ -201,8 +201,8 @@ element.style.height = `${element.scrollHeight}px`;
 
 Другими словами, свойство `scrollTop` -- это "сколько уже прокручено вверх".
 
-````smart header="`scrollLeft/scrollTop` можно изменять"
-В отличие от большинства свойств, которые доступны только для чтения, значения `scrollLeft/scrollTop` можно изменить, и браузер выполнит прокрутку элемента..
+````smart header="`Свойства scrollLeft/scrollTop` можно изменять"
+В отличие от большинства свойств, которые доступны только для чтения, значения `scrollLeft/scrollTop` можно изменять, и браузер выполнит прокрутку элемента..
 
 ```online
 При клике на следующий элемент будет выполняться код  `elem.scrollTop += 10`. Поэтому он будет прокручиваться на `10px` вниз.
@@ -219,7 +219,7 @@ element.style.height = `${element.scrollHeight}px`;
 
 Но как мы знаем из главы <info:styles-and-classes>, CSS-высоту и ширину можно извлечь, используя `getComputedStyle`.
 
-Не лучше ли получать ширину так, вместо метрик?
+Не лучше ли так получать ширину вместо метрик?
 
 ```js run
 let elem = document.body;
@@ -230,7 +230,7 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem
 Почему мы должны использовать свойства метрик вместо этого? На это есть две причины:
 
 1. Во-первых, CSS-свойства width/height зависят от другого свойства -- `box-sizing` которое определяет, "что такое", собственно, эти CSS-ширина и высота. Получается, что изменение `box-sizing`, к примеру, для более удобной вёрстки, сломает такой JavaScript.
-2. Во-вторых, в CSS свойства `width/height` могут быть равны `auto`, например, для инлайн-элемента:
+2. Во-вторых, в CSS -- свойства `width/height` могут быть равны `auto`, например, для инлайн-элемента:
 
     ```html run
     <span id="elem">Привет!</span>
@@ -242,11 +242,11 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem
     </script>
     ```
 
-    Конечно, с точки зрения CSS `width:auto` is perfectly normal, – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в `px`, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина width из CSS вообще бесполезна.
+    Конечно, с точки зрения CSS `width:auto` – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в `px`, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина width из CSS вообще бесполезна.
 
-Есть и ещё одна причина: Полоса прокрутки. Бывает без полосы прокрутки код работает прекрасно, но стоит ей появиться, как начинают появляться баги. Так происходит потому, что полоса прокрутки "отъедает" место от области внутреннего содежимого в некоторых браузерах. Таким образом, реальная ширина содержимого *меньше* CSS-ширины. И это учитывают свойства `clientWidth/clientHeight`.
+Есть и ещё одна причина: полоса прокрутки. Бывает без полосы прокрутки код работает прекрасно, но стоит ей появиться, как начинают появляться баги. Так происходит потому, что полоса прокрутки "отъедает" место от области внутреннего содежимого в некоторых браузерах. Таким образом, реальная ширина содержимого *меньше* CSS-ширины. Как раз это и учитывают свойства `clientWidth/clientHeight`.
 
-...Но с `getComputedStyle(elem).width` ситуация иная. Некоторые браузеры (например, Chrome) возвращают реальную внутреннюю ширину, минус ширину полосы прокрутки, а некоторые (например, Firefox) -- именно CSS-свойство (игнорируя полосу прокрутки). Эти кросс-браузерные отличия – ещё один повод не использовать `getComputedStyle`, а использовать свойства-метрики.
+...Но с `getComputedStyle(elem).width` ситуация иная. Некоторые браузеры (например, Chrome) возвращают реальную внутреннюю ширину с вычетом ширины полосы прокрутки, а некоторые (например, Firefox) -- именно CSS-свойство (игнорируя полосу прокрутки). Эти кросс-браузерные отличия – ещё один повод не использовать `getComputedStyle`, а использовать свойства-метрики.
 
 ```online
 Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.
@@ -265,11 +265,11 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem
 У элементов есть следующие метрики:
 
 - `offsetParent` -- ближайший CSS-спозиционированный родитель или `td`, `th`, `table`, `body`.
-- `offsetLeft/offsetTop` -- позиция в пикселях верхнего левого угла, относительно `offsetParent`.
+- `offsetLeft/offsetTop` -- позиция в пикселях верхнего-левого угла, относительно `offsetParent`.
 - `offsetWidth/offsetHeight` -- "внешняя" ширина/высота элемента, включая рамки.
-- `clientLeft/clientTop` -- расстояние от верхнего-левого внешнего угла до верхнего-левого внутренного угла элемента. Для операционных систем с ориентацией слева на право, эти свойства равны ширинам левой/верхней рамки. Если же вертикальная полоса прокрутки находится слева, то `clientLeft` включает в своё значение её ширину.
+- `clientLeft/clientTop` -- расстояние от верхнего-левого внешнего угла до верхнего-левого внутренного угла элемента. Для операционных систем с ориентацией слева на право, эти свойства равны ширинам левой/верхней рамки. Если же вертикальная полоса прокрутки находится не справа, а слева, то `clientLeft` включает в своё значение её ширину.
 - `clientWidth/clientHeight` -- ширина/высота содержимого вместе с полями внутреннего отступа, но без полосы прокрутки.
-- `scrollWidth/scrollHeight` -- ширина/высота содержимого, включая прокручиваемую область. Включает в себя внутренние отступы и не включает полосы прокрутки.
+- `scrollWidth/scrollHeight` -- ширина/высота содержимого, включая прокручиваемую область. Включает в себя внутренние отступы и не включает полосу прокрутки.
 - `scrollLeft/scrollTop` -- ширина/высота прокрученной части элемента, считается от верхнего левого угла.
 
 Все свойства, доступны только для чтения, кроме `scrollLeft/scrollTop`. Изменение этих свойств заставляет браузер прокручивать элемент.
