up

Author: iliakan

2-ui/1-document/08-styles-and-classes/article.md

@@ -250,12 +250,12 @@ For instance:
 ```smart header="Computed and resolved values"
 There are two concepts in [CSS](https://drafts.csswg.org/cssom/#resolved-values):
 
-1. A *computed* style value is the value after all CSS rules and CSS inheritance is applied, as the  result of the CSS cascade. If can look like `width:auto` or `font-size:125%`.
-2. A *resolved* style value is the one finally applied to the element. Values like `auto` or `125%` are still abstract. The browser takes the computed value and makes all units fixed and absolute, for instance: `width:212px` or `font-size:16px`. For geometry properties resolved values may have a floating point, like `width:50.5px`.
+1. A *computed* style value is the value after all CSS rules and CSS inheritance is applied, as the  result of the CSS cascade. If can look like `height:1em` or `font-size:125%`.
+2. A *resolved* style value is the one finally applied to the element. Values like `1em` or `125%` are relative. The browser takes the computed value and makes all units fixed and absolute, for instance: `height:20px` or `font-size:16px`. For geometry properties resolved values may have a floating point, like `width:50.5px`.
 
 Long time ago `getComputedStyle` was created to get computed values, but it turned out that resolved values are much more convenient, and the standard changed.
 
-So nowadays `getComputedStyle` actually returns the final, resolved value in absolute units.
+So nowadays `getComputedStyle` actually returns the resolved value of the property.
 ```
 
 ````warn header="`getComputedStyle` requires the full property name"

2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md

@@ -3,3 +3,5 @@ The solution is:
 ```js
 let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
 ```
+
+In other words: (full height) minus (scrolled out top part) minus (visible part) -- that's exactly the scrolled out bottom part.

2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md

@@ -6,6 +6,6 @@ importance: 3
 
 Write the code that returns the width of a standard scrollbar.
 
-For Windows it usually varies between `12px` and `20px`, but if the browser reserves no space for it, then it may be `0px`.
+For Windows it usually varies between `12px` and `20px`. If the browser doesn't reserves any space for it, then it may be `0px`.
 
-P.S. The code should work in any HTML document, do not depend on its content.
+P.S. The code should work for any HTML document, do not depend on its content.

2-ui/1-document/09-size-and-scroll/article.md

@@ -154,7 +154,7 @@ They include the content width together with paddings, but without the scrollbar
 
 ![](metric-client-width-height.png)
 
-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-height `200px` plus top and bottom paddings (`2*20px`) total `240px`.
+On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `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`.
 
@@ -167,7 +167,7 @@ So when there's no padding we can use `clientWidth/clientHeight` to get the cont
 ## scrollWidth/Height
 
 - Properties `clientWidth/clientHeight` only account for the visible part of the element.
-- Properties `scrollWidth/scrollHeight` add the scrolled out (hidden) part:
+- Properties `scrollWidth/scrollHeight` also include the scrolled out (hidden) part:
 
 ![](metric-scroll-width-height.png)
 
@@ -176,14 +176,17 @@ 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:
+We can use these properties to expand the element wide to its full width/height.
+
+Like this:
 
 ```js
+// expand the element to the full content height
 element.style.height = element.scrollHeight + 'px';
 ```
 
 ```online
-Click the button to open wide the element:
+Click the button to expand the element:
 
 <div id="element" style="width:300px;height:200px; padding: 0;overflow: auto; border:1px solid black;">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</div>
 
@@ -192,43 +195,43 @@ Click the button to open wide the element:
 
 ## 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.
+Properties `scrollLeft/scrollTop` are 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:
+On the picture below we can see `scrollHeight` and `scrollTop` for a block with a vertical scroll.
 
 ![](metric-scroll-top.png)
 
+In other words, `scrollTop` is "how much is scrolled up".
+
 ````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.
+Most geometry properties that are read-only, but `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.
+If you click the element below, the code `elem.scrollTop+=10` executes. That makes the element content scroll `10px` below.
 
 <div onclick="this.scrollTop+=10" style="cursor:pointer;border:1px solid black;width:100px;height:80px;overflow:auto">Click<br>Me<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div>
 ```
 
-Setting `scrollTop` to `0` or `Infinity` will make the element scroll to the top/bottom respectively.
+Setting `scrollTop` to `0` or `Infinity` will make the element scroll to the very top/bottom respectively.
 ````
 
 ## 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.
+We've just covered geometry properties of DOM elements. They are normally used to get widths, heights and calculate distances.
 
-Now let's see what we should not use.
+But as we know from the chapter <info:styles-and-classes>, we can read CSS-height and width using `getComputedStyle`.
 
-As we know from the chapter <info:styles-and-classes>, we can read CSS-height and width using `getComputedStyle`.
-
-So we can try to read the width of an element like this:
+So why not 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?
+Why we should use geometry properties instead? There are two reasons:
 
-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.
+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 CSS purposes may break such JavaScript.
 2. Second, CSS `width/height` may be `auto`, for instance for an inline element:
 
     ```html run
@@ -243,11 +246,9 @@ Why we should use geometry properties instead?
 
     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.
+And there's one more reason: a scrollbar. Sometimes the code that works fine without a scrollbar starts to bug with it, because 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.
+...But with `getComputedStyle(elem).width` the situation is different. Some browsers (e.g. Chrome) return the real inner width, minus the scrollbar, and some of them (e.g. Firefox) -- CSS width (ignore the scrollbar). Such cross-browser differences is the reason not to use `getComputedStyle`, but rather rely on geometry propeties.
 
 ```online
 If your browser reserves the space for a scrollbar (most browsers for Windows do), then you can test it below.
@@ -256,7 +257,7 @@ If your browser reserves the space for a scrollbar (most browsers for Windows do
 
 The element with text has CSS `width:300px`.
 
-Desktop Windows Firefox, Chrome, Edge all reserve the space for the scrollbar. But  Firefox shows `300px`, while Chrome and Edge show less. That's because Firefox returns the CSS width and other browsers return the "real" width.
+On a Desktop Windows OS, Firefox, Chrome, Edge all reserve the space for the scrollbar. But  Firefox shows `300px`, while Chrome and Edge show less. That's because Firefox returns the CSS width and other browsers return the "real" width.
 ```
 
 Please note that the described difference are only about reading `getComputedStyle(...).width` from JavaScript, visually everything is correct.

2-ui/1-document/09-size-and-scroll/metric-client-width-height.png

@@ -1,6 +1,6 @@
 # Window sizes and scroll
 
-How to find out the browser window width? How to get the full height of the document, including the scrolled out part? How to scroll the page from JavaScript?
+How to find out the width of the browser window? How to get the full height of the document, including the scrolled out part? How to scroll the page using JavaScript?
 
 From the DOM point of view, the root document element is `document.documentElement`. That element corresponds to `<html>` and has geometry properties described in the [previous chapter](info:size-and-scroll). For some cases we can use it, but there are additional methods and pecularities important enough to consider.
 
@@ -13,39 +13,38 @@ Properties `clientWidth/clientHeight` of `document.documentElement` is exactly w
 ![](document-client-width-height.png)
 
 ```online
-For instance, the button below shows the height of your window:
+For instance, this button shows the height of your window:
+
 <button onclick="alert(document.documentElement.clientHeight)">alert(document.documentElement.clientHeight)</button>
 ```
 
 ````warn header="Not `window.innerWidth/Height`"
 Browsers also support properties `window.innerWidth/innerHeight`. They look like what we want. So what's the difference?
 
-Properties `clientWidth/clientHeight`, if there's a scrollbar occupying some space, return the width/height inside it. In other words, they return width/height of the visible part of the document, available for the content.
+If there's a scrollbar occupying some space, `clientWidth/clientHeight` provide the width/height inside it. In other words, they return width/height of the visible part of the document, available for the content.
 
 And `window.innerWidth/innerHeight` ignore the scrollbar.
 
-If there's a scrollbar and it occupies some space, then these two lines show different values:
+If there's a scrollbar, and it occupies some space, then these two lines show different values:
 ```js run
 alert( window.innerWidth ); // full window width
 alert( document.documentElement.clientWidth ); // window width minus the scrollbar
 ```
 
-In most cases we need the *available* window width: to draw or position something. That is: inside scrollbars if there are any. So we should use `documentElement.clientWidth`.
+In most cases we need the *available* window width: to draw or position something. That is: inside scrollbars if there are any. So we should use `documentElement.clientHeight/Width`.
 ````
 
 ```warn header="`DOCTYPE` is important"
 Please note: top-level geometry properties may work a little bit differently when there's no `<!DOCTYPE HTML>` in HTML. Odd things are possible.
 
-In modern HTML we should always write it. Generally that's not a JavaScript question, but here it affects JavaScript as well.
+In modern HTML we should always write `DOCTYPE`. Generally that's not a JavaScript question, but here it affects JavaScript as well.
 ```
 
 ## Width/height of the document
 
-Theoretically, as the visibble part of the document is `documentElement.clientWidth/Height`, the full size should be  `documentElement.scrollWidth/scrollHeight`.
-
-That's correct for regular elements.
+Theoretically, as the root document element is `documentElement.clientWidth/Height`, and it encloses all the content, we could measure its full size as `documentElement.scrollWidth/scrollHeight`.
 
-But for the whole page these properties do not work as intended. In Chrome/Safari/Opera if there's no scroll, then `documentElement.scrollHeight` may be even less than  `documentElement.clientHeight`! For regular elements that's a nonsense.
+These properties work well for regular elements. But for the whole page these properties do not work as intended. In Chrome/Safari/Opera if there's no scroll, then `documentElement.scrollHeight` may be even less than  `documentElement.clientHeight`! For regular elements that's a nonsense.
 
 To have a reliable full window size, we should take the maximum of these properties:
 
@@ -63,11 +62,11 @@ Why so? Better don't ask. These inconsistencies come from ancient times, not a "
 
 ## Get the current scroll [#page-scroll]
 
-Regular elements have their current scroll state in `scrollLeft/scrollTop`.
+Regular elements have their current scroll state in `elem.scrollLeft/scrollTop`.
 
-What's with the page? Most browsers provide that for the whole page in `documentElement.scrollLeft/Top`, but Chrome/Safari/Opera have bugs (like [157855](https://code.google.com/p/chromium/issues/detail?id=157855), [106133](https://bugs.webkit.org/show_bug.cgi?id=106133)) and we should use  `document.body` instead of `document.documentElement` there.
+What's with the page? Most browsers provide `documentElement.scrollLeft/Top` for the document scroll, but Chrome/Safari/Opera have bugs (like [157855](https://code.google.com/p/chromium/issues/detail?id=157855), [106133](https://bugs.webkit.org/show_bug.cgi?id=106133)) and we should use  `document.body` instead of `document.documentElement` there.
 
-Luckily, we don't have to remember that at all, because of the special properties `window.pageXOffset/pageYOffset`:
+Luckily, we don't have to remember these pecularities at all, because of the special properties `window.pageXOffset/pageYOffset`:
 
 ```js run
 alert('Current scroll from the top: ' + window.pageYOffset);
@@ -79,7 +78,9 @@ These properties are read-only.
 ## Scrolling: scrollTo, scrollBy, scrollIntoView [#window-scroll]
 
 ```warn
-To scroll the page from JavaScript, its DOM must be fully loaded.
+To scroll the page from JavaScript, its DOM must be fully built.
+
+For instance, if we try to scroll the page from the script in `<head>`, it won't work.
 ```
 
 Regular elements can be scrolled by changing `scrollTop/scrollLeft`.
@@ -88,9 +89,7 @@ We can do the same for the page:
 - For all browsers except Chrome/Safari/Opera: modify  `document.documentElement.scrollTop/Left`.
 - In Chrome/Safari/Opera: use `document.body.scrollTop/Left` instead.
 
-It should work.
-
-But there's a simpler, more universal solution: special methods  [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
+It should work, but smells like cross-browser incompatibilities. Not good. Fortunately, there's a simpler, more universal solution: special methods  [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
 
 - The method `scrollBy(x,y)` scrolls the page relative to its current position. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
 
@@ -107,16 +106,16 @@ But there's a simpler, more universal solution: special methods  [window.scrollB
     <button onclick="window.scrollTo(0,0)">window.scrollTo(0,0)</button>
     ```
 
-These properties are cross-browser.
+These methods work for all browsers the same way.
 
 ## scrollIntoView
 
 For completeness, let's cover one more method:  [elem.scrollIntoView(top)](mdn:api/Element/scrollIntoView).
 
-The call to `elem.scrollIntoView(top)` scrolls the page to make `elem` visible. It has one argument `top`:
+The call to `elem.scrollIntoView(top)` scrolls the page to make `elem` visible. It has one argument:
 
-- if `top=true` (that's the default), then the page will be scrolled to make `elem` appear on the top of the window, upper side of the element aligned with the window top.
-- if `top=false`, then the element bottom is aligned with the window bottom.
+- if `top=true` (that's the default), then the page will be scrolled to make `elem` appear on the top of the window. The upper edge of the element is aligned with the window top.
+- if `top=false`, then the page scrolls to make `elem` appear at the bottom. The bottom edge of the element is aligned with the window bottom.
 
 ```online
 The button below scrolls the page to make itself show at the window top:
@@ -130,7 +129,7 @@ And this button scrolls the page to show it at the bottom:
 
 ## Forbid the scrolling
 
-Sometimes we need to make the document "unscrollable". For instance, when we need to show a large message over it, and we want the visitor to interact with that message, not with the document.
+Sometimes we need to make the document "unscrollable". For instance, when we need to cover it with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document.
 
 To make the document unscrollable, its enough to set `document.body.style.overflow = "hidden"`. The page will freeze on its current scroll.
 
@@ -148,7 +147,7 @@ We can use the same technique to "freeze" the scroll for other elements, not jus
 
 The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free, and the content "jumps" to fill it.
 
-That looks a bit odd, but can be worked around if we compare `clientWidth` before and after the freeze, and if it increased (the content area became wider) then add `padding` to `document.body`.
+That looks a bit odd, but can be worked around if we compare `clientWidth` before and after the freeze, and if it increased (the scrollbar disappeared) then add `padding` to `document.body` in place of the scrollbar, to keep the content width same.
 
 ## Summary
 
@@ -168,8 +167,8 @@ Geometry:
 Scrolling:
 
 - Read the current scroll: `window.pageYOffset/pageXOffset`.
-- Scroll the page:
+- Change the current scroll:
 
     - `window.scrollTo(pageX,pageY)` -- absolute coordinates,
-    - `window.scrollBy(x,y)` -- scroll relative the current place?
-    - `elem.scrollIntoView(top)` -- scroll to make `elem` visible.
+    - `window.scrollBy(x,y)` -- scroll relative the current place,
+    - `elem.scrollIntoView(top)` -- scroll to make `elem` visible (align with the top/bottom of the window).