. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+ 
+```
+
+**Высота и ширина изображения неизвестны браузеру до тех пор, пока оно не загрузится, если размер не указан явно.**
+
+После первой загрузки изображение уже будет в кеше браузера, и его размеры будут известны. Но когда браузер впервые видит документ -- он ничего не знает о картинке, поэтому значение `ball.offsetWidth` равно `0`. Вычислить координаты невозможно.
+
+Чтобы это исправить, добавим `width/height` к картинке:
+
+```html
+...
+ `).
+````
+
+## clientTop/Left
+
+Inside the element we have the borders.
+
+To measure them, there are properties `clientTop` and `clientLeft`.
+
+In our example:
+
+- `clientLeft = 25` -- left border width
+- `clientTop = 25` -- top border width
+
+
+
+...But to be precise -- they are not borders, but relative coordinates of the inner side from the outer side.
+
+What's the difference?
+
+It becomes visible when the document is right-to-left (OS in arabic or hebrew languages). The scrollbar is then not on the right, but on the left, and then `clientLeft` also includes the scrollbar width.
+
+In that case `clientLeft` in our example would be not `25`, but with the scrollbar width `25+16=41`:
+
+
+
+## clientWidth/Height
+
+These properties provide the size of the area inside the element borders.
+
+They include the content width together with paddings, but without the scrollbar:
+
+
+
+On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so its exactly the sum of what's inside the borders: CSS-высота `200px` plus top and bottom paddings (`2*20px`) total `240px`.
+
+Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbbar. So the sum is `284px` plus left and right paddings, total `324px`.
+
+**If there are no paddings, then `clientWidth/Height` is exactly the content area, inside the borders and the scrollbar (if any).**
+
+
+
+So when there's no padding we can use `clientWidth/clientHeight` to get the content area size.
+
+## scrollWidth/Height
+
+- Properties `clientWidth/clientHeight` only account for the visible part of the element.
+- Properties `scrollWidth/scrollHeight` add the scrolled out (hidden) part:
+
+
+
+On the picture above:
+
+- `scrollHeight = 723` -- is the full inner height of the content area including the scrolled out part.
+- `scrollWidth = 324` -- is the full inner width, here we have no horizontal scroll, so it equals `clientWidth`.
+
+We can use these properties to open the element wide to its full width/height, by the code:
+
+```js
+element.style.height = element.scrollHeight + 'px';
+```
+
+```online
+Click the button to open wide the element:
+
+, we can read CSS-height and width using `getComputedStyle`.
+
+So we can try to read the width of an element like this:
+
+```js run
+let elem = document.body;
+
+alert( getComputedStyle(elem).width ); // show CSS width for elem
+```
+
+Why we should use geometry properties instead?
+
+1. First, CSS `width/height` depend on another property -- `box-sizing` that defines "what is" CSS width and height. A change in `box-sizing` for purposes of CSS may break such JavaScript.
+2. Second, CSS `width/height` may be `auto`, for instance for an inline element:
+
+ ```html run
+ Hello!
+
+
+ ```
+
+ From the CSS standpoint, `width:auto` is perfectly normal, but in JavaScript we need an exact size in `px` that we can use in calculations. So here CSS width is useless at all.
+
+And there's one more reason. A scrollbar is the reason of many problems. The devil is in the detail. Sometimes the code that works fine without a scrollbar starts to bug with it.
+
+As we've seen a scrollbar takes the space from the content in some browsers. So the real width available for the content is *less* than CSS width. And `clientWidth/clientHeight` take that into account.
+
+...But some browsers also take that into account in `getComputedStyle(elem).width`. That is: some of them return real inner width and some of them -- CSS width. Such cross-browser differences is a reason not to use `getComputedStyle`, but rather rely on geometry propeties.
+
+```online
+Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.
+
+[iframe src="cssWidthScroll" link border=1]
+
+У элемента с текстом в стилях указано `width:300px`.
+
+На момент написания этой главы при тестировании в Chrome под Windows `alert` выводил `283px`, а в Firefox -- `300px`. При этом оба браузера показывали прокрутку. Это из-за того, что Firefox возвращал именно CSS-ширину, а Chrome -- реальную ширину, за вычетом прокрутки.
+```
+
+Описанные разночтения касаются только чтения свойства `getComputedStyle(...).width` из JavaScript, визуальное отображение корректно в обоих случаях.
+
+## Итого
+
+У элементов есть следующие метрики:
+
+- `offsetParent` -- "родитель по дереву рендеринга" -- ближайшая ячейка таблицы, body для статического позиционирования или ближайший позиционированный элемент для других типов позиционирования.
+- `offsetLeft/offsetTop` -- позиция в пикселях левого верхнего угла блока, относительно его `offsetParent`.
+- `offsetWidth/offsetHeight` -- "внешняя" ширина/высота блока, включая рамки.
+- `clientLeft/clientTop` -- отступ области содержимого от левого-верхнего угла элемента. Если операционная система располагает вертикальную прокрутку справа, то равны ширинам левой/верхней рамки, если же слева (ОС на иврите, арабском), то `clientLeft` включает в себя прокрутку.
+- `clientWidth/clientHeight` -- ширина/высота содержимого вместе с полями `padding`, но без полосы прокрутки.
+- `scrollWidth/scrollHeight` -- ширина/высота содержимого, включая прокручиваемую область. Включает в себя `padding` и не включает полосы прокрутки.
+- `scrollLeft/scrollTop` -- ширина/высота прокрученной части документа, считается от верхнего левого угла.
+
+Все свойства, доступны только для чтения, кроме `scrollLeft/scrollTop`. Изменение этих свойств заставляет браузер прокручивать элемент.
+
+В этой главе мы считали, что страница находится в режиме соответствия стандартам. В режиме совместимости -- некоторые старые браузеры требуют `document.body` вместо `documentElement`, в остальном всё так же. Конечно, по возможности, стоит использовать только режим соответствия стандарту.
diff --git a/2-ui/1-document/15-size-and-scroll/cssWidthScroll.view/index.html b/2-ui/1-document/15-size-and-scroll/cssWidthScroll.view/index.html
new file mode 100755
index 00000000..a29f8a3a
--- /dev/null
+++ b/2-ui/1-document/15-size-and-scroll/cssWidthScroll.view/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/2-ui/1-document/15-size-and-scroll/metric-all.png b/2-ui/1-document/15-size-and-scroll/metric-all.png new file mode 100644 index 00000000..6deec908 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-all.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-all@2x.png b/2-ui/1-document/15-size-and-scroll/metric-all@2x.png new file mode 100644 index 00000000..e084c257 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-all@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl.png b/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl.png new file mode 100644 index 00000000..ffb10aa1 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl@2x.png b/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl@2x.png new file mode 100644 index 00000000..48510e6e Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top.png b/2-ui/1-document/15-size-and-scroll/metric-client-left-top.png new file mode 100644 index 00000000..33faf9be Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-left-top.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top@2x.png b/2-ui/1-document/15-size-and-scroll/metric-client-left-top@2x.png new file mode 100644 index 00000000..a8e170ea Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-left-top@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-height.png b/2-ui/1-document/15-size-and-scroll/metric-client-width-height.png new file mode 100644 index 00000000..3f9c6dec Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-width-height.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-height@2x.png b/2-ui/1-document/15-size-and-scroll/metric-client-width-height@2x.png new file mode 100644 index 00000000..0c61fa6a Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-width-height@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding.png b/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding.png new file mode 100644 index 00000000..a183c6b3 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding@2x.png b/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding@2x.png new file mode 100644 index 00000000..5a73f87a Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-css.png b/2-ui/1-document/15-size-and-scroll/metric-css.png new file mode 100644 index 00000000..564c210a Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-css.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-css@2x.png b/2-ui/1-document/15-size-and-scroll/metric-css@2x.png new file mode 100644 index 00000000..e4fd7bb8 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-css@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-parent.png b/2-ui/1-document/15-size-and-scroll/metric-offset-parent.png new file mode 100644 index 00000000..5f1e58f9 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-offset-parent.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-parent@2x.png b/2-ui/1-document/15-size-and-scroll/metric-offset-parent@2x.png new file mode 100644 index 00000000..af62ebdc Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-offset-parent@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-width-height.png b/2-ui/1-document/15-size-and-scroll/metric-offset-width-height.png new file mode 100644 index 00000000..4e7821b8 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-offset-width-height.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-width-height@2x.png b/2-ui/1-document/15-size-and-scroll/metric-offset-width-height@2x.png new file mode 100644 index 00000000..370821e7 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-offset-width-height@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-top.png b/2-ui/1-document/15-size-and-scroll/metric-scroll-top.png new file mode 100644 index 00000000..4bc795aa Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-scroll-top.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-top@2x.png b/2-ui/1-document/15-size-and-scroll/metric-scroll-top@2x.png new file mode 100644 index 00000000..bf0cf711 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-scroll-top@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height.png b/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height.png new file mode 100644 index 00000000..581c2144 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height@2x.png b/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height@2x.png new file mode 100644 index 00000000..1e2a20f5 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric.view/index.html b/2-ui/1-document/15-size-and-scroll/metric.view/index.html new file mode 100755 index 00000000..88392ce7 --- /dev/null +++ b/2-ui/1-document/15-size-and-scroll/metric.view/index.html @@ -0,0 +1,94 @@ + + + + + + + + + + + + +
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
+
+
+```
+
+## scrollLeft/scrollTop
+
+Properties `scrollLeft/scrollTop` show how much is hidden behind the scroll. It's the width/height of the hidden, scrolled out part of the element.
+
+On the picture below we can see `scrollHeight` and `scrollTop` for a block with a vertical scroll:
+
+
+
+````smart header="`scrollLeft/scrollTop` can be modified"
+Unlike most other geometry properties that are read-only, `scrollLeft/scrollTop` can be changed, and the browser will scroll the element.
+
+```online
+If you click the element below, the code `elem.scrollTop += 10` executes. That makes the element content scroll `10px` below.
+
+Click
Me
1
2
3
4
5
6
7
8
9
+```
+````
+
+## Don't take width/height from CSS
+
+We've just covered geometry properties of DOM elements. They are normally used to get widths, heights and distances.
+
+Now let's see what we should not use.
+
+As we know from the chapter Me
1
2
3
4
5
6
7
8
9
+ текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+ текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+ текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+
+
+
+
+ У элемента стоит style="width:300px"
+ + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/15-size-and-scroll/metric-all.png b/2-ui/1-document/15-size-and-scroll/metric-all.png new file mode 100644 index 00000000..6deec908 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-all.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-all@2x.png b/2-ui/1-document/15-size-and-scroll/metric-all@2x.png new file mode 100644 index 00000000..e084c257 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-all@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl.png b/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl.png new file mode 100644 index 00000000..ffb10aa1 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl@2x.png b/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl@2x.png new file mode 100644 index 00000000..48510e6e Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top.png b/2-ui/1-document/15-size-and-scroll/metric-client-left-top.png new file mode 100644 index 00000000..33faf9be Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-left-top.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top@2x.png b/2-ui/1-document/15-size-and-scroll/metric-client-left-top@2x.png new file mode 100644 index 00000000..a8e170ea Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-left-top@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-height.png b/2-ui/1-document/15-size-and-scroll/metric-client-width-height.png new file mode 100644 index 00000000..3f9c6dec Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-width-height.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-height@2x.png b/2-ui/1-document/15-size-and-scroll/metric-client-width-height@2x.png new file mode 100644 index 00000000..0c61fa6a Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-width-height@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding.png b/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding.png new file mode 100644 index 00000000..a183c6b3 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding@2x.png b/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding@2x.png new file mode 100644 index 00000000..5a73f87a Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-css.png b/2-ui/1-document/15-size-and-scroll/metric-css.png new file mode 100644 index 00000000..564c210a Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-css.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-css@2x.png b/2-ui/1-document/15-size-and-scroll/metric-css@2x.png new file mode 100644 index 00000000..e4fd7bb8 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-css@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-parent.png b/2-ui/1-document/15-size-and-scroll/metric-offset-parent.png new file mode 100644 index 00000000..5f1e58f9 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-offset-parent.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-parent@2x.png b/2-ui/1-document/15-size-and-scroll/metric-offset-parent@2x.png new file mode 100644 index 00000000..af62ebdc Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-offset-parent@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-width-height.png b/2-ui/1-document/15-size-and-scroll/metric-offset-width-height.png new file mode 100644 index 00000000..4e7821b8 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-offset-width-height.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-width-height@2x.png b/2-ui/1-document/15-size-and-scroll/metric-offset-width-height@2x.png new file mode 100644 index 00000000..370821e7 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-offset-width-height@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-top.png b/2-ui/1-document/15-size-and-scroll/metric-scroll-top.png new file mode 100644 index 00000000..4bc795aa Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-scroll-top.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-top@2x.png b/2-ui/1-document/15-size-and-scroll/metric-scroll-top@2x.png new file mode 100644 index 00000000..bf0cf711 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-scroll-top@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height.png b/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height.png new file mode 100644 index 00000000..581c2144 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height@2x.png b/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height@2x.png new file mode 100644 index 00000000..1e2a20f5 Binary files /dev/null and b/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height@2x.png differ diff --git a/2-ui/1-document/15-size-and-scroll/metric.view/index.html b/2-ui/1-document/15-size-and-scroll/metric.view/index.html new file mode 100755 index 00000000..88392ce7 --- /dev/null +++ b/2-ui/1-document/15-size-and-scroll/metric.view/index.html @@ -0,0 +1,94 @@ + + + + + + + + + + + + +
+
+
+
+ Introduction
+This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser. + It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the + Ecma General Assembly of June 1997.
+ +That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep + it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.
+ +The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation + of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.
+ +Координаты мыши: ...
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/figures.sketch b/figures.sketch
index 95586868..26530ffa 100644
Binary files a/figures.sketch and b/figures.sketch differ