jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-02-07 15:12:07 +03:00
parent 19d9078ca3
commit 0d67d5be7f
42 changed files with 1047 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

20
2-ui/1-document/15-metrics/article.md
View file

@ -33,7 +33,7 @@
Результат выглядит так:
<img src="metric-css.png">
<img src="metric-css.svg">
Вы можете открыть [edit src="metric"]этот документ в песочнице[/edit].
@ -64,7 +64,7 @@
Вот общая картина:
<img src="metric-all.png">
<img src="metric-all.svg">
На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.
@ -99,7 +99,7 @@
</main>
```
<img src="metric-offset-parent.png">
<img src="metric-offset-parent.svg">
## offsetWidth/Height
@ -107,7 +107,7 @@
Эти два свойства -- самые простые. Они содержат "внешнюю" ширину/высоту элемента, то есть его полный размер, включая рамки `border`.
<img src="metric-offset-width-height.png">
<img src="metric-offset-width-height.svg">
Для нашего элемента:
<ul>
@ -152,7 +152,7 @@ function isHidden(elem)
<li>`clientTop = 25` -- ширина верхней рамки</li>
</ul>
<img src="metric-client-left-top.png">
<img src="metric-client-left-top.svg">
...Но на самом деле они -- вовсе не рамки, а отступ внутренней части элемента от внешней.
@ -162,7 +162,7 @@ function isHidden(elem)
Получится так:
<img src="metric-client-left-top-rtl.png">
<img src="metric-client-left-top-rtl.svg">
## clientWidth/Height
@ -171,7 +171,7 @@ function isHidden(elem)
Они включают в себя ширину содержимого `width` вместе с полями `padding`, но без прокрутки.
<img src="metric-client-width-height.png">
<img src="metric-client-width-height.svg">
На рисунке выше посмотрим вначале на `clientHeight`, её посчитать проще всего. Прокрутки нет, так что это в точности то, что внутри рамок: CSS-ширина `200px` плюс верхнее и нижнее поля `padding` (по `20px`), итого `240px`.
@ -183,7 +183,7 @@ function isHidden(elem)
**Если `padding` нет, то `clientWidth/Height` в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.**
<img src="metric-client-width-nopadding.png">
<img src="metric-client-width-nopadding.svg">
Поэтому в тех случаях, когда мы точно знаем, что `padding` нет, их используют для определения внутренних размеров элемента.
@ -193,7 +193,7 @@ function isHidden(elem)
Свойства `clientWidth/clientHeight` относятся только к видимой области элемента, а `scrollWidth/scrollHeight` добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.
<img src="metric-scroll-width-height.png">
<img src="metric-scroll-width-height.svg">
На рисунке выше:
<ul>
@ -223,7 +223,7 @@ element.style.height = element.scrollHeight + 'px';
Следующее иллюстрация показывает значения `scrollHeight` и `scrollTop` для блока с вертикальной прокруткой.
<img src="metric-scroll-top.png">
<img src="metric-scroll-top.svg">
[smart header="`scrollLeft/scrollTop` можно изменять"]
В отличие от большинства свойств, которые доступны только для чтения, значения `scrollLeft/scrollTop` можно изменить, и браузер выполнит прокрутку элемента.

BIN
2-ui/1-document/15-metrics/metric-all.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 140 KiB

154
2-ui/1-document/15-metrics/metric-all.svg Normal file
View file

@ -0,0 +1,154 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="670px" height="602px" viewBox="0 0 670 602" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-all.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<rect id="path-1" x="142" y="63" width="324" height="498"></rect>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-all.svg" sketch:type="MSArtboardGroup">
<text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
<tspan x="160" y="94">Introduction</tspan>
<tspan x="257.699219" y="94" font-size="16" font-weight="normal"></tspan>
<tspan x="160" y="123" font-size="16" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="160" y="142" font-size="16" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="160" y="161" font-size="16" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="160" y="180" font-size="16" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="160" y="199" font-size="16" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="160" y="218" font-size="16" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="160" y="237" font-size="16" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="160" y="256" font-size="16" font-weight="normal">subsequent browsers from Netscape and in </tspan>
<tspan x="160" y="275" font-size="16" font-weight="normal">all browsers from Microsoft starting with </tspan>
<tspan x="160" y="294" font-size="16" font-weight="normal">Internet Explorer 3.0.</tspan>
<tspan x="160" y="313" font-size="16" font-weight="normal">The development of this Standard started in </tspan>
<tspan x="160" y="332" font-size="16" font-weight="normal">November 1996. The first edition of this </tspan>
<tspan x="160" y="351" font-size="16" font-weight="normal">Ecma Standard was adopted by the Ecma </tspan>
<tspan x="160" y="370" font-size="16" font-weight="normal">General Assembly of June 1997.</tspan>
<tspan x="160" y="389" font-size="16" font-weight="normal">That Ecma Standard was submitted to ISO/</tspan>
<tspan x="160" y="408" font-size="16" font-weight="normal">IEC JTC 1 for adoption under the fast-track </tspan>
<tspan x="160" y="427" font-size="16" font-weight="normal">procedure, and approved as international </tspan>
<tspan x="160" y="446" font-size="16" font-weight="normal">standard ISO/IEC 16262, in April 1998. </tspan>
<tspan x="160" y="465" font-size="16" font-weight="normal">The Ecma General Assembly of June 1998 </tspan>
<tspan x="160" y="484" font-size="16" font-weight="normal">approved the second edition of ECMA-262 </tspan>
<tspan x="160" y="503" font-size="16" font-weight="normal">to keep it fully aligned with ISO/IEC </tspan>
<tspan x="160" y="522" font-size="16" font-weight="normal">16262. Changes between the first and the </tspan>
<tspan x="160" y="541" font-size="16" font-weight="normal">second edition are editorial in nature.</tspan>
</text>
<path d="M466,187 L466,427 L142,427 L142,187 L466,187 Z M117,162 L491,162 L491,452 L117,452 L117,162 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-2">
<use stroke="none" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
<use stroke-opacity="0.8" stroke="#E8C48F" stroke-width="2" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
</g>
<text id="scrollHeight" sketch:type="MSTextLayer" transform="translate(594.500000, 310.000000) rotate(-90.000000) translate(-594.500000, -310.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
<tspan x="548.316406" y="312">scrollHeight</tspan>
</text>
<text id="offsetHeight" sketch:type="MSTextLayer" transform="translate(560.500000, 310.000000) rotate(-90.000000) translate(-560.500000, -310.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
<tspan x="514.316406" y="312">offsetHeight</tspan>
</text>
<text id="scrollTop" sketch:type="MSTextLayer" transform="translate(510.500000, 114.000000) rotate(-90.000000) translate(-510.500000, -114.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
<tspan x="475.862305" y="116">scrollTop</tspan>
</text>
<path d="M466.5,62 L614.639999,62" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M492.5,163 L584.639999,163" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M492.5,451 L584.639999,451" id="Line-29" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M467.5,189 L539.639999,189" id="Line-33" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M467.5,427 L539.639999,427" id="Line-32" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M466.5,561 L614.639999,561" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M605,64.5 L605,558.5" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-25-decoration-1" d="M605,65.3 C606.05,69.08 606.95,72.32 608,76.1 C605.9,76.1 604.1,76.1 602,76.1 C603.05,72.32 603.95,69.08 605,65.3 C605,65.3 605,65.3 605,65.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-25-decoration-2" d="M605,558.5 C606.05,554.72 606.95,551.48 608,547.7 C605.9,547.7 604.1,547.7 602,547.7 C603.05,551.48 603.95,554.72 605,558.5 C605,558.5 605,558.5 605,558.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M571,164.5 L571,447.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-30-decoration-1" d="M571,165.3 C572.05,169.08 572.95,172.32 574,176.1 C571.9,176.1 570.1,176.1 568,176.1 C569.05,172.32 569.95,169.08 571,165.3 C571,165.3 571,165.3 571,165.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-30-decoration-2" d="M571,447.5 C572.05,443.72 572.95,440.48 574,436.7 C571.9,436.7 570.1,436.7 568,436.7 C569.05,440.48 569.95,443.72 571,447.5 C571,447.5 571,447.5 571,447.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="clientHeight" sketch:type="MSTextLayer" transform="translate(516.500000, 304.000000) rotate(-90.000000) translate(-516.500000, -304.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
<tspan x="470.316406" y="306">clientHeight</tspan>
</text>
<path d="M527,191.5 L527,425.5" id="Line-34" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-34-decoration-1" d="M527,192.3 C528.05,196.08 528.95,199.32 530,203.1 C527.9,203.1 526.1,203.1 524,203.1 C525.05,199.32 525.95,196.08 527,192.3 C527,192.3 527,192.3 527,192.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-34-decoration-2" d="M527,425.5 C528.05,421.72 528.95,418.48 530,414.7 C527.9,414.7 526.1,414.7 524,414.7 C525.05,418.48 525.95,421.72 527,425.5 C527,425.5 527,425.5 527,425.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="offsetTop" sketch:type="MSTextLayer" transform="translate(106.500000, 83.000000) rotate(-90.000000) translate(-106.500000, -83.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
<tspan x="71.8623047" y="85">offsetTop</tspan>
</text>
<text id="clientLeft" sketch:type="MSTextLayer" transform="translate(133.000000, 237.000000) rotate(-90.000000) translate(-133.000000, -237.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#C74A6C">
<tspan x="94.5136719" y="239">clientLeft</tspan>
</text>
<path d="M117,4.5 L117,160.5" id="Line-36" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-36-decoration-1" d="M117,5.3 C118.05,9.08 118.95,12.32 120,16.1 C117.9,16.1 116.1,16.1 114,16.1 C115.05,12.32 115.95,9.08 117,5.3 C117,5.3 117,5.3 117,5.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-36-decoration-2" d="M117,159.5 C118.05,155.72 118.95,152.48 120,148.7 C117.9,148.7 116.1,148.7 114,148.7 C115.05,152.48 115.95,155.72 117,159.5 C117,159.5 117,159.5 117,159.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M521,64.5 L521,157.5" id="Line-31" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-31-decoration-1" d="M521,65.3 C522.05,69.08 522.95,72.32 524,76.1 C521.9,76.1 520.1,76.1 518,76.1 C519.05,72.32 519.95,69.08 521,65.3 C521,65.3 521,65.3 521,65.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-31-decoration-2" d="M521,157.5 C522.05,153.72 522.95,150.48 524,146.7 C521.9,146.7 520.1,146.7 518,146.7 C519.05,150.48 519.95,153.72 521,157.5 C521,157.5 521,157.5 521,157.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-14" fill-opacity="0.88" fill="#FFFFFF" sketch:type="MSShapeGroup" x="154" y="73" width="312" height="89"></rect>
<rect id="Rectangle-15" fill-opacity="0.88" fill="#FFFFFF" sketch:type="MSShapeGroup" x="154" y="451" width="312" height="93"></rect>
<path d="M145.639999,486.09 L444.999985,486.09" id="Line-39" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-39-decoration-1" d="M146.439999,486.09 C150.219999,485.04 153.459999,484.14 157.239999,483.09 C157.239999,485.19 157.239999,486.99 157.239999,489.09 C153.459999,488.04 150.219999,487.14 146.439999,486.09 C146.439999,486.09 146.439999,486.09 146.439999,486.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-39-decoration-2" d="M444.639999,486.09 C440.859999,485.04 437.619999,484.14 433.839999,483.09 C433.839999,485.19 433.839999,486.99 433.839999,489.09 C437.619999,488.04 440.859999,487.14 444.639999,486.09 C444.639999,486.09 444.639999,486.09 444.639999,486.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M445.639999,510 L445.639999,426" id="Line-42" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M141.639999,510 L141.639999,426" id="Line-43" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<text id="clientWidth" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
<tspan x="265.165039" y="478">clientWidth</tspan>
</text>
<path d="M4.63999939,163.09 L114,163.09" id="Line-41" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-41-decoration-1" d="M5.43999939,163.09 C9.21999939,162.04 12.4599994,161.14 16.2399994,160.09 C16.2399994,162.19 16.2399994,163.99 16.2399994,166.09 C12.4599994,165.04 9.21999939,164.14 5.43999939,163.09 C5.43999939,163.09 5.43999939,163.09 5.43999939,163.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-41-decoration-2" d="M113.639999,163.09 C109.859999,162.04 106.619999,161.14 102.839999,160.09 C102.839999,162.19 102.839999,163.99 102.839999,166.09 C106.619999,165.04 109.859999,164.14 113.639999,163.09 C113.639999,163.09 113.639999,163.09 113.639999,163.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="clientTop" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#C74A6C">
<tspan x="150.862305" y="178">clientTop</tspan>
</text>
<text id="offsetLeft" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
<tspan x="21.0136719" y="154">offsetLeft</tspan>
</text>
<path d="M120.639999,529.09 L488.999985,529.09" id="Line-40" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-40-decoration-1" d="M121.439999,529.09 C125.219999,528.04 128.459999,527.14 132.239999,526.09 C132.239999,528.19 132.239999,529.99 132.239999,532.09 C128.459999,531.04 125.219999,530.14 121.439999,529.09 C121.439999,529.09 121.439999,529.09 121.439999,529.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-40-decoration-2" d="M488.639999,529.09 C484.859999,528.04 481.619999,527.14 477.839999,526.09 C477.839999,528.19 477.839999,529.99 477.839999,532.09 C481.619999,531.04 484.859999,530.14 488.639999,529.09 C488.639999,529.09 488.639999,529.09 488.639999,529.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M490.639999,551 L490.639999,447" id="Line-45" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M116.639999,551 L116.639999,447" id="Line-44" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<text id="offsetWidth" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
<tspan x="262.165039" y="516">offsetWidth</tspan>
</text>
<rect id="Rectangle-233" stroke="#8A704D" stroke-width="2" sketch:type="MSShapeGroup" x="0" y="0" width="670" height="602"></rect>
<g id="Scrollbar" sketch:type="MSLayerGroup" transform="translate(450.000000, 187.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="16" height="240" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-2)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-2)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)" sketch:type="MSShapeGroup">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " stroke="#CFCFCF" fill="url(#linearGradient-2)">
<rect id="Rectangle-18" x="0" y="0" width="16" height="51" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" stroke="#979797" fill="#D8D8D8">
<rect id="Rectangle-22" x="0" y="0" width="8" height="2"></rect>
<rect id="Rectangle-23" x="0" y="3" width="8" height="2"></rect>
<rect id="Rectangle-24" x="0" y="6" width="8" height="2"></rect>
<rect id="Rectangle-25" x="0" y="9" width="8" height="2"></rect>
</g>
</g>
</g>
<g id="Group" sketch:type="MSLayerGroup" transform="translate(115.000000, 162.000000)">
<g id="Line-4-+-Line-5" transform="translate(23.000000, 19.000000)" stroke="#C74A6C" stroke-width="2" sketch:type="MSShapeGroup" stroke-linecap="square">
<path d="M2.5,0.5 L0,6" id="Line-4" transform="translate(1.500000, 3.000000) scale(1, -1) translate(-1.500000, -3.000000) "></path>
<path d="M5.5,0.5 L3,6" id="Line-5" transform="translate(4.500000, 3.000000) scale(-1, -1) translate(-4.500000, -3.000000) "></path>
</g>
<g id="Line-4-+-Line-6" transform="translate(26.000000, 4.000000) scale(1, -1) translate(-26.000000, -4.000000) translate(23.000000, 1.000000)" stroke="#C74A6C" stroke-width="2" sketch:type="MSShapeGroup" stroke-linecap="square">
<path d="M2.5,0.5 L0,6" id="Line-4" transform="translate(1.500000, 3.000000) scale(1, -1) translate(-1.500000, -3.000000) "></path>
<path d="M5.5,0.5 L3,6" id="Line-5" transform="translate(4.500000, 3.000000) scale(-1, -1) translate(-4.500000, -3.000000) "></path>
</g>
<path d="M14,13.5 L14,38.5" id="Line-49" stroke="#C74A6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel" sketch:type="MSShapeGroup" transform="translate(14.000000, 26.000000) rotate(-270.000000) translate(-14.000000, -26.000000) "></path>
<path d="M26,25.5 L26,0.5" id="Line-50" stroke="#C74A6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
<path d="M26.3,27.2348224 L26.4965635,27.3241694 L26.5989404,27.0989404 L26.8241694,26.9965635 L26.7348224,26.8 L27.3241694,25.5034365 L26.4138029,25.0896335 L20.9138029,22.5896335 L20.0034365,22.1758306 L19.1758306,23.9965635 L20.0861971,24.4103665 L23.8833908,26.1363636 L19.5861971,28.0896335 L18.6758306,28.5034365 L19.5034365,30.3241694 L20.4138029,29.9103665 L25.9138029,27.4103665 L26.3,27.2348224 Z" id="Line-4" fill="#C74A6C" sketch:type="MSShapeGroup"></path>
<path d="M1.26517764,26.8 L0.675830578,25.5034365 L1.58619706,25.0896335 L7.08619706,22.5896335 L7.99656353,22.1758306 L8.82416942,23.9965635 L7.91380294,24.4103665 L4.11660919,26.1363636 L8.41380294,28.0896335 L9.32416942,28.5034365 L8.49656353,30.3241694 L7.58619706,29.9103665 L2.08619706,27.4103665 L1.7,27.2348224 L1.50343647,27.3241694 L1.40105963,27.0989404 L1.17583058,26.9965635 L1.26517764,26.8 Z" id="Line-4" fill="#C74A6C" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
2-ui/1-document/15-metrics/metric-all@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 308 KiB

BIN
2-ui/1-document/15-metrics/metric-client-left-top-rtl.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 59 KiB

93
2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg Normal file
View file

@ -0,0 +1,93 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="359px" height="316px" viewBox="0 0 359 316" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-client-left-top-rtl.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<rect id="path-1" x="116" y="105" width="284" height="200"></rect>
<linearGradient x1="0%" y1="47.0960915%" x2="62.2987085%" y2="47.0960918%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-client-left-top-rtl.svg" sketch:type="MSArtboardGroup">
<g id="Rectangle-1">
<use stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
</g>
<g id="Rectangle-209-+-Rectangle-208" sketch:type="MSLayerGroup" transform="translate(15.000000, 14.000000)" fill="#EBCB9D">
<rect id="Rectangle-209" sketch:type="MSShapeGroup" x="0" y="1" width="50" height="300"></rect>
<rect id="Rectangle-208" sketch:type="MSShapeGroup" transform="translate(190.500000, 26.000000) rotate(-90.000000) translate(-190.500000, -26.000000) " x="165.5" y="-129.5" width="50" height="311"></rect>
</g>
<text id="היא-שפת-תסריט-מפורשת" sketch:type="MSTextLayer" font-family="Lucida Grande" font-size="32" font-weight="bold" fill="#5A4739">
<tspan x="119" y="135">היא שפת תסריט </tspan>
<tspan x="119" y="173">מפורשת מבוססת </tspan>
<tspan x="119" y="211">אובייקטים המותאמת </tspan>
<tspan x="119" y="249">לשילוב באתרי אינטרנט </tspan>
<tspan x="119" y="287">ורצה על ידי דפדפן </tspan>
<tspan x="119" y="325">האינטרנט בצד הלקוח. </tspan>
<tspan x="119" y="363">השפה מרחיבה את </tspan>
<tspan x="119" y="401">יכולות שפת התגיות </tspan>
<tspan x="119" y="439">הבסיסית HTML </tspan>
<tspan x="119" y="477">ומאפשרת בכך ליצור </tspan>
<tspan x="119" y="515">יישומי אינטרנט </tspan>
<tspan x="119" y="553">מתוחכמים יותר. </tspan>
<tspan x="119" y="591">למעשה, כיום, רוב אתרי </tspan>
<tspan x="119" y="629">האינטרנט המודרניים </tspan>
<tspan x="119" y="667">משלבים שפה זו. היא </tspan>
<tspan x="119" y="705">ידועה בעיקר כשפה </tspan>
<tspan x="119" y="743">המוטבעת בדפ</tspan>
</text>
<rect id="Rectangle-5" fill="url(#linearGradient-2)" sketch:type="MSShapeGroup" transform="translate(182.500000, 216.500000) rotate(-180.000000) translate(-182.500000, -216.500000) " x="45" y="-7" width="275" height="447"></rect>
<rect id="Rectangle-6" fill="#FFFFFF" sketch:type="MSShapeGroup" x="319" y="8" width="162" height="399"></rect>
<g id="Group-2" sketch:type="MSLayerGroup" transform="translate(65.000000, 65.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="21" height="240" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-3)" x="0" y="0" width="21" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="10.5 7 14.7 13 6.3 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(10.500000, 230.000000) scale(1, -1) translate(-10.500000, -230.000000) translate(0.000000, 220.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-3)" x="0" y="0" width="21" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="10.5 7 14.7 13 6.3 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)" sketch:type="MSShapeGroup">
<g id="Rectangle-18-+-Triangle-3" transform="translate(10.500000, 25.500000) scale(1, -1) translate(-10.500000, -25.500000) " stroke="#CFCFCF" fill="url(#linearGradient-3)">
<rect id="Rectangle-18" x="0" y="0" width="21" height="51" rx="3"></rect>
</g>
<g id="Group" transform="translate(5.250000, 20.000000)" stroke="#979797" fill="#D8D8D8">
<rect id="Rectangle-22" x="0" y="0" width="10.5" height="2"></rect>
<rect id="Rectangle-23" x="0" y="3" width="10.5" height="2"></rect>
<rect id="Rectangle-24" x="0" y="6" width="10.5" height="2"></rect>
<rect id="Rectangle-25" x="0" y="9" width="10.5" height="2"></rect>
</g>
</g>
</g>
<path d="M65.4099998,15.6800003 L65.4099998,63.6800003" id="Line-7" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M65.4099998,62.6800003 C66.4599998,58.9000003 67.3599998,55.6600003 68.4099998,51.8800003 C66.3099998,51.8800003 64.5099998,51.8800003 62.4099998,51.8800003 C63.4599998,55.6600003 64.3599998,58.9000003 65.4099998,62.6800003 C65.4099998,62.6800003 65.4099998,62.6800003 65.4099998,62.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-7-decoration-2" d="M65.4099998,16.4800003 C66.4599998,20.2600003 67.3599998,23.5000003 68.4099998,27.2800003 C66.3099998,27.2800003 64.5099998,27.2800003 62.4099998,27.2800003 C63.4599998,23.5000003 64.3599998,20.2600003 65.4099998,16.4800003 C65.4099998,16.4800003 65.4099998,16.4800003 65.4099998,16.4800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M15.4099998,64.6800003 L85.9999962,64.6800003" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-28-decoration-1" d="M85.4099998,64.6800003 C81.6299998,63.6300003 78.3899998,62.7300003 74.6099998,61.6800003 C74.6099998,63.7800003 74.6099998,65.5800003 74.6099998,67.6800003 C78.3899998,66.6300003 81.6299998,65.7300003 85.4099998,64.6800003 C85.4099998,64.6800003 85.4099998,64.6800003 85.4099998,64.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-28-decoration-2" d="M16.2099998,64.6800003 C19.9899998,63.6300003 23.2299998,62.7300003 27.0099998,61.6800003 C27.0099998,63.7800003 27.0099998,65.5800003 27.0099998,67.6800003 C23.2299998,66.6300003 19.9899998,65.7300003 16.2099998,64.6800003 C16.2099998,64.6800003 16.2099998,64.6800003 16.2099998,64.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="clientTop:25px-=-bor" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="85.6269531" y="43" fill="#EE6B47">clientTop:</tspan>
<tspan x="151.603516" y="43" fill="#3B86C4">25px </tspan>
<tspan x="184.591797" y="43" fill="#EE6B47">= border</tspan>
</text>
<text id="clientLeft:41px" sketch:type="MSTextLayer" transform="translate(42.320000, 125.000000) rotate(-90.000000) translate(-42.320000, -125.000000) " font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="-7.16242218" y="127" fill="#EE6B47">clientLeft:</tspan>
<tspan x="65.4117966" y="127" fill="#3B86C4">41px</tspan>
</text>
<g id="Rectangle-8-+-Rectangle-7" sketch:type="MSLayerGroup" transform="translate(-42.000000, -3.000000)">
<rect id="Rectangle-8" fill="url(#linearGradient-2)" sketch:type="MSShapeGroup" transform="translate(224.000000, 138.000000) rotate(-90.000000) translate(-224.000000, -138.000000) " x="86.5" y="-85.5" width="275" height="447"></rect>
<rect id="Rectangle-7" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(233.000000, 355.500000) rotate(-270.000000) translate(-233.000000, -355.500000) " x="152" y="156" width="162" height="399"></rect>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
2-ui/1-document/15-metrics/metric-client-left-top-rtl@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 170 KiB

BIN
2-ui/1-document/15-metrics/metric-client-left-top.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 64 KiB

60
2-ui/1-document/15-metrics/metric-client-left-top.svg Normal file
View file

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="353px" height="316px" viewBox="0 0 353 316" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-client-left-top.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<linearGradient x1="0%" y1="47.0960915%" x2="62.2987085%" y2="47.0960918%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-client-left-top.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-206" fill="#EBCB9D" sketch:type="MSShapeGroup" x="12" y="15" width="50" height="300"></rect>
<rect id="Rectangle-207" fill="#EBCB9D" sketch:type="MSShapeGroup" transform="translate(202.500000, 40.000000) rotate(-90.000000) translate(-202.500000, -40.000000) " x="177.5" y="-115.5" width="50" height="311"></rect>
<text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="32" font-weight="bold" fill="#5A4739">
<tspan x="102" y="134">Introduction</tspan>
<tspan x="275.6875" y="134" font-size="24" font-weight="normal"></tspan>
<tspan x="102" y="178" font-size="24" font-weight="normal">This Ecma Standard is based on </tspan>
<tspan x="102" y="207" font-size="24" font-weight="normal">several originating technologies, the </tspan>
<tspan x="102" y="236" font-size="24" font-weight="normal">most well known being JavaScript </tspan>
<tspan x="102" y="265" font-size="24" font-weight="normal">(Netscape) and JScript (Microsoft). </tspan>
<tspan x="102" y="294" font-size="24" font-weight="normal">The language was invented by </tspan>
<tspan x="102" y="323" font-size="24" font-weight="normal">Brendan Eich at Netscape and first </tspan>
<tspan x="102" y="352" font-size="24" font-weight="normal">appeared in that company’s </tspan>
<tspan x="102" y="381" font-size="24" font-weight="normal">Navigator 2.0 browser. It has </tspan>
<tspan x="102" y="410" font-size="24" font-weight="normal">appeared in all subsequent browsers </tspan>
<tspan x="102" y="439" font-size="24" font-weight="normal">from Netscape and in all browsers </tspan>
<tspan x="102" y="468" font-size="24" font-weight="normal">from Microsoft starting with Internet </tspan>
<tspan x="102" y="497" font-size="24" font-weight="normal">Explorer 3.0.</tspan>
<tspan x="102" y="526" font-size="24" font-weight="normal">The development of this Standard </tspan>
<tspan x="102" y="555" font-size="24" font-weight="normal">started in November 1996. The first </tspan>
<tspan x="102" y="584" font-size="24" font-weight="normal">edition of this Ecma Standard was </tspan>
<tspan x="102" y="613" font-size="24" font-weight="normal">adopted by the Ecma General </tspan>
<tspan x="102" y="642" font-size="24" font-weight="normal">Assembly of June 1997.</tspan>
</text>
<rect id="Rectangle-5" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup" transform="translate(179.500000, 216.500000) rotate(-180.000000) translate(-179.500000, -216.500000) " x="42" y="-7" width="275" height="447"></rect>
<rect id="Rectangle-6" fill="#FFFFFF" sketch:type="MSShapeGroup" x="316" y="8" width="162" height="399"></rect>
<path d="M62.4099998,15.6800003 L62.4099998,63.6800003" id="Line-7" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M62.4099998,62.6800003 C63.4599998,58.9000003 64.3599998,55.6600003 65.4099998,51.8800003 C63.3099998,51.8800003 61.5099998,51.8800003 59.4099998,51.8800003 C60.4599998,55.6600003 61.3599998,58.9000003 62.4099998,62.6800003 C62.4099998,62.6800003 62.4099998,62.6800003 62.4099998,62.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-7-decoration-2" d="M62.4099998,16.4800003 C63.4599998,20.2600003 64.3599998,23.5000003 65.4099998,27.2800003 C63.3099998,27.2800003 61.5099998,27.2800003 59.4099998,27.2800003 C60.4599998,23.5000003 61.3599998,20.2600003 62.4099998,16.4800003 C62.4099998,16.4800003 62.4099998,16.4800003 62.4099998,16.4800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M12.4099998,64.6800003 L60.4099998,64.6800003" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-28-decoration-1" d="M60.4099998,64.6800003 C56.6299998,63.6300003 53.3899998,62.7300003 49.6099998,61.6800003 C49.6099998,63.7800003 49.6099998,65.5800003 49.6099998,67.6800003 C53.3899998,66.6300003 56.6299998,65.7300003 60.4099998,64.6800003 C60.4099998,64.6800003 60.4099998,64.6800003 60.4099998,64.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-28-decoration-2" d="M13.2099998,64.6800003 C16.9899998,63.6300003 20.2299998,62.7300003 24.0099998,61.6800003 C24.0099998,63.7800003 24.0099998,65.5800003 24.0099998,67.6800003 C20.2299998,66.6300003 16.9899998,65.7300003 13.2099998,64.6800003 C13.2099998,64.6800003 13.2099998,64.6800003 13.2099998,64.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="clientTop:25px-=-bor" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="82.6269531" y="43" fill="#EE6B47">clientTop:</tspan>
<tspan x="148.603516" y="43" fill="#3B86C4">25px </tspan>
<tspan x="181.591797" y="43" fill="#EE6B47">= border</tspan>
</text>
<text id="clientLeft:25px" sketch:type="MSTextLayer" transform="translate(39.320000, 136.000000) rotate(-90.000000) translate(-39.320000, -136.000000) " font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="-10.1624222" y="138" fill="#EE6B47">clientLeft:</tspan>
<tspan x="62.4117966" y="138" fill="#3B86C4">25px</tspan>
</text>
<g id="Rectangle-8-+-Rectangle-7" sketch:type="MSLayerGroup" transform="translate(-45.000000, -3.000000)">
<rect id="Rectangle-8" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup" transform="translate(224.000000, 138.000000) rotate(-90.000000) translate(-224.000000, -138.000000) " x="86.5" y="-85.5" width="275" height="447"></rect>
<rect id="Rectangle-7" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(233.000000, 355.500000) rotate(-270.000000) translate(-233.000000, -355.500000) " x="152" y="156" width="162" height="399"></rect>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
2-ui/1-document/15-metrics/metric-client-left-top@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 179 KiB

BIN
2-ui/1-document/15-metrics/metric-client-width-height.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 83 KiB

116
2-ui/1-document/15-metrics/metric-client-width-height.svg Normal file
View file

@ -0,0 +1,116 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="500px" height="493px" viewBox="0 0 500 493" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-client-width-height.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-client-width-height.svg" sketch:type="MSArtboardGroup">
<path d="M386,155 L386,395 L46,395 L46,155 L386,155 Z M21,130 L411,130 L411,420 L21,420 L21,130 Z" id="Rectangle-2" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M66,176 L351,176 L351,377 L250.361727,377 L66,377 L66,176 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup"></path>
<g id="Group-2" sketch:type="MSLayerGroup" transform="translate(370.000000, 155.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="16" height="240" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)" sketch:type="MSShapeGroup">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " stroke="#CFCFCF" fill="url(#linearGradient-1)">
<rect id="Rectangle-18" x="0" y="0" width="16" height="51" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" stroke="#979797" fill="#D8D8D8">
<rect id="Rectangle-22" x="0" y="0" width="8" height="2"></rect>
<rect id="Rectangle-23" x="0" y="3" width="8" height="2"></rect>
<rect id="Rectangle-24" x="0" y="6" width="8" height="2"></rect>
<rect id="Rectangle-25" x="0" y="9" width="8" height="2"></rect>
</g>
</g>
</g>
<text id="border" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="14.7070312" y="75" fill="#EE6B47">border</tspan>
<tspan x="21.3046875" y="89" fill="#3B86C4">25px</tspan>
</text>
<text id="padding" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="34.4082031" y="45" fill="#EE6B47">padding</tspan>
<tspan x="44.3046875" y="59" fill="#3B86C4">20px</tspan>
</text>
<text id="content-width:284px" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="144.822266" y="109" fill="#EE6B47">content width:</tspan>
<tspan x="237.189453" y="109" fill="#3B86C4">284px</tspan>
</text>
<path d="M68.6799927,117 L350.5,117" id="Line-15" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-15-decoration-1" d="M69.4799927,117 C73.2599927,115.95 76.4999927,115.05 80.2799927,114 C80.2799927,116.1 80.2799927,117.9 80.2799927,120 C76.4999927,118.95 73.2599927,118.05 69.4799927,117 C69.4799927,117 69.4799927,117 69.4799927,117 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-15-decoration-2" d="M349.679993,117 C345.899993,115.95 342.659993,115.05 338.879993,114 C338.879993,116.1 338.879993,117.9 338.879993,120 C342.659993,118.95 345.899993,118.05 349.679993,117 C349.679993,117 349.679993,117 349.679993,117 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M-0.46484375,114.945312 L42.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(21.480469, 114.945312) rotate(-270.000000) translate(-21.480469, -114.945312) "></path>
<path d="M26.5351562,113.945312 L67.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(47.480469, 113.945312) rotate(-270.000000) translate(-47.480469, -113.945312) "></path>
<text id="border-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="378.707031" y="76" fill="#EE6B47">border</tspan>
<tspan x="385.304688" y="90" fill="#3B86C4">25px</tspan>
</text>
<text id="padding-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="341.408203" y="16" fill="#EE6B47">padding</tspan>
<tspan x="351.304688" y="30" fill="#3B86C4">20px</tspan>
</text>
<text id="scrollbar" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="351.810547" y="48" fill="#EE6B47">scrollbar</tspan>
<tspan x="368.304688" y="62" fill="#3B86C4">16px</tspan>
</text>
<path d="M349.535156,114.945312 L392.535156,114.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(371.480469, 114.945312) rotate(-270.000000) translate(-371.480469, -114.945312) "></path>
<path d="M363.535156,114.945312 L406.535156,114.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(385.480469, 114.945312) rotate(-270.000000) translate(-385.480469, -114.945312) "></path>
<path d="M389.535156,113.945312 L430.535156,113.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(410.480469, 113.945312) rotate(-270.000000) translate(-410.480469, -113.945312) "></path>
<path d="M45.5351562,113.945312 L86.5351562,113.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(66.480469, 113.945312) rotate(-270.000000) translate(-66.480469, -113.945312) "></path>
<path d="M332.535156,113.945312 L373.535156,113.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(353.480469, 113.945312) rotate(-270.000000) translate(-353.480469, -113.945312) "></path>
<text id="clientWidth-=-20+284" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="108.236328" y="473" fill="#EE6B47">clientWidth = </tspan>
<tspan x="200.603516" y="473" fill="#3B86C4">20+284+20 </tspan>
<tspan x="266.580078" y="473" fill="#F48158">=</tspan>
<tspan x="273.177734" y="473" fill="#3B86C4"> 324px</tspan>
</text>
<path d="M46.5,376 L46.5,464.14193" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M370.5,376 L370.5,464.14193" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M48,452.070965 L368,452.070965" id="Line-22" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-22-decoration-1" d="M48.8,452.070965 C52.58,451.020965 55.82,450.120965 59.6,449.070965 C59.6,451.170965 59.6,452.970965 59.6,455.070965 C55.82,454.020965 52.58,453.120965 48.8,452.070965 C48.8,452.070965 48.8,452.070965 48.8,452.070965 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-22-decoration-2" d="M368,452.070965 C364.22,451.020965 360.98,450.120965 357.2,449.070965 C357.2,451.170965 357.2,452.970965 357.2,455.070965 C360.98,454.020965 364.22,453.120965 368,452.070965 C368,452.070965 368,452.070965 368,452.070965 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="clientHeight:240px" sketch:type="MSTextLayer" transform="translate(489.500000, 277.000000) rotate(-90.000000) translate(-489.500000, -277.000000) " font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="430.121094" y="279" fill="#EE6B47">clientHeight:</tspan>
<tspan x="515.890625" y="279" fill="#3B86C4">240px</tspan>
</text>
<path d="M365.5,156 L485.5,156" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M365.5,394 L485.5,394" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M476,160 L476,389" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-26-decoration-1" d="M476,160.8 C477.05,164.58 477.95,167.82 479,171.6 C476.9,171.6 475.1,171.6 473,171.6 C474.05,167.82 474.95,164.58 476,160.8 C476,160.8 476,160.8 476,160.8 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-26-decoration-2" d="M476,389 C477.05,385.22 477.95,381.98 479,378.2 C476.9,378.2 475.1,378.2 473,378.2 C474.05,381.98 474.95,385.22 476,389 C476,389 476,389 476,389 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="height:200px" sketch:type="MSTextLayer" transform="translate(424.500000, 274.000000) rotate(-90.000000) translate(-424.500000, -274.000000) " font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="384.914062" y="276" fill="#EE6B47">height:</tspan>
<tspan x="431.097656" y="276" fill="#3B86C4">200px</tspan>
</text>
<path d="M353.5,175 L441.64193,175" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M353.5,377 L441.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M435,177.5 L435,374" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M435,178.3 C436.05,182.08 436.95,185.32 438,189.1 C435.9,189.1 434.1,189.1 432,189.1 C433.05,185.32 433.95,182.08 435,178.3 C435,178.3 435,178.3 435,178.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-decoration-2" d="M435,373.5 C436.05,369.72 436.95,366.48 438,362.7 C435.9,362.7 434.1,362.7 432,362.7 C433.05,366.48 433.95,369.72 435,373.5 C435,373.5 435,373.5 435,373.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
<tspan x="69" y="193">Introduction</tspan>
<tspan x="166.699219" y="193" font-size="16" font-weight="normal"></tspan>
<tspan x="69" y="222" font-size="16" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="69" y="241" font-size="16" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="69" y="260" font-size="16" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="69" y="279" font-size="16" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="69" y="298" font-size="16" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="69" y="317" font-size="16" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="69" y="336" font-size="16" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="69" y="355" font-size="16" font-weight="normal">subsequent browsers from Netscape and in </tspan>
<tspan x="69" y="374" font-size="16" font-weight="normal">all browsers from Microsoft starting with </tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
2-ui/1-document/15-metrics/metric-client-width-height@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 182 KiB

BIN
2-ui/1-document/15-metrics/metric-client-width-nopadding.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 63 KiB

77
2-ui/1-document/15-metrics/metric-client-width-nopadding.svg Normal file
View file

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="409px" height="467px" viewBox="0 0 409 467" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-client-width-nopadding.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-client-width-nopadding.svg" sketch:type="MSArtboardGroup">
<path d="M364,156 L364,356 L60,356 L60,156 L364,156 Z M35,131 L389,131 L389,381 L35,381 L35,131 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="clientWidth:284px-=-" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="94.6386719" y="399.64193" fill="#EE6B47">clientWidth:</tspan>
<tspan x="173.810547" y="399.64193" fill="#3B86C4">284px </tspan>
<tspan x="213.396484" y="399.64193" fill="#EE6B47">= content width</tspan>
</text>
<path d="M63.6799927,409.64193 L343.679993,409.64193" id="Line-44" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-44-decoration-1" d="M64.4799927,409.64193 C68.2599927,408.59193 71.4999927,407.69193 75.2799927,406.64193 C75.2799927,408.74193 75.2799927,410.54193 75.2799927,412.64193 C71.4999927,411.59193 68.2599927,410.69193 64.4799927,409.64193 C64.4799927,409.64193 64.4799927,409.64193 64.4799927,409.64193 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-44-decoration-2" d="M343.679993,409.64193 C339.899993,408.59193 336.659993,407.69193 332.879993,406.64193 C332.879993,408.74193 332.879993,410.54193 332.879993,412.64193 C336.659993,411.59193 339.899993,410.69193 343.679993,409.64193 C343.679993,409.64193 343.679993,409.64193 343.679993,409.64193 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="CSS-width:-300px" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="150.71875" y="429.64193" fill="#F48158">CSS width:</tspan>
<tspan x="216.695312" y="429.64193" fill="#3B86C4"> 300px</tspan>
</text>
<path d="M62.6799927,434.64193 L363,434.64193" id="Line-47" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-47-decoration-1" d="M63.4799927,434.64193 C67.2599927,433.59193 70.4999927,432.69193 74.2799927,431.64193 C74.2799927,433.74193 74.2799927,435.54193 74.2799927,437.64193 C70.4999927,436.59193 67.2599927,435.69193 63.4799927,434.64193 C63.4799927,434.64193 63.4799927,434.64193 63.4799927,434.64193 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-47-decoration-2" d="M362.679993,434.64193 C358.899993,433.59193 355.659993,432.69193 351.879993,431.64193 C351.879993,433.74193 351.879993,435.54193 351.879993,437.64193 C355.659993,436.59193 358.899993,435.69193 362.679993,434.64193 C362.679993,434.64193 362.679993,434.64193 362.679993,434.64193 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="Introduction-2" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
<tspan x="62" y="173">Introduction</tspan>
<tspan x="159.699219" y="173" font-size="16" font-weight="normal"></tspan>
<tspan x="62" y="202" font-size="16" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="62" y="221" font-size="16" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="62" y="240" font-size="16" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="62" y="259" font-size="16" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="62" y="278" font-size="16" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="62" y="297" font-size="16" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="62" y="316" font-size="16" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="62" y="335" font-size="16" font-weight="normal">subsequent browsers from Netscape and in </tspan>
<tspan x="62" y="354" font-size="16" font-weight="normal">all browsers from Microsoft starting with </tspan>
</text>
<ellipse id="Oval-5" stroke="#EE6B47" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" cx="191" cy="58.8580704" rx="76" ry="43.5"></ellipse>
<path d="M191,104 L191,128.638622" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M191,128 C192.05,124.22 192.95,120.98 194,117.2 C191.9,117.2 190.1,117.2 188,117.2 C189.05,120.98 189.95,124.22 191,128 C191,128 191,128 191,128 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="padding:-0;" sketch:type="MSTextLayer" font-family="Consolas" font-size="16" font-weight="bold" fill="#8A704D">
<tspan x="136" y="52">padding: 0;</tspan>
<tspan x="136" y="71">width: 300px;</tspan>
</text>
<g id="Group-2" sketch:type="MSLayerGroup" transform="translate(348.000000, 156.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="16" height="200" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 190.000000) scale(1, -1) translate(-8.000000, -190.000000) translate(0.000000, 180.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)" sketch:type="MSShapeGroup">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " stroke="#CFCFCF" fill="url(#linearGradient-1)">
<rect id="Rectangle-18" x="0" y="0" width="16" height="51" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" stroke="#979797" fill="#D8D8D8">
<rect id="Rectangle-22" x="0" y="0" width="8" height="2"></rect>
<rect id="Rectangle-23" x="0" y="3" width="8" height="2"></rect>
<rect id="Rectangle-24" x="0" y="6" width="8" height="2"></rect>
<rect id="Rectangle-25" x="0" y="9" width="8" height="2"></rect>
</g>
</g>
</g>
<path d="M60.5,354.64193 L60.5,450.64193" id="Line-46" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M345.5,354.64193 L345.5,414" id="Line-45" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M363.5,354.64193 L363.5,450.64193" id="Line-48" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
2-ui/1-document/15-metrics/metric-client-width-nopadding@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 153 KiB

BIN
2-ui/1-document/15-metrics/metric-css.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 78 KiB

109
2-ui/1-document/15-metrics/metric-css.svg Normal file
View file

@ -0,0 +1,109 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="566px" height="469px" viewBox="0 0 566 469" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-css.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-css.svg" sketch:type="MSArtboardGroup">
<path d="M176,183 L461,183 L461,384 L360.361727,384 L176,384 L176,183 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M496,164 L496,404 L156,404 L156,164 L496,164 Z M131,139 L521,139 L521,429 L131,429 L131,139 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Group-2" sketch:type="MSLayerGroup" transform="translate(480.000000, 163.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="16" height="240" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)" sketch:type="MSShapeGroup">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " stroke="#CFCFCF" fill="url(#linearGradient-1)">
<rect id="Rectangle-18" x="0" y="0" width="16" height="51" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" stroke="#979797" fill="#D8D8D8">
<rect id="Rectangle-22" x="0" y="0" width="8" height="2"></rect>
<rect id="Rectangle-23" x="0" y="3" width="8" height="2"></rect>
<rect id="Rectangle-24" x="0" y="6" width="8" height="2"></rect>
<rect id="Rectangle-25" x="0" y="9" width="8" height="2"></rect>
</g>
</g>
</g>
<text id="padding:20px" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal">
<tspan x="7" y="176" fill="#EE6B47">padding:</tspan>
<tspan x="59.78125" y="176" fill="#3B86C4">20px</tspan>
</text>
<text id="height:200px" sketch:type="MSTextLayer" transform="translate(532.500000, 282.000000) rotate(-90.000000) translate(-532.500000, -282.000000) " font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="492.914062" y="284" fill="#EE6B47">height:</tspan>
<tspan x="539.097656" y="284" fill="#3B86C4">200px</tspan>
</text>
<path d="M461.5,183 L549.64193,183" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M93.5,184 L181.64193,184" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M93.5,162 L181.64193,162" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M461.5,385 L549.64193,385" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M543,185.5 L543,382" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M543,186.3 C544.05,190.08 544.95,193.32 546,197.1 C543.9,197.1 542.1,197.1 540,197.1 C541.05,193.32 541.95,190.08 543,186.3 C543,186.3 543,186.3 543,186.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-decoration-2" d="M543,381.5 C544.05,377.72 544.95,374.48 546,370.7 C543.9,370.7 542.1,370.7 540,370.7 C541.05,374.48 541.95,377.72 543,381.5 C543,381.5 543,381.5 543,381.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="padding:20px-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal">
<tspan x="7" y="396" fill="#EE6B47">padding:</tspan>
<tspan x="59.78125" y="396" fill="#3B86C4">20px</tspan>
</text>
<path d="M93.5,404 L181.64193,404" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M93.5,382 L181.64193,382" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<text id="border" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="124.707031" y="83" fill="#EE6B47">border</tspan>
<tspan x="131.304688" y="97" fill="#3B86C4">25px</tspan>
</text>
<text id="padding" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="144.408203" y="53" fill="#EE6B47">padding</tspan>
<tspan x="154.304688" y="67" fill="#3B86C4">20px</tspan>
</text>
<text id="content-width:284px" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="254.822266" y="117" fill="#EE6B47">content width:</tspan>
<tspan x="347.189453" y="117" fill="#3B86C4">284px</tspan>
</text>
<path d="M178.679993,125 L460.5,125" id="Line-21" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-21-decoration-1" d="M179.479993,125 C183.259993,123.95 186.499993,123.05 190.279993,122 C190.279993,124.1 190.279993,125.9 190.279993,128 C186.499993,126.95 183.259993,126.05 179.479993,125 C179.479993,125 179.479993,125 179.479993,125 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-21-decoration-2" d="M459.679993,125 C455.899993,123.95 452.659993,123.05 448.879993,122 C448.879993,124.1 448.879993,125.9 448.879993,128 C452.659993,126.95 455.899993,126.05 459.679993,125 C459.679993,125 459.679993,125 459.679993,125 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M109.535156,122.945312 L152.535156,122.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(131.480469, 122.945312) rotate(-270.000000) translate(-131.480469, -122.945312) "></path>
<path d="M136.535156,121.945312 L177.535156,121.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(157.480469, 121.945312) rotate(-270.000000) translate(-157.480469, -121.945312) "></path>
<text id="border-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="488.707031" y="84" fill="#EE6B47">border</tspan>
<tspan x="495.304688" y="98" fill="#3B86C4">25px</tspan>
</text>
<text id="padding-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="451.408203" y="24" fill="#EE6B47">padding</tspan>
<tspan x="461.304688" y="38" fill="#3B86C4">20px</tspan>
</text>
<text id="scrollbar" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="461.810547" y="56" fill="#EE6B47">scrollbar</tspan>
<tspan x="478.304688" y="70" fill="#3B86C4">16px</tspan>
</text>
<text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
<tspan x="178" y="200">Introduction</tspan>
<tspan x="275.699219" y="200" font-size="16" font-weight="normal"></tspan>
<tspan x="178" y="229" font-size="16" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="178" y="248" font-size="16" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="178" y="267" font-size="16" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="178" y="286" font-size="16" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="178" y="305" font-size="16" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="178" y="324" font-size="16" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="178" y="343" font-size="16" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="178" y="362" font-size="16" font-weight="normal">subsequent browsers from Netscape and in </tspan>
<tspan x="178" y="381" font-size="16" font-weight="normal">all browsers from Microsoft starting with</tspan>
<tspan x="178" y="400" font-size="16" font-weight="normal"> </tspan>
</text>
<path d="M459.535156,122.945312 L502.535156,122.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(481.480469, 122.945312) rotate(-270.000000) translate(-481.480469, -122.945312) "></path>
<path d="M473.535156,122.945312 L516.535156,122.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(495.480469, 122.945312) rotate(-270.000000) translate(-495.480469, -122.945312) "></path>
<path d="M499.535156,121.945312 L540.535156,121.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(520.480469, 121.945312) rotate(-270.000000) translate(-520.480469, -121.945312) "></path>
<path d="M155.535156,121.945312 L196.535156,121.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(176.480469, 121.945312) rotate(-270.000000) translate(-176.480469, -121.945312) "></path>
<path d="M442.535156,121.945312 L483.535156,121.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(463.480469, 121.945312) rotate(-270.000000) translate(-463.480469, -121.945312) "></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
2-ui/1-document/15-metrics/metric-css@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 174 KiB

BIN
2-ui/1-document/15-metrics/metric-offset-parent.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 99 KiB

87
2-ui/1-document/15-metrics/metric-offset-parent.svg Normal file
View file

@ -0,0 +1,87 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="641px" height="562px" viewBox="0 0 641 562" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-offset-parent.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<rect id="path-1" x="40" y="40" width="561" height="482"></rect>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-offset-parent.svg" sketch:type="MSArtboardGroup">
<g id="Rectangle-10">
<use stroke="#E9E9E9" stroke-width="3" fill-opacity="0.5" fill-rule="evenodd" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
</g>
<path d="M549,226 L549,466 L225,466 L225,226 L549,226 Z M200,201 L574,201 L574,491 L200,491 L200,201 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="offsetTop:180px" sketch:type="MSTextLayer" transform="translate(187.500000, 120.320000) rotate(-90.000000) translate(-187.500000, -120.320000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle">
<tspan x="129.770508" y="122.32" fill="#EE6B47">offsetTop:</tspan>
<tspan x="206.743164" y="122.32" fill="#3B86C4">180px</tspan>
</text>
<text id="offsetLeft:180px" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle">
<tspan x="61.921875" y="195.32" fill="#EE6B47">offsetLeft:</tspan>
<tspan x="146.591797" y="195.32" fill="#3B86C4">180px</tspan>
</text>
<text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
<tspan x="245" y="263">Introduction</tspan>
<tspan x="342.699219" y="263" font-size="16" font-weight="normal"></tspan>
<tspan x="245" y="292" font-size="16" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="245" y="311" font-size="16" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="245" y="330" font-size="16" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="245" y="349" font-size="16" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="245" y="368" font-size="16" font-weight="normal">invented by Brendan Eich at Netscape </tspan>
<tspan x="245" y="387" font-size="16" font-weight="normal">and first appeared in that company’s </tspan>
<tspan x="245" y="406" font-size="16" font-weight="normal">Navigator 2.0 browser. It has appeared in </tspan>
<tspan x="245" y="425" font-size="16" font-weight="normal">all subsequent browsers from Netscape </tspan>
<tspan x="245" y="444" font-size="16" font-weight="normal">and in all browsers from Microsoft</tspan>
</text>
<path d="M201,42.5 L201,199.320007" id="Line-40" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-40-decoration-1" d="M201,198.5 C202.05,194.72 202.95,191.48 204,187.7 C201.9,187.7 200.1,187.7 198,187.7 C199.05,191.48 199.95,194.72 201,198.5 C201,198.5 201,198.5 201,198.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-40-decoration-2" d="M201,43.3 C202.05,47.08 202.95,50.32 204,54.1 C201.9,54.1 200.1,54.1 198,54.1 C199.05,50.32 199.95,47.08 201,43.3 C201,43.3 201,43.3 201,43.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M42.5899963,202.910004 L199.410004,202.910004" id="Line-41" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-41-decoration-1" d="M198.589996,202.910004 C194.809996,201.860004 191.569996,200.960004 187.789996,199.910004 C187.789996,202.010004 187.789996,203.810004 187.789996,205.910004 C191.569996,204.860004 194.809996,203.960004 198.589996,202.910004 C198.589996,202.910004 198.589996,202.910004 198.589996,202.910004 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-41-decoration-2" d="M43.3899963,202.910004 C47.1699963,201.860004 50.4099963,200.960004 54.1899963,199.910004 C54.1899963,202.010004 54.1899963,203.810004 54.1899963,205.910004 C50.4099963,204.860004 47.1699963,203.960004 43.3899963,202.910004 C43.3899963,202.910004 43.3899963,202.910004 43.3899963,202.910004 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<circle id="Oval-2" fill="#3B86C4" sketch:type="MSShapeGroup" cx="225" cy="227" r="2"></circle>
<circle id="Oval-2" fill="#3B86C4" sketch:type="MSShapeGroup" cx="201" cy="202" r="3"></circle>
<ellipse id="Oval-6" stroke="#EE6B47" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" cx="386.25" cy="120" rx="100" ry="50"></ellipse>
<path d="M387,173.378593 L387,198.017216" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M387,197.378593 C388.05,193.598593 388.95,190.358593 390,186.578593 C387.9,186.578593 386.1,186.578593 384,186.578593 C385.05,190.358593 385.95,193.598593 387,197.378593 C387,197.378593 387,197.378593 387,197.378593 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="position:-absolute;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="318.5" y="111.792656">position: absolute;</tspan>
<tspan x="318.5" y="127.792656">left: 180px;</tspan>
<tspan x="318.5" y="143.792656">top: 180px;</tspan>
</text>
<text id="offsetParent-&lt;MAIN&gt;-" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="bold" fill="#8A704D">
<tspan x="42.5" y="37.3785934">offsetParent &lt;MAIN&gt; </tspan>
</text>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="bold" fill="#8A704D">
<tspan x="205.5" y="196.378593">&lt;DIV&gt;</tspan>
</text>
<g id="Scrollbar" sketch:type="MSLayerGroup" transform="translate(533.000000, 226.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="16" height="240" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-2)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-2)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)" sketch:type="MSShapeGroup">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " stroke="#CFCFCF" fill="url(#linearGradient-2)">
<rect id="Rectangle-18" x="0" y="0" width="16" height="51" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" stroke="#979797" fill="#D8D8D8">
<rect id="Rectangle-22" x="0" y="0" width="8" height="2"></rect>
<rect id="Rectangle-23" x="0" y="3" width="8" height="2"></rect>
<rect id="Rectangle-24" x="0" y="6" width="8" height="2"></rect>
<rect id="Rectangle-25" x="0" y="9" width="8" height="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
2-ui/1-document/15-metrics/metric-offset-parent@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 271 KiB

BIN
2-ui/1-document/15-metrics/metric-offset-width-height.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 KiB

116
2-ui/1-document/15-metrics/metric-offset-width-height.svg Normal file
View file

@ -0,0 +1,116 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="508px" height="509px" viewBox="0 0 508 509" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-offset-width-height.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-offset-width-height.svg" sketch:type="MSArtboardGroup">
<path d="M394,155 L394,395 L54,395 L54,155 L394,155 Z M29,130 L419,130 L419,420 L29,420 L29,130 Z" id="Rectangle-2" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M74,176 L359,176 L359,377 L258.361727,377 L74,377 L74,176 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup"></path>
<g id="scrollbar" sketch:type="MSLayerGroup" transform="translate(378.000000, 155.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="16" height="240" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)" sketch:type="MSShapeGroup">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " stroke="#CFCFCF" fill="url(#linearGradient-1)">
<rect id="Rectangle-18" x="0" y="0" width="16" height="51" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" stroke="#979797" fill="#D8D8D8">
<rect id="Rectangle-22" x="0" y="0" width="8" height="2"></rect>
<rect id="Rectangle-23" x="0" y="3" width="8" height="2"></rect>
<rect id="Rectangle-24" x="0" y="6" width="8" height="2"></rect>
<rect id="Rectangle-25" x="0" y="9" width="8" height="2"></rect>
</g>
</g>
</g>
<text id="border" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="22.7070312" y="75" fill="#EE6B47">border</tspan>
<tspan x="29.3046875" y="89" fill="#3B86C4">25px</tspan>
</text>
<text id="padding" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="42.4082031" y="45" fill="#EE6B47">padding</tspan>
<tspan x="52.3046875" y="59" fill="#3B86C4">20px</tspan>
</text>
<text id="content-width:284px" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="152.822266" y="109" fill="#EE6B47">content width:</tspan>
<tspan x="245.189453" y="109" fill="#3B86C4">284px</tspan>
</text>
<text id="height:200px" sketch:type="MSTextLayer" transform="translate(430.500000, 274.000000) rotate(-90.000000) translate(-430.500000, -274.000000) " font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="390.914062" y="276" fill="#EE6B47">height:</tspan>
<tspan x="437.097656" y="276" fill="#3B86C4">200px</tspan>
</text>
<path d="M359.5,175 L447.64193,175" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M359.5,377 L447.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M441,177.5 L441,374" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M441,178.3 C442.05,182.08 442.95,185.32 444,189.1 C441.9,189.1 440.1,189.1 438,189.1 C439.05,185.32 439.95,182.08 441,178.3 C441,178.3 441,178.3 441,178.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-decoration-2" d="M441,373.5 C442.05,369.72 442.95,366.48 444,362.7 C441.9,362.7 440.1,362.7 438,362.7 C439.05,366.48 439.95,369.72 441,373.5 C441,373.5 441,373.5 441,373.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M76.6799927,117 L358.5,117" id="Line-15" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-15-decoration-1" d="M77.4799927,117 C81.2599927,115.95 84.4999927,115.05 88.2799927,114 C88.2799927,116.1 88.2799927,117.9 88.2799927,120 C84.4999927,118.95 81.2599927,118.05 77.4799927,117 C77.4799927,117 77.4799927,117 77.4799927,117 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-15-decoration-2" d="M357.679993,117 C353.899993,115.95 350.659993,115.05 346.879993,114 C346.879993,116.1 346.879993,117.9 346.879993,120 C350.659993,118.95 353.899993,118.05 357.679993,117 C357.679993,117 357.679993,117 357.679993,117 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M7.53515625,114.945312 L50.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(29.480469, 114.945312) rotate(-270.000000) translate(-29.480469, -114.945312) "></path>
<path d="M34.5351562,113.945312 L75.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(55.480469, 113.945312) rotate(-270.000000) translate(-55.480469, -113.945312) "></path>
<text id="border-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="386.707031" y="76" fill="#EE6B47">border</tspan>
<tspan x="393.304688" y="90" fill="#3B86C4">25px</tspan>
</text>
<text id="padding-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="349.408203" y="16" fill="#EE6B47">padding</tspan>
<tspan x="359.304688" y="30" fill="#3B86C4">20px</tspan>
</text>
<text id="scrollbar" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
<tspan x="359.810547" y="48" fill="#EE6B47">scrollbar</tspan>
<tspan x="376.304688" y="62" fill="#3B86C4">16px</tspan>
</text>
<path d="M357.535156,114.945312 L400.535156,114.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(379.480469, 114.945312) rotate(-270.000000) translate(-379.480469, -114.945312) "></path>
<path d="M371.535156,114.945312 L414.535156,114.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(393.480469, 114.945312) rotate(-270.000000) translate(-393.480469, -114.945312) "></path>
<path d="M397.535156,113.945312 L438.535156,113.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(418.480469, 113.945312) rotate(-270.000000) translate(-418.480469, -113.945312) "></path>
<path d="M53.5351562,113.945312 L94.5351562,113.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(74.480469, 113.945312) rotate(-270.000000) translate(-74.480469, -113.945312) "></path>
<path d="M340.535156,113.945312 L381.535156,113.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(361.480469, 113.945312) rotate(-270.000000) translate(-361.480469, -113.945312) "></path>
<text id="offsetWidth-=-25+20+" sketch:type="MSTextLayer" font-family="Consolas" font-size="16" font-weight="normal" sketch:alignment="middle">
<tspan x="47.5625" y="484" fill="#EE6B47">offsetWidth = </tspan>
<tspan x="170.71875" y="484" fill="#3B86C4">25+20+284+20+16+25 </tspan>
<tspan x="337.859375" y="484" fill="#F48158">=</tspan>
<tspan x="346.65625" y="484" fill="#3B86C4"> 390px</tspan>
</text>
<path d="M29.5,419 L29.5,497" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M418.5,419 L418.5,499" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M32.0899963,463.070965 L416,463.070965" id="Line-22" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-22-decoration-1" d="M32.8899963,463.070965 C36.6699963,462.020965 39.9099963,461.120965 43.6899963,460.070965 C43.6899963,462.170965 43.6899963,463.970965 43.6899963,466.070965 C39.9099963,465.020965 36.6699963,464.120965 32.8899963,463.070965 C32.8899963,463.070965 32.8899963,463.070965 32.8899963,463.070965 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-22-decoration-2" d="M415.089996,463.070965 C411.309996,462.020965 408.069996,461.120965 404.289996,460.070965 C404.289996,462.170965 404.289996,463.970965 404.289996,466.070965 C408.069996,465.020965 411.309996,464.120965 415.089996,463.070965 C415.089996,463.070965 415.089996,463.070965 415.089996,463.070965 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="offsetHeight:290px" sketch:type="MSTextLayer" transform="translate(485.500000, 279.500000) rotate(-90.000000) translate(-485.500000, -279.500000) " font-family="Consolas" font-size="16" font-weight="normal" sketch:alignment="middle">
<tspan x="406.328125" y="282" fill="#EE6B47">offsetHeight:</tspan>
<tspan x="520.6875" y="282" fill="#3B86C4">290px</tspan>
</text>
<path d="M416.5,131 L504.64193,131" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M416.5,420 L504.64193,420" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M468,132.589996 L468,419.410004" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-26-decoration-1" d="M468,133.389996 C469.05,137.169996 469.95,140.409996 471,144.189996 C468.9,144.189996 467.1,144.189996 465,144.189996 C466.05,140.409996 466.95,137.169996 468,133.389996 C468,133.389996 468,133.389996 468,133.389996 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-26-decoration-2" d="M468,418.589996 C469.05,414.809996 469.95,411.569996 471,407.789996 C468.9,407.789996 467.1,407.789996 465,407.789996 C466.05,411.569996 466.95,414.809996 468,418.589996 C468,418.589996 468,418.589996 468,418.589996 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
<tspan x="78" y="193">Introduction</tspan>
<tspan x="175.699219" y="193" font-size="16" font-weight="normal"></tspan>
<tspan x="78" y="222" font-size="16" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="78" y="241" font-size="16" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="78" y="260" font-size="16" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="78" y="279" font-size="16" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="78" y="298" font-size="16" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="78" y="317" font-size="16" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="78" y="336" font-size="16" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="78" y="355" font-size="16" font-weight="normal">subsequent browsers from Netscape and in </tspan>
<tspan x="78" y="374" font-size="16" font-weight="normal">all browsers from Microsoft starting with </tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
2-ui/1-document/15-metrics/metric-offset-width-height@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 192 KiB

BIN
2-ui/1-document/15-metrics/metric-scroll-top.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 117 KiB

92
2-ui/1-document/15-metrics/metric-scroll-top.svg Normal file
View file

@ -0,0 +1,92 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="489px" height="542px" viewBox="0 0 489 542" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-scroll-top.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<rect id="path-1" x="76" y="23" width="324" height="498"></rect>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-scroll-top.svg" sketch:type="MSArtboardGroup">
<text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
<tspan x="94" y="54">Introduction</tspan>
<tspan x="191.699219" y="54" font-size="16" font-weight="normal"></tspan>
<tspan x="94" y="83" font-size="16" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="94" y="102" font-size="16" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="94" y="121" font-size="16" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="94" y="140" font-size="16" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="94" y="159" font-size="16" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="94" y="178" font-size="16" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="94" y="197" font-size="16" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="94" y="216" font-size="16" font-weight="normal">subsequent browsers from Netscape and in </tspan>
<tspan x="94" y="235" font-size="16" font-weight="normal">all browsers from Microsoft starting with </tspan>
<tspan x="94" y="254" font-size="16" font-weight="normal">Internet Explorer 3.0.</tspan>
<tspan x="94" y="273" font-size="16" font-weight="normal">The development of this Standard started in </tspan>
<tspan x="94" y="292" font-size="16" font-weight="normal">November 1996. The first edition of this </tspan>
<tspan x="94" y="311" font-size="16" font-weight="normal">Ecma Standard was adopted by the Ecma </tspan>
<tspan x="94" y="330" font-size="16" font-weight="normal">General Assembly of June 1997.</tspan>
<tspan x="94" y="349" font-size="16" font-weight="normal">That Ecma Standard was submitted to ISO/</tspan>
<tspan x="94" y="368" font-size="16" font-weight="normal">IEC JTC 1 for adoption under the fast-track </tspan>
<tspan x="94" y="387" font-size="16" font-weight="normal">procedure, and approved as international </tspan>
<tspan x="94" y="406" font-size="16" font-weight="normal">standard ISO/IEC 16262, in April 1998. </tspan>
<tspan x="94" y="425" font-size="16" font-weight="normal">The Ecma General Assembly of June 1998 </tspan>
<tspan x="94" y="444" font-size="16" font-weight="normal">approved the second edition of ECMA-262 </tspan>
<tspan x="94" y="463" font-size="16" font-weight="normal">to keep it fully aligned with ISO/IEC </tspan>
<tspan x="94" y="482" font-size="16" font-weight="normal">16262. Changes between the first and the </tspan>
<tspan x="94" y="501" font-size="16" font-weight="normal">second edition are editorial in nature.</tspan>
</text>
<path d="M400,147 L400,387 L76,387 L76,147 L400,147 Z M51,122 L425,122 L425,412 L51,412 L51,122 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-2">
<use stroke="none" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
<use stroke-opacity="0.8" stroke="#E8C48F" stroke-width="2" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
</g>
<text id="scrollTop" sketch:type="MSTextLayer" transform="translate(18.500000, 84.000000) rotate(-90.000000) translate(-18.500000, -84.000000) " font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
<tspan x="-11.1894531" y="86">scrollTop</tspan>
</text>
<path d="M9.5,147 L75.6399994,147" id="Line-43" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M10.5,21 L76.6399994,21" id="Line-42" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M35,20.5 L35,146.32" id="Line-39" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-39-decoration-1" d="M35,21.3 C36.05,25.08 36.95,28.32 38,32.1 C35.9,32.1 34.1,32.1 32,32.1 C33.05,28.32 33.95,25.08 35,21.3 C35,21.3 35,21.3 35,21.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-39-decoration-2" d="M35,145.5 C36.05,141.72 36.95,138.48 38,134.7 C35.9,134.7 34.1,134.7 32,134.7 C33.05,138.48 33.95,141.72 35,145.5 C35,145.5 35,145.5 35,145.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-14" fill-opacity="0.8" fill="#FFFFFF" sketch:type="MSShapeGroup" x="88" y="33" width="312" height="89"></rect>
<rect id="Rectangle-15" fill-opacity="0.8" fill="#FFFFFF" sketch:type="MSShapeGroup" x="88" y="411" width="312" height="89"></rect>
<text id="scrollHeight:723px" sketch:type="MSTextLayer" transform="translate(451.500000, 270.000000) rotate(-90.000000) translate(-451.500000, -270.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle">
<tspan x="382.224609" y="272" fill="#EE6B47">scrollHeight:</tspan>
<tspan x="482.289062" y="272" fill="#3B86C4">723px</tspan>
</text>
<path d="M393.5,22 L471.639999,22" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M393.5,522 L471.639999,522" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M462,24.5 L462,518.5" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-25-decoration-1" d="M462,25.3 C463.05,29.08 463.95,32.32 465,36.1 C462.9,36.1 461.1,36.1 459,36.1 C460.05,32.32 460.95,29.08 462,25.3 C462,25.3 462,25.3 462,25.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-25-decoration-2" d="M462,518.5 C463.05,514.72 463.95,511.48 465,507.7 C462.9,507.7 461.1,507.7 459,507.7 C460.05,511.48 460.95,514.72 462,518.5 C462,518.5 462,518.5 462,518.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<g id="Scrollbar" sketch:type="MSLayerGroup" transform="translate(384.000000, 147.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="16" height="240" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-2)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-2)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)" sketch:type="MSShapeGroup">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " stroke="#CFCFCF" fill="url(#linearGradient-2)">
<rect id="Rectangle-18" x="0" y="0" width="16" height="51" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" stroke="#979797" fill="#D8D8D8">
<rect id="Rectangle-22" x="0" y="0" width="8" height="2"></rect>
<rect id="Rectangle-23" x="0" y="3" width="8" height="2"></rect>
<rect id="Rectangle-24" x="0" y="6" width="8" height="2"></rect>
<rect id="Rectangle-25" x="0" y="9" width="8" height="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
2-ui/1-document/15-metrics/metric-scroll-top@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 257 KiB

BIN
2-ui/1-document/15-metrics/metric-scroll-width-height.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 108 KiB

93
2-ui/1-document/15-metrics/metric-scroll-width-height.svg Normal file
View file

@ -0,0 +1,93 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="463px" height="536px" viewBox="0 0 463 536" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>metric-scroll-width-height.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs>
<rect id="path-1" x="46" y="23" width="324" height="498"></rect>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#F1F1F1" offset="100%"></stop>
</linearGradient>
</defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="metric-scroll-width-height.svg" sketch:type="MSArtboardGroup">
<text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
<tspan x="66" y="54">Introduction</tspan>
<tspan x="163.699219" y="54" font-size="16" font-weight="normal"></tspan>
<tspan x="66" y="83" font-size="16" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="66" y="102" font-size="16" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="66" y="121" font-size="16" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="66" y="140" font-size="16" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="66" y="159" font-size="16" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="66" y="178" font-size="16" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="66" y="197" font-size="16" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="66" y="216" font-size="16" font-weight="normal">subsequent browsers from Netscape and in </tspan>
<tspan x="66" y="235" font-size="16" font-weight="normal">all browsers from Microsoft starting with </tspan>
<tspan x="66" y="254" font-size="16" font-weight="normal">Internet Explorer 3.0.</tspan>
<tspan x="66" y="273" font-size="16" font-weight="normal">The development of this Standard started in </tspan>
<tspan x="66" y="292" font-size="16" font-weight="normal">November 1996. The first edition of this </tspan>
<tspan x="66" y="311" font-size="16" font-weight="normal">Ecma Standard was adopted by the Ecma </tspan>
<tspan x="66" y="330" font-size="16" font-weight="normal">General Assembly of June 1997.</tspan>
<tspan x="66" y="349" font-size="16" font-weight="normal">That Ecma Standard was submitted to ISO/</tspan>
<tspan x="66" y="368" font-size="16" font-weight="normal">IEC JTC 1 for adoption under the fast-track </tspan>
<tspan x="66" y="387" font-size="16" font-weight="normal">procedure, and approved as international </tspan>
<tspan x="66" y="406" font-size="16" font-weight="normal">standard ISO/IEC 16262, in April 1998. </tspan>
<tspan x="66" y="425" font-size="16" font-weight="normal">The Ecma General Assembly of June 1998 </tspan>
<tspan x="66" y="444" font-size="16" font-weight="normal">approved the second edition of ECMA-262 </tspan>
<tspan x="66" y="463" font-size="16" font-weight="normal">to keep it fully aligned with ISO/IEC </tspan>
<tspan x="66" y="482" font-size="16" font-weight="normal">16262. Changes between the first and the </tspan>
<tspan x="66" y="501" font-size="16" font-weight="normal">second edition are editorial in nature.</tspan>
</text>
<path d="M370,148 L370,388 L46,388 L46,148 L370,148 Z M21,123 L395,123 L395,413 L21,413 L21,123 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-2">
<use stroke="none" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
<use stroke-opacity="0.8" stroke="#E8C48F" stroke-width="2" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
<use stroke="none" xlink:href="#path-1"></use>
</g>
<text id="scrollHeight:723px" sketch:type="MSTextLayer" transform="translate(428.500000, 270.000000) rotate(-90.000000) translate(-428.500000, -270.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle">
<tspan x="359.224609" y="272" fill="#EE6B47">scrollHeight:</tspan>
<tspan x="459.289062" y="272" fill="#3B86C4">723px</tspan>
</text>
<path d="M370.5,22 L448.639999,22" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M370.5,521 L448.639999,521" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M439,24.5 L439,518.5" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-25-decoration-1" d="M439,25.3 C440.05,29.08 440.95,32.32 442,36.1 C439.9,36.1 438.1,36.1 436,36.1 C437.05,32.32 437.95,29.08 439,25.3 C439,25.3 439,25.3 439,25.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-25-decoration-2" d="M439,518.5 C440.05,514.72 440.95,511.48 442,507.7 C439.9,507.7 438.1,507.7 436,507.7 C437.05,511.48 437.95,514.72 439,518.5 C439,518.5 439,518.5 439,518.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-14" fill-opacity="0.8" fill="#FFFFFF" sketch:type="MSShapeGroup" x="58" y="33" width="312" height="89"></rect>
<rect id="Rectangle-15" fill-opacity="0.8" fill="#FFFFFF" sketch:type="MSShapeGroup" x="58" y="411" width="312" height="89"></rect>
<path d="M49.6399994,109.09 L348.999985,109.09" id="Line-39" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-39-decoration-1" d="M50.4399994,109.09 C54.2199994,108.04 57.4599994,107.14 61.2399994,106.09 C61.2399994,108.19 61.2399994,109.99 61.2399994,112.09 C57.4599994,111.04 54.2199994,110.14 50.4399994,109.09 C50.4399994,109.09 50.4399994,109.09 50.4399994,109.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path id="Line-39-decoration-2" d="M348.639999,109.09 C344.859999,108.04 341.619999,107.14 337.839999,106.09 C337.839999,108.19 337.839999,109.99 337.839999,112.09 C341.619999,111.04 344.859999,110.14 348.639999,109.09 C348.639999,109.09 348.639999,109.09 348.639999,109.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M351.639999,154 L351.639999,100" id="Line-42" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<path d="M46.6399994,154 L46.6399994,100" id="Line-43" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
<text id="scrollWidth-=-324px" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle">
<tspan x="155.375977" y="105" fill="#EE6B47">scrollWidth = </tspan>
<tspan x="263.137695" y="105" fill="#3B86C4">324px</tspan>
</text>
<g id="Group-2" sketch:type="MSLayerGroup" transform="translate(354.000000, 148.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="16" height="240" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-2)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-2" transform="translate(8.000000, 230.000000) scale(1, -1) translate(-8.000000, -230.000000) translate(0.000000, 220.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-2)" x="0" y="0" width="16" height="20" rx="3"></rect>
<polygon id="Triangle-1" fill="#92979F" points="8 7 11.2 13 4.8 13 "></polygon>
</g>
<g id="Rectangle-18-+-Triangle-3-+-Group" transform="translate(0.000000, 50.000000)" sketch:type="MSShapeGroup">
<g id="Rectangle-18-+-Triangle-3" transform="translate(8.000000, 25.500000) scale(1, -1) translate(-8.000000, -25.500000) " stroke="#CFCFCF" fill="url(#linearGradient-2)">
<rect id="Rectangle-18" x="0" y="0" width="16" height="51" rx="3"></rect>
</g>
<g id="Group" transform="translate(4.000000, 20.000000)" stroke="#979797" fill="#D8D8D8">
<rect id="Rectangle-22" x="0" y="0" width="8" height="2"></rect>
<rect id="Rectangle-23" x="0" y="3" width="8" height="2"></rect>
<rect id="Rectangle-24" x="0" y="6" width="8" height="2"></rect>
<rect id="Rectangle-25" x="0" y="9" width="8" height="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
2-ui/1-document/15-metrics/metric-scroll-width-height@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 259 KiB

22
2-ui/2-events-and-interfaces/4-event-bubbling/article.md
View file

@ -70,14 +70,14 @@
</ul>
[online]
[example height=220 src="bubble-target"]
[codetabs height=220 src="bubble-target"]
[/online]
Возможна и ситуация, когда `event.target` и `this` -- один и тот же элемент, например если в форме нет других тегов и клик был на самом элементе `<form>`.
## Прекращение всплытия
Всплытие идет прямо наверх. Обычно событие будет всплывать наверх и наверх, до элемента `<html>`, а затем до `document` и даже до `window`, вызывая все обработчики на своем пути.
Всплытие идёт прямо наверх. Обычно событие будет всплывать наверх и наверх, до элемента `<html>`, а затем до `document`, а иногда даже до `window`, вызывая все обработчики на своем пути.
**Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.**
@ -86,7 +86,7 @@
Например, здесь при клике на кнопку обработчик `body.onclick` не сработает:
```html
<!--+ run autorun -->
<!--+ run autorun height=60 -->
<body onclick="alert('сюда обработка не дойдёт')">
<button onclick="event.stopPropagation()">Кликни меня</button>
</body>
@ -121,13 +121,7 @@
Оно гораздо менее востребовано, но иногда, очень редко, знание о нём может быть полезным.
[cut]
## Три стадии прохода события
Кроме всплытия, есть ещё стадии прохода события.
В соответствии со стандартом, их три:
Строго говоря, стандарт выделяет целых три стадии прохода события:
<ol>
<li>Событие сначала идет сверху вниз. Эта стадия называется *"стадия перехвата"* (capturing stage).</li>
@ -143,9 +137,9 @@
**Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.**
Обработчики, добавленные через `on...`, ничего не знают о стадии перехвата, а начинают работать со всплытия.
Обработчики, добавленные через `on...`-свойство, ничего не знают о стадии перехвата, а начинают работать со всплытия.
**Чтобы поймать событие на стадии перехвата, нужно использовать третий аргумент `addEventListener`:**
Чтобы поймать событие на стадии перехвата, нужно использовать третий аргумент `addEventListener`:
<ul>
<li>Если аргумент `true`, то событие будет перехвачено по дороге вниз.</li>
@ -160,7 +154,7 @@
Чтобы увидеть перехват в действии, кликните на элементе `P`:
[example height=220 src="capture"]
[codetabs height=220 src="capture"]
Обработчики сработают в порядке "сверху-вниз": `FORM` -> `DIV` -> `P`.
@ -188,7 +182,7 @@ for(var i=0; i<elems.length; i++) {
Кликните по внутреннему элементу `P`, чтобы увидеть порядок прохода события:
[example height=220 src="both"]
[codetabs height=220 src="both"]
Должно быть `FORM` -> `DIV` -> `P` -> `P` -> `DIV` -> `FORM`. Заметим, что элемент `P` участвует в обоих стадиях.

5
2-ui/2-events-and-interfaces/4-event-bubbling/both.view/example.css
View file

@ -26,3 +26,8 @@ p {
line-height: 50px;
margin: 0;
}
body {
line-height: 25px;
font-size: 16px;
}

5
2-ui/2-events-and-interfaces/4-event-bubbling/both.view/index.html
View file

@ -1,7 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
</head>
<body>
<link type="text/css" rel="stylesheet" href="example.css">
<form>FORM
<div>DIV

1
2-ui/2-events-and-interfaces/4-event-bubbling/both.view/script.js
View file

@ -1,4 +1,5 @@
var elems = document.querySelectorAll('form,div,p');
for(var i=0; i<elems.length; i++) {

5
2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/example.css
View file

@ -26,3 +26,8 @@ p {
line-height: 50px;
margin: 0;
}
body {
line-height: 25px;
font-size: 16px;
}

8
2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
</head>
<body>
<link type="text/css" rel="stylesheet" href="example.css">
Клик выведет <code>target</code> и <code>this</code>:
Клик выведет <code>event.target</code> и <code>this</code>:
<form id="form">FORM
<div>DIV

14
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
View file

@ -12,7 +12,7 @@
В примере ниже вы можете наглядно посмотреть события `mouseover/out`, возникающие на всех элементах.
[example src="mouseoverout" height=220]
[codetabs src="mouseoverout" height=220]
Можно заметить, что в некоторых случаях значение `relatedTarget` может быть `null`. Это вполне нормально и означает, что мышь пришла из-за пределов окна (или ушла за окно).
@ -38,7 +38,7 @@
А еще попробуйте зайти курсором мыши на красный `div` и потом быстро вывести мышь из него куда-нибудь сквозь зеленый. Если движение мыши достаточно быстрое, то родительский элемент будет проигнорирован.
[example height=360 src="mouseoverout-fast"]
[codetabs height=360 src="mouseoverout-fast"]
Важно иметь в виду эту особенность событий, чтобы не написать код, который рассчитан на последовательный проход над элементами.
@ -58,7 +58,7 @@
Зайдите на синий элемент, а потом переведите мышь на красный -- и наблюдайте за событиями:
[example height=360 src="mouseoverout-child"]
[codetabs height=360 src="mouseoverout-child"]
<ol>
<li>При заходе на синий -- на нём сработает `mouseover [target: blue]`.</li>
@ -91,7 +91,7 @@
Вы можете увидеть, как они работают проведя курсором над голубым `DIV'ом` ниже. Обработчик стоит только на внешнем, синем элементе. Обратите внимание -- лишних событий при переходе на красного потомка нет!
[example height=340 src="mouseleave"]
[codetabs height=340 src="mouseleave"]
## Делегирование -- проблема mouseenter/leave
@ -103,7 +103,7 @@
Это легко видеть в примере ниже: обработчики `mouseenter/leave` стоят на `<table>` и сработают при входе-выходе из таблицы, получить из них какую-то информацию о переходах по её ячейкам не представляется возможным:
[example height=480 src="mouseleave-table"]
[codetabs height=480 src="mouseleave-table"]
Не беда -- воспользуемся `mouseover/mouseout`.
@ -113,7 +113,7 @@
Получится так:
[example height=450 src="mouseenter-mouseleave-delegation"]
[codetabs height=450 src="mouseenter-mouseleave-delegation"]
В этом примере код обработчиков выглядит так:
@ -139,7 +139,7 @@ table.onmouseout = function(event) {
Детали кода вы можете посмотреть в примере ниже, который демонстрирует этот подход:
[example height=450 src="mouseenter-mouseleave-delegation-2"]
[codetabs height=450 src="mouseenter-mouseleave-delegation-2"]
Попробуйте по-разному, быстро или медленно заходить и выходить в ячейки таблицы. Обработчики `mouseover/mouseout` стоят на `table`, но при помощи делегирования корректно обрабатывают вход-выход.

2
2-ui/3-event-details/8-keyboard-events/article.md
View file

@ -10,7 +10,7 @@
Попробуйте различные варианты нажатия клавиш в текстовом поле.
[example src="keyboard-dump"]
[codetabs src="keyboard-dump"]
По мере чтения статьи, если возникнут вопросы -- возвращайтесь к этому стенду.

4
2-ui/5-widgets/2-widgets-structure/article.md
View file

@ -58,7 +58,7 @@ var menu = new Menu({
```
Меню:
[example src="menu-1"]
[codetabs src="menu-1"]
Это, конечно, только первый шаг, но уже здесь видны некоторые важные соглашения в коде.
@ -268,7 +268,7 @@ function Menu(options) {
Основные изменения -- теперь метод `toggle` не просто меняет класс. Этого недостаточно, ведь, чтобы открыть меню, нужно для начала отрендерить его опции. Поэтому добавлено два метода `open` и `close`, которые также полезны и для внешнего интерфейса.
В действии:
[example src="menu-3-elem" height="200"]
[codetabs src="menu-3-elem" height="200"]
## Итого

4
2-ui/5-widgets/5-custom-events/article.md
View file

@ -52,7 +52,7 @@ function showSelected(href) {
Демо:
[example src="menu-callback" height="180"]
[codetabs src="menu-callback" height="180"]
## Свои события
@ -236,7 +236,7 @@ menu.on('select', function(value) {
```
Результат:
[example src="menu-event"]
[codetabs src="menu-event"]
## События при помощи jQuery