diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md
index c56f55cf..ac7b46da 100644
--- a/2-ui/99-ui-misc/02-selection-range/article.md
+++ b/2-ui/99-ui-misc/02-selection-range/article.md
@@ -8,19 +8,17 @@ libs:
In this chapter we'll cover selection in the document, as well as selection in form fields, such as ``.
-JavaScript can get the existing selection, select/deselect both as a whole or partially, remove the selected part from the document, wrap it into a tag, and so on.
+JavaScript can access an existing selection, select/deselect DOM nodes as a whole or partially, remove the selected content from the document, wrap it into a tag, and so on.
-You can get ready to use recipes at the end, in "Summary" section. But you'll get much more if you read the whole chapter. The underlying `Range` and `Selection` objects are easy to grasp, and then you'll need no recipes to make them do what you want.
+You can find some recipes for common tasks at the end of the chapter, in "Summary" section. Maybe that covers your current needs, but you'll get much more if you read the whole text.
+
+The underlying `Range` and `Selection` objects are easy to grasp, and then you'll need no recipes to make them do what you want.
## Range
-The basic concept of selection is [Range](https://dom.spec.whatwg.org/#ranges): basically, a pair of "boundary points": range start and range end.
+The basic concept of selection is [Range](https://dom.spec.whatwg.org/#ranges), that is essentially a pair of "boundary points": range start and range end.
-Each point represented as a parent DOM node with the relative offset from its start. If the parent node is an element node, then the offset is a child number, for a text node it's the position in the text. Examples to follow.
-
-Let's select something.
-
-First, we can create a range (the constructor has no parameters):
+A `Range` object is created without parameters:
```js
let range = new Range();
@@ -28,13 +26,18 @@ let range = new Range();
Then we can set the selection boundaries using `range.setStart(node, offset)` and `range.setEnd(node, offset)`.
-For example, consider this fragment of HTML:
+The first argument `node` can be either a text node or an element node. The meaning of the second argument depends on that:
-```html
+- If `node` is a text node, then `offset` must be the position in the text.
+- If `node` is an element node, then `offset` must be the child number.
+
+For example, let's create a range in this fragment:
+
+```html autorun
Example: italic and bold
```
-Here's its DOM structure, note that here text nodes are important for us:
+Here's its DOM structure:
@@ -72,10 +75,17 @@ let selectPDomtree = {
drawHtmlTree(selectPDomtree, 'div.select-p-domtree', 690, 320);
-Let's select `"Example: italic"`. That's two first children of `
` (counting text nodes):
+Let's make a range for `"Example: italic"`.
+
+As we can see, this phrase consists of exactly the first and the second children of `
`:
+- The starting point has `
` as the parent `node`, and `0` as the offset.
+- The ending point also has `
` as the parent `node`, but `2` as the offset (it specifies the range up to, but not including `offset`).
+
+Here's the demo, if you run it, you can see that the text gets selected:
+
```html run
Example: italic and bold
@@ -87,17 +97,14 @@ Let's select `"Example: italic"`. That's two first children of `
` (cou
range.setEnd(p, 2);
*/!*
- // toString of a range returns its content as text (without tags)
- alert(range); // Example: italic
+ // toString of a range returns its content as text, without tags
+ console.log(range); // Example: italic
- // apply this range for document selection (explained later)
+ // let's apply this range for document selection (explained later)
document.getSelection().addRange(range);
```
-- `range.setStart(p, 0)` -- sets the start at the 0th child of `
` (that's the text node `"Example: "`).
-- `range.setEnd(p, 2)` -- spans the range up to (but not including) 2nd child of `
` (that's the text node `" and "`, but as the end is not included, so the last selected node is ``).
-
Here's a more flexible test stand where you try more variants:
```html run autorun
@@ -121,7 +128,7 @@ From – To startContainer(<p>.firstChild)startOffset(=2)commonAncestorContainer(<p>)endContainer(<b>.firstChild)endOffset(=3)
\ No newline at end of file
+
\ No newline at end of file
diff --git a/9-regular-expressions/03-regexp-unicode/article.md b/9-regular-expressions/03-regexp-unicode/article.md
index 60d85ff1..0e0fb88a 100644
--- a/9-regular-expressions/03-regexp-unicode/article.md
+++ b/9-regular-expressions/03-regexp-unicode/article.md
@@ -41,13 +41,13 @@ We can search for characters with a property, written as `pattern:\p{…}`. To u
For instance, `\p{Letter}` denotes a letter in any of language. We can also use `\p{L}`, as `L` is an alias of `Letter`. There are shorter aliases for almost every property.
-In the example below three kinds of letters will be found: English, Georgean and Korean.
+In the example below three kinds of letters will be found: English, Georgian and Korean.
```js run
let str = "A ბ ㄱ";
alert( str.match(/\p{L}/gu) ); // A,ბ,ㄱ
-alert( str.match(/\p{L}/g) ); // null (no matches, as there's no flag "u")
+alert( str.match(/\p{L}/g) ); // null (no matches, \p doesn't work without the flag "u")
```
Here's the main character categories and their subcategories:
diff --git a/figures.sketch b/figures.sketch
index 6ce5e03c..e62fdfae 100644
Binary files a/figures.sketch and b/figures.sketch differ