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

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

14
2-ui/99-ui-misc/02-selection-range/article.md
View file

@ -74,7 +74,7 @@ drawHtmlTree(selectPDomtree, 'div.select-p-domtree', 690, 320);
Let's select `"Example: <i>italic</i>"`. That's two first children of `<p>` (counting text nodes):
![](range-example-p-0-1.png)
![](range-example-p-0-1.svg)
```html run
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
@ -123,7 +123,7 @@ From <input id="start" type="number" value=1> – To <input id="end" type="numbe
E.g. selecting from `1` to `4` gives range `<i>italic</i> and <b>bold</b>`.
![](range-example-p-1-3.png)
![](range-example-p-1-3.svg)
We don't have to use the same node in `setStart` and `setEnd`. A range may span across many unrelated nodes. It's only important that the end is after the start.
@ -131,7 +131,7 @@ We don't have to use the same node in `setStart` and `setEnd`. A range may span
Let's select the text partially, like this:
![](range-example-p-2-b-3.png)
![](range-example-p-2-b-3.svg)
That's also possible, we just need to set the start and the end as a relative offset in text nodes.
@ -157,7 +157,7 @@ We need to create a range, that:
The range object has following properties:
![](range-example-p-2-b-3-range.png)
![](range-example-p-2-b-3-range.svg)
- `startContainer`, `startOffset` -- node and offset of the start,
- in the example above: first text node inside `<p>` and `2`.
@ -272,7 +272,7 @@ A selection may include zero or more ranges. At least, the [Selection API specif
Here's a screenshot of a selection with 3 ranges, made in Firefox:
![](selection-firefox.png)
![](selection-firefox.svg)
Other browsers support at maximum 1 range. As we'll see, some of `Selection` methods imply that there may be many ranges, but again, in all browsers except Firefox, there's at maximum 1.
@ -298,11 +298,11 @@ If the start (anchor) of the selection goes in the document before the end (focu
E.g. if the user starts selecting with mouse and goes from "Example" to "italic":
![](selection-direction-forward.png)
![](selection-direction-forward.svg)
Otherwise, if they go from the end of "italic" to "Example", the selection is directed "backward", its focus will be before the anchor:
![](selection-direction-backward.png)
![](selection-direction-backward.svg)
That's different from `Range` objects that are always directed forward: the range start can't be after its end.
````

BIN
2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.6 KiB

36
2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="640px" height="89px" viewBox="0 0 640 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>range-example-p-0-1.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="47" y="35" width="262" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="262" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="range-example-p-0-1.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="51">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(99.000000, 62.500000) scale(1, -1) translate(-99.000000, -62.500000) " points="48 68 48 57 48 57 150 57 150 68"></polyline>
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(231.000000, 62.500000) scale(1, -1) translate(-231.000000, -62.500000) " points="154 68 154 57 154 57 308 57 308 68"></polyline>
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="93" y="84">0</tspan>
</text>
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="226" y="84">1</tspan>
</text>
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="334" y="84">2</tspan>
</text>
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="428" y="84">3</tspan>
</text>
<polyline id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" transform="translate(338.500000, 62.500000) scale(1, -1) translate(-338.500000, -62.500000) " points="312 68 312 57 312 57 365 57 365 68"></polyline>
<polyline id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" transform="translate(433.000000, 62.500000) scale(1, -1) translate(-433.000000, -62.500000) " points="369 68 369 57 369 57 497 57 497 68"></polyline>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
2-ui/99-ui-misc/02-selection-range/range-example-p-0-1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.6 KiB

36
2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="640px" height="89px" viewBox="0 0 640 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>range-example-p-1-3.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="153" y="35" width="345" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="345" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="range-example-p-1-3.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="51">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(99.000000, 62.500000) scale(1, -1) translate(-99.000000, -62.500000) " points="48 68 48 57 48 57 150 57 150 68"></polyline>
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(231.000000, 62.500000) scale(1, -1) translate(-231.000000, -62.500000) " points="154 68 154 57 154 57 308 57 308 68"></polyline>
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="93" y="84">0</tspan>
</text>
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="226" y="84">1</tspan>
</text>
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="334" y="84">2</tspan>
</text>
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="428" y="84">3</tspan>
</text>
<polyline id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" transform="translate(338.500000, 62.500000) scale(1, -1) translate(-338.500000, -62.500000) " points="312 68 312 57 312 57 365 57 365 68"></polyline>
<polyline id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" transform="translate(433.000000, 62.500000) scale(1, -1) translate(-433.000000, -62.500000) " points="369 68 369 57 369 57 497 57 497 68"></polyline>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
2-ui/99-ui-misc/02-selection-range/range-example-p-1-3@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

47
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg Normal file
View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="683px" height="229px" viewBox="0 0 683 229" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>range-example-p-2-b-3-range.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="183" y="54" width="368" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="368" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="range-example-p-2-b-3-range.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="126" y="70">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<polyline id="Path" stroke="#EE6B47" stroke-width="2" transform="translate(213.000000, 73.000000) scale(1, -1) translate(-213.000000, -73.000000) " points="160 78 160 68 160 68 266 68 266 78"></polyline>
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(392.000000, 152.500000) scale(1, -1) translate(-392.000000, -152.500000) " points="126 162 126 143 126 143 658 143 658 162"></polyline>
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(539.000000, 75.000000) scale(1, -1) translate(-539.000000, -75.000000) " points="514 80 514 70 514 70 564 70 564 80"></polyline>
<path id="Line" d="M141.805422,96.0335122 L125.588919,81.8440721 L126.905928,80.3389187 L143.122431,94.5283588 L147.073459,90.0128986 L153,104.5 L137.854394,100.548972 L141.805422,96.0335122 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-3" d="M484.805422,96.0335122 L468.588919,81.8440721 L469.905928,80.3389187 L486.122431,94.5283588 L490.073459,90.0128986 L496,104.5 L480.854394,100.548972 L484.805422,96.0335122 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<text id="startContainer-(&lt;p&gt;." font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="10.3" y="118">startContainer</tspan>
<tspan x="0.7" y="136">(&lt;p&gt;.firstChild)</tspan>
</text>
<path id="Line-Copy" d="M184,88 L184,104 L182,104 L182,88 L176,88 L183,74 L190,88 L184,88 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-2" d="M552,87 L552,103 L550,103 L550,87 L544,87 L551,73 L558,87 L552,87 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="startOffset-(=2)" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="170.2" y="118">startOffset</tspan>
<tspan x="203.8" y="136">(=2)</tspan>
</text>
<text id="commonAncestorContai" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="316.1" y="181">commonAncestorContainer</tspan>
<tspan x="402.5" y="199">(&lt;p&gt;)</tspan>
</text>
<text id="endContainer-(&lt;b&gt;.fi" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="388.9" y="117">endContainer</tspan>
<tspan x="369.7" y="135">(&lt;b&gt;.firstChild)</tspan>
</text>
<text id="endOffset-(=3)" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="537.3" y="118">endOffset</tspan>
<tspan x="561.3" y="136">(=3)</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 49 KiB

BIN
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.9 KiB

36
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="640px" height="89px" viewBox="0 0 640 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>range-example-p-2-b-3.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="71" y="35" width="367" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="367" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="range-example-p-2-b-3.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="51">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(99.000000, 62.500000) scale(1, -1) translate(-99.000000, -62.500000) " points="48 68 48 57 48 57 150 57 150 68"></polyline>
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(231.000000, 62.500000) scale(1, -1) translate(-231.000000, -62.500000) " points="154 68 154 57 154 57 308 57 308 68"></polyline>
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="93" y="84">0</tspan>
</text>
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="226" y="84">1</tspan>
</text>
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="334" y="84">2</tspan>
</text>
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="428" y="84">3</tspan>
</text>
<polyline id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" transform="translate(338.500000, 62.500000) scale(1, -1) translate(-338.500000, -62.500000) " points="312 68 312 57 312 57 365 57 365 68"></polyline>
<polyline id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" transform="translate(433.000000, 62.500000) scale(1, -1) translate(-433.000000, -62.500000) " points="369 68 369 57 369 57 497 57 497 68"></polyline>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
2-ui/99-ui-misc/02-selection-range/selection-direction-backward.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

46
2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="559px" height="128px" viewBox="0 0 559 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>selection-direction-backward.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="47" y="62" width="262" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="262" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-3">
<stop stop-color="#F2F2F2" offset="0%"></stop>
<stop stop-color="#808080" offset="100%"></stop>
</linearGradient>
<polygon id="path-4" points="7.84066209 8.51607073 12.4865478 6.86493774 1.13686838e-13 0 3.64025044 13.7764227 6.3662792 9.66798489 9.63003598 13.8454031 11.1044189 12.6934889"></polygon>
<filter x="-52.6%" y="-43.3%" width="212.1%" height="203.6%" filterUnits="objectBoundingBox" id="filter-5">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="selection-direction-backward.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="79">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<path id="Line-Copy-3" d="M308.675044,49.162478 L308.675044,49.5 L308,49.5 L296,55.5 L296,49.5 L47,49.5 L47,47.5 L296,47.5 L296,41.5 L308,47.5 L308.675044,47.5 L308.675044,47.837522 L310,48.5 L308.675044,49.162478 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="focus" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="25" y="32">focus</tspan>
</text>
<text id="anchor" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="277.2" y="32">anchor</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<rect id="Rectangle" fill="url(#linearGradient-3)" opacity="0.200000003" transform="translate(184.000000, 102.000000) scale(-1, 1) translate(-184.000000, -102.000000) " x="53" y="94" width="262" height="16"></rect>
<g id="Cursor-/-Default-White" transform="translate(49.000000, 94.000000)">
<g id="Rectangle-237">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
<path stroke-opacity="0.8" stroke="#000000" stroke-width="1" d="M8.6617598,8.75489325 L11.806255,12.7796636 L9.54386134,14.5472392 L6.39936616,10.5224689 L3.44128728,14.9806328 L-0.781456351,-1.00021852 L13.7031213,6.96320943 L8.6617598,8.75489325 Z" fill="#FFFFFF" fill-rule="evenodd"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
2-ui/99-ui-misc/02-selection-range/selection-direction-backward@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
2-ui/99-ui-misc/02-selection-range/selection-direction-forward.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

46
2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="563px" height="128px" viewBox="0 0 563 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>selection-direction-forward.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
<stop stop-color="#F2F2F2" offset="0%"></stop>
<stop stop-color="#808080" offset="100%"></stop>
</linearGradient>
<rect id="path-2" x="47" y="72" width="262" height="21"></rect>
<mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="262" height="21" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<polygon id="path-4" points="7.84066209 8.51607073 12.4865478 6.86493774 1.13686838e-13 0 3.64025044 13.7764227 6.3662792 9.66798489 9.63003598 13.8454031 11.1044189 12.6934889"></polygon>
<filter x="-52.6%" y="-43.3%" width="212.1%" height="203.6%" filterUnits="objectBoundingBox" id="filter-5">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="selection-direction-forward.svg">
<rect id="Rectangle" fill="url(#linearGradient-1)" opacity="0.200000003" x="47" y="100" width="262" height="16"></rect>
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="89">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<path id="Line-Copy-3" d="M308.675044,59.162478 L308.675044,59.5 L308,59.5 L296,65.5 L296,59.5 L47,59.5 L47,57.5 L296,57.5 L296,51.5 L308,57.5 L308.675044,57.5 L308.675044,57.837522 L310,58.5 L308.675044,59.162478 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="anchor" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="18.2" y="42">anchor</tspan>
</text>
<text id="focus" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="283" y="42">focus</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-3)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-2"></use>
<g id="Cursor-/-Default-White" transform="translate(306.000000, 100.000000)">
<g id="Rectangle-237">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
<path stroke-opacity="0.8" stroke="#000000" stroke-width="1" d="M8.6617598,8.75489325 L11.806255,12.7796636 L9.54386134,14.5472392 L6.39936616,10.5224689 L3.44128728,14.9806328 L-0.781456351,-1.00021852 L13.7031213,6.96320943 L8.6617598,8.75489325 Z" fill="#FFFFFF" fill-rule="evenodd"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
2-ui/99-ui-misc/02-selection-range/selection-direction-forward@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
2-ui/99-ui-misc/02-selection-range/selection-firefox.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

23
2-ui/99-ui-misc/02-selection-range/selection-firefox.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
2-ui/99-ui-misc/02-selection-range/selection-firefox@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 109 KiB