update sample images

This commit is contained in:
be5invis 2017-06-07 15:55:40 +08:00
parent 6c499f7ffd
commit 848e8c38f2
13 changed files with 294 additions and 284 deletions

BIN
images/charvars.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 101 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 416 KiB

After

Width:  |  Height:  |  Size: 416 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 318 KiB

After

Width:  |  Height:  |  Size: 318 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 147 KiB

After

Width:  |  Height:  |  Size: 147 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 358 KiB

After

Width:  |  Height:  |  Size: 358 KiB

Before After
Before After

BIN
images/stylesets.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 266 KiB

After

Width:  |  Height:  |  Size: 266 KiB

Before After
Before After

View file

@ -22,194 +22,195 @@
<a href="#" class="pp heavy ">Heavy</a><a href="#" class="pp slab heavy ">Slab Heavy</a><a href="#" class="pp heavy italic ">Heavy Italic</a><a href="#" class="pp slab heavy italic ">Slab Heavy Italic</a><a href="#" class="pp heavy oblique ">Heavy Oblique</a><a href="#" class="pp slab heavy oblique ">Slab Heavy Oblique</a>
</div>
</section>
<section id="opentype">
<h2>Opentype features</h2>
<section id="stylesets" class="opentype">
<div class="hr">Stylistic Sets</div>
<ol class="wide">
<li>
<span class="tag">off</span><span class="description">Default</span>
<span class="sample" style="font-feature-settings:'off'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'off'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss01</span><span class="description">Andale Mono Style</span>
<span class="sample" style="font-feature-settings:'ss01'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss01'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss02</span><span class="description">Anonymous Pro Style</span>
<span class="sample" style="font-feature-settings:'ss02'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss02'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss03</span><span class="description">Consolas Style</span>
<span class="sample" style="font-feature-settings:'ss03'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss03'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss04</span><span class="description">Menlo Style</span>
<span class="sample" style="font-feature-settings:'ss04'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss04'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss05</span><span class="description">Fira Mono Style</span>
<span class="sample" style="font-feature-settings:'ss05'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss05'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss06</span><span class="description">Liberation Mono Style</span>
<span class="sample" style="font-feature-settings:'ss06'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss06'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss07</span><span class="description">Monaco Style</span>
<span class="sample" style="font-feature-settings:'ss07'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss07'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss08</span><span class="description">Pragmata Pro Style</span>
<span class="sample" style="font-feature-settings:'ss08'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss08'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss09</span><span class="description">Source Code Pro Style</span>
<span class="sample" style="font-feature-settings:'ss09'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss09'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li><li>
<span class="tag">ss10</span><span class="description">Envy Code R Style</span>
<span class="sample" style="font-feature-settings:'ss10'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss10'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li>
<li>
<span class="tag">ss11</span><span class="description">X Windows Fixed Style</span>
<span class="sample" style="font-feature-settings:'ss11'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span><span class="sample italic" style="font-feature-settings:'ss11'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>123456789</span>
</li>
</ol><div class="hr">Character Variants</div>
<ol class="narrow">
<li>
<span class="tag">cv01</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv01'">a</span><span class="sample italic" style="font-feature-settings:'cv01'">a</span>
</li><li>
<span class="tag">cv02</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv02'">a</span><span class="sample italic" style="font-feature-settings:'cv02'">a</span>
</li><li>
<span class="tag">cv03</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv03'">i</span><span class="sample italic" style="font-feature-settings:'cv03'">i</span>
</li><li>
<span class="tag">cv04</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv04'">i</span><span class="sample italic" style="font-feature-settings:'cv04'">i</span>
</li><li>
<span class="tag">cv05</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv05'">i</span><span class="sample italic" style="font-feature-settings:'cv05'">i</span>
</li><li>
<span class="tag">cv06</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv06'">i</span><span class="sample italic" style="font-feature-settings:'cv06'">i</span>
</li><li>
<span class="tag">cv07</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv07'">l</span><span class="sample italic" style="font-feature-settings:'cv07'">l</span>
</li><li>
<span class="tag">cv08</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv08'">l</span><span class="sample italic" style="font-feature-settings:'cv08'">l</span>
</li><li>
<span class="tag">cv09</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv09'">l</span><span class="sample italic" style="font-feature-settings:'cv09'">l</span>
</li><li>
<span class="tag">cv10</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv10'">l</span><span class="sample italic" style="font-feature-settings:'cv10'">l</span>
</li><li>
<span class="tag">cv11</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv11'">g</span><span class="sample italic" style="font-feature-settings:'cv11'">g</span>
</li><li>
<span class="tag">cv12</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv12'">g</span><span class="sample italic" style="font-feature-settings:'cv12'">g</span>
</li><li>
<span class="tag">cv13</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv13'">0</span><span class="sample italic" style="font-feature-settings:'cv13'">0</span>
</li><li>
<span class="tag">cv14</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv14'">0</span><span class="sample italic" style="font-feature-settings:'cv14'">0</span>
</li><li>
<span class="tag">cv15</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv15'">0</span><span class="sample italic" style="font-feature-settings:'cv15'">0</span>
</li><li>
<span class="tag">cv16</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv16'">~</span><span class="sample italic" style="font-feature-settings:'cv16'">~</span>
</li><li>
<span class="tag">cv17</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv17'">~</span><span class="sample italic" style="font-feature-settings:'cv17'">~</span>
</li><li>
<span class="tag">cv18</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv18'">*</span><span class="sample italic" style="font-feature-settings:'cv18'">*</span>
</li><li>
<span class="tag">cv19</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv19'">*</span><span class="sample italic" style="font-feature-settings:'cv19'">*</span>
</li><li>
<span class="tag">cv20</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv20'">_</span><span class="sample italic" style="font-feature-settings:'cv20'">_</span>
</li><li>
<span class="tag">cv21</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv21'">_</span><span class="sample italic" style="font-feature-settings:'cv21'">_</span>
</li><li>
<span class="tag">cv22</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv22'"></span><span class="sample italic" style="font-feature-settings:'cv22'"></span>
</li><li>
<span class="tag">cv23</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv23'"></span><span class="sample italic" style="font-feature-settings:'cv23'"></span>
</li><li>
<span class="tag">cv24</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv24'">g</span><span class="sample italic" style="font-feature-settings:'cv24'">g</span>
</li><li>
<span class="tag">cv25</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv25'">m</span><span class="sample italic" style="font-feature-settings:'cv25'">m</span>
</li><li>
<span class="tag">cv26</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv26'">m</span><span class="sample italic" style="font-feature-settings:'cv26'">m</span>
</li><li>
<span class="tag">cv27</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv27'">l</span><span class="sample italic" style="font-feature-settings:'cv27'">l</span>
</li><li>
<span class="tag">cv28</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv28'">l</span><span class="sample italic" style="font-feature-settings:'cv28'">l</span>
</li><li>
<span class="tag">cv29</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv29'">^</span><span class="sample italic" style="font-feature-settings:'cv29'">^</span>
</li><li>
<span class="tag">cv30</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv30'">^</span><span class="sample italic" style="font-feature-settings:'cv30'">^</span>
</li><li>
<span class="tag">cv31</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv31'">@</span><span class="sample italic" style="font-feature-settings:'cv31'">@</span>
</li><li>
<span class="tag">cv32</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv32'">@</span><span class="sample italic" style="font-feature-settings:'cv32'">@</span>
</li><li>
<span class="tag">cv33</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv33'">@</span><span class="sample italic" style="font-feature-settings:'cv33'">@</span>
</li><li>
<span class="tag">cv34</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv34'">ß</span><span class="sample italic" style="font-feature-settings:'cv34'">ß</span>
</li><li>
<span class="tag">cv35</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv35'">ß</span><span class="sample italic" style="font-feature-settings:'cv35'">ß</span>
</li><li>
<span class="tag">cv36</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv36'">{</span><span class="sample italic" style="font-feature-settings:'cv36'">{</span>
</li><li>
<span class="tag">cv37</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv37'">{</span><span class="sample italic" style="font-feature-settings:'cv37'">{</span>
</li><li>
<span class="tag">cv38</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv38'">$</span><span class="sample italic" style="font-feature-settings:'cv38'">$</span>
</li><li>
<span class="tag">cv39</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv39'">$</span><span class="sample italic" style="font-feature-settings:'cv39'">$</span>
</li><li>
<span class="tag">cv40</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv40'">t</span><span class="sample italic" style="font-feature-settings:'cv40'">t</span>
</li><li>
<span class="tag">cv41</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv41'">t</span><span class="sample italic" style="font-feature-settings:'cv41'">t</span>
</li><li>
<span class="tag">cv42</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv42'">Q</span><span class="sample italic" style="font-feature-settings:'cv42'">Q</span>
</li><li>
<span class="tag">cv43</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv43'">Q</span><span class="sample italic" style="font-feature-settings:'cv43'">Q</span>
</li><li>
<span class="tag">cv44</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv44'">#</span><span class="sample italic" style="font-feature-settings:'cv44'">#</span>
</li><li>
<span class="tag">cv45</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv45'">#</span><span class="sample italic" style="font-feature-settings:'cv45'">#</span>
</li>
</li><li>
<span class="tag">cv46</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv46'">3</span><span class="sample italic" style="font-feature-settings:'cv46'">3</span>
</li><li>
<span class="tag">cv47</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv47'">3</span><span class="sample italic" style="font-feature-settings:'cv47'">3</span>
</li>
</ol>
<ol class="wide">
<li>
<span class="tag">off</span><span class="description">Default</span>
<span class="sample" style="font-feature-settings:'off'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'off'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss01</span><span class="description">Andale Mono Style</span>
<span class="sample" style="font-feature-settings:'ss01'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss01'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss02</span><span class="description">Anonymous Pro Style</span>
<span class="sample" style="font-feature-settings:'ss02'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss02'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss03</span><span class="description">Consolas Style</span>
<span class="sample" style="font-feature-settings:'ss03'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss03'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss04</span><span class="description">Menlo Style</span>
<span class="sample" style="font-feature-settings:'ss04'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss04'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss05</span><span class="description">Fira Mono Style</span>
<span class="sample" style="font-feature-settings:'ss05'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss05'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss06</span><span class="description">Liberation Mono Style</span>
<span class="sample" style="font-feature-settings:'ss06'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss06'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss07</span><span class="description">Monaco Style</span>
<span class="sample" style="font-feature-settings:'ss07'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss07'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss08</span><span class="description">Pragmata Pro Style</span>
<span class="sample" style="font-feature-settings:'ss08'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss08'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss09</span><span class="description">Source Code Pro Style</span>
<span class="sample" style="font-feature-settings:'ss09'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss09'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss10</span><span class="description">Envy Code R Style</span>
<span class="sample" style="font-feature-settings:'ss10'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss10'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li><li>
<span class="tag">ss11</span><span class="description">X Windows Fixed Style</span>
<span class="sample" style="font-feature-settings:'ss11'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span><span class="sample italic" style="font-feature-settings:'ss11'"><b>@</b>re<b>a</b><b>l</b> fox.qu<b>i</b>ck(h)<b>{</b> <b>*</b><b>i</b>s<b>_</b>brown &amp;&amp; <b>i</b>t<b>_</b>jumps<b>_</b>over(do<b>g</b>es.<b>l</b><b>a</b>zy) <b>}</b> <b>0</b>12<b>3</b>456789</span>
</li>
</ol>
</section>
<section id="charvars" class="opentype">
<div class="hr">Character Variants</div>
<ol class="narrow">
<li>
<span class="tag">cv01</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv01'">a</span><span class="sample italic" style="font-feature-settings:'cv01'">a</span>
</li><li>
<span class="tag">cv02</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv02'">a</span><span class="sample italic" style="font-feature-settings:'cv02'">a</span>
</li><li>
<span class="tag">cv03</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv03'">i</span><span class="sample italic" style="font-feature-settings:'cv03'">i</span>
</li><li>
<span class="tag">cv04</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv04'">i</span><span class="sample italic" style="font-feature-settings:'cv04'">i</span>
</li><li>
<span class="tag">cv05</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv05'">i</span><span class="sample italic" style="font-feature-settings:'cv05'">i</span>
</li><li>
<span class="tag">cv06</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv06'">i</span><span class="sample italic" style="font-feature-settings:'cv06'">i</span>
</li><li>
<span class="tag">cv07</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv07'">l</span><span class="sample italic" style="font-feature-settings:'cv07'">l</span>
</li><li>
<span class="tag">cv08</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv08'">l</span><span class="sample italic" style="font-feature-settings:'cv08'">l</span>
</li><li>
<span class="tag">cv09</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv09'">l</span><span class="sample italic" style="font-feature-settings:'cv09'">l</span>
</li><li>
<span class="tag">cv10</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv10'">l</span><span class="sample italic" style="font-feature-settings:'cv10'">l</span>
</li><li>
<span class="tag">cv11</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv11'">g</span><span class="sample italic" style="font-feature-settings:'cv11'">g</span>
</li><li>
<span class="tag">cv12</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv12'">g</span><span class="sample italic" style="font-feature-settings:'cv12'">g</span>
</li><li>
<span class="tag">cv13</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv13'">0</span><span class="sample italic" style="font-feature-settings:'cv13'">0</span>
</li><li>
<span class="tag">cv14</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv14'">0</span><span class="sample italic" style="font-feature-settings:'cv14'">0</span>
</li><li>
<span class="tag">cv15</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv15'">0</span><span class="sample italic" style="font-feature-settings:'cv15'">0</span>
</li><li>
<span class="tag">cv16</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv16'">~</span><span class="sample italic" style="font-feature-settings:'cv16'">~</span>
</li><li>
<span class="tag">cv17</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv17'">~</span><span class="sample italic" style="font-feature-settings:'cv17'">~</span>
</li><li>
<span class="tag">cv18</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv18'">*</span><span class="sample italic" style="font-feature-settings:'cv18'">*</span>
</li><li>
<span class="tag">cv19</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv19'">*</span><span class="sample italic" style="font-feature-settings:'cv19'">*</span>
</li><li>
<span class="tag">cv20</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv20'">_</span><span class="sample italic" style="font-feature-settings:'cv20'">_</span>
</li><li>
<span class="tag">cv21</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv21'">_</span><span class="sample italic" style="font-feature-settings:'cv21'">_</span>
</li><li>
<span class="tag">cv22</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv22'"></span><span class="sample italic" style="font-feature-settings:'cv22'"></span>
</li><li>
<span class="tag">cv23</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv23'"></span><span class="sample italic" style="font-feature-settings:'cv23'"></span>
</li><li>
<span class="tag">cv24</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv24'">g</span><span class="sample italic" style="font-feature-settings:'cv24'">g</span>
</li><li>
<span class="tag">cv25</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv25'">m</span><span class="sample italic" style="font-feature-settings:'cv25'">m</span>
</li><li>
<span class="tag">cv26</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv26'">m</span><span class="sample italic" style="font-feature-settings:'cv26'">m</span>
</li><li>
<span class="tag">cv27</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv27'">l</span><span class="sample italic" style="font-feature-settings:'cv27'">l</span>
</li><li>
<span class="tag">cv28</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv28'">l</span><span class="sample italic" style="font-feature-settings:'cv28'">l</span>
</li><li>
<span class="tag">cv29</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv29'">^</span><span class="sample italic" style="font-feature-settings:'cv29'">^</span>
</li><li>
<span class="tag">cv30</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv30'">^</span><span class="sample italic" style="font-feature-settings:'cv30'">^</span>
</li><li>
<span class="tag">cv31</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv31'">@</span><span class="sample italic" style="font-feature-settings:'cv31'">@</span>
</li><li>
<span class="tag">cv32</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv32'">@</span><span class="sample italic" style="font-feature-settings:'cv32'">@</span>
</li><li>
<span class="tag">cv33</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv33'">@</span><span class="sample italic" style="font-feature-settings:'cv33'">@</span>
</li><li>
<span class="tag">cv34</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv34'">ß</span><span class="sample italic" style="font-feature-settings:'cv34'">ß</span>
</li><li>
<span class="tag">cv35</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv35'">ß</span><span class="sample italic" style="font-feature-settings:'cv35'">ß</span>
</li><li>
<span class="tag">cv36</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv36'">{</span><span class="sample italic" style="font-feature-settings:'cv36'">{</span>
</li><li>
<span class="tag">cv37</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv37'">{</span><span class="sample italic" style="font-feature-settings:'cv37'">{</span>
</li><li>
<span class="tag">cv38</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv38'">$</span><span class="sample italic" style="font-feature-settings:'cv38'">$</span>
</li><li>
<span class="tag">cv39</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv39'">$</span><span class="sample italic" style="font-feature-settings:'cv39'">$</span>
</li><li>
<span class="tag">cv40</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv40'">t</span><span class="sample italic" style="font-feature-settings:'cv40'">t</span>
</li><li>
<span class="tag">cv41</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv41'">t</span><span class="sample italic" style="font-feature-settings:'cv41'">t</span>
</li><li>
<span class="tag">cv42</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv42'">Q</span><span class="sample italic" style="font-feature-settings:'cv42'">Q</span>
</li><li>
<span class="tag">cv43</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv43'">Q</span><span class="sample italic" style="font-feature-settings:'cv43'">Q</span>
</li><li>
<span class="tag">cv44</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv44'">#</span><span class="sample italic" style="font-feature-settings:'cv44'">#</span>
</li><li>
<span class="tag">cv45</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv45'">#</span><span class="sample italic" style="font-feature-settings:'cv45'">#</span>
</li>
</li><li>
<span class="tag">cv46</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv46'">3</span><span class="sample italic" style="font-feature-settings:'cv46'">3</span>
</li><li>
<span class="tag">cv47</span><span class="description"></span>
<span class="sample" style="font-feature-settings:'cv47'">3</span><span class="sample italic" style="font-feature-settings:'cv47'">3</span>
</li>
</ol>
</section>
<section id="matrix">
<div>

View file

@ -1,98 +1,107 @@
if(window && window.process && window.process.type && process.versions['electron']) (function(){
console.log('I AN IN ELECTRON');
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var dpi = window.devicePixelRatio;
var ipc = require('electron').ipcRenderer;
var onScroll = function(){};
ipc.on('scroll', function(){
onScroll.apply(this, arguments);
setTimeout(function(){ ipc.send('snapshot', 'scroll-done') }, 500);
});
var onComplete = function(){};
ipc.on('complete', function(){ onComplete.apply(this, arguments) });
function captureElement(options, callback){
window.scroll(0, 0);
setTimeout(function(){
var rect = options.el.getBoundingClientRect();
onScroll = function(event, arg){
window.scrollTo(0, arg);
if (window && window.process && window.process.type && process.versions["electron"])
(function() {
console.log("I AN IN ELECTRON");
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var dpi = window.devicePixelRatio;
var ipc = require("electron").ipcRenderer;
var onScroll = function() {};
ipc.on("scroll", function() {
onScroll.apply(this, arguments);
setTimeout(function() {
ipc.send("snapshot", "scroll-done");
}, 500);
});
var onComplete = function() {};
ipc.on("complete", function() {
onComplete.apply(this, arguments);
});
function captureElement(options, callback) {
window.scroll(0, 0);
setTimeout(function() {
var rect = options.el.getBoundingClientRect();
onScroll = function(event, arg) {
window.scrollTo(0, arg);
};
onComplete = function() {
if (callback) callback();
onComplete = function() {};
};
ipc.send("snapshot", {
name: options.name,
windowWidth: windowWidth,
windowHeight: windowHeight,
doubleTrim: options.doubleTrim,
dpi: dpi,
x: rect.left | 0,
y: rect.top | 0,
width: rect.width | 0,
height: rect.height | 0
});
}, 10);
}
window.onload = function() {
var snapshotTasks = [
{
el: document.querySelector("#downloadoptions"),
name: "download-options",
doubleTrim: "white"
},
{
el: document.querySelector("#languages"),
name: "languages"
},
{
el: document.querySelector("#variants"),
name: "variants"
},
{
el: document.querySelector("#stylesets"),
name: "stylesets"
},
{
el: document.querySelector("#charvars"),
name: "charvars"
},
{
el: document.querySelector("#matrix"),
name: "matrix"
},
{
el: document.querySelector("#family"),
name: "family"
},
{
el: document.querySelector("#previews"),
name: "preview-all"
},
{
el: document.querySelector("#weights"),
name: "weights"
},
{
el: document.querySelector("#ligations"),
name: "ligations",
doubleTrim: "white"
}
];
current = 0;
var step = function() {
var doit = function() {
captureElement(snapshotTasks[current], function() {
current += 1;
if (current >= snapshotTasks.length) window.close();
else setTimeout(step, 100);
});
};
if (snapshotTasks[current].prepare) snapshotTasks[current].prepare(doit);
else setTimeout(doit, 100);
};
onComplete = function(){
if(callback) callback();
onComplete = function(){};
};
ipc.send('snapshot', {
name: options.name,
windowWidth: windowWidth,
windowHeight: windowHeight,
doubleTrim: options.doubleTrim,
dpi: dpi,
x: rect.left | 0,
y: rect.top | 0,
width: rect.width | 0,
height: rect.height | 0
});
}, 10);
}
window.onload = function(){
var snapshotTasks = [
{
el: document.querySelector('#downloadoptions'),
name: 'download-options',
doubleTrim: 'white'
},
{
el: document.querySelector('#languages'),
name: 'languages'
},
{
el: document.querySelector('#variants'),
name: 'variants'
},
{
el: document.querySelector('#opentype'),
name: 'opentype'
},
{
el: document.querySelector('#matrix'),
name: 'matrix'
},
{
el: document.querySelector('#family'),
name: 'family'
},
{
el: document.querySelector('#previews'),
name: 'preview-all'
},
{
el: document.querySelector('#weights'),
name: 'weights'
},
{
el: document.querySelector('#ligations'),
name: 'ligations',
doubleTrim: 'white'
}
];
current = 0;
var step = function(){
var doit = function(){
captureElement(snapshotTasks[current], function(){
current += 1;
if(current >= snapshotTasks.length) window.close()
else setTimeout(step, 100)
})
};
if(snapshotTasks[current].prepare) snapshotTasks[current].prepare(doit);
else setTimeout(doit, 100)
ipc.send("snapshot", "i am ready");
console.log("I AM READY");
setTimeout(step, 2000);
};
ipc.send('snapshot', 'i am ready');
console.log('I AM READY');
setTimeout(step, 2000);
}
})()
})();

View file

@ -114,7 +114,7 @@ section#matrix > div > row > span {
padding: 0 0.5em
}
section#opentype
section.opentype
width: 36em
padding: 0 8em
> h2 { display: none }