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> <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> </div>
</section> </section>
<section id="opentype"> <section id="stylesets" class="opentype">
<h2>Opentype features</h2>
<div class="hr">Stylistic Sets</div> <div class="hr">Stylistic Sets</div>
<ol class="wide"> <ol class="wide">
<li> <li>
<span class="tag">off</span><span class="description">Default</span> <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> <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> </li><li>
<span class="tag">ss01</span><span class="description">Andale Mono Style</span> <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> <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> </li><li>
<span class="tag">ss02</span><span class="description">Anonymous Pro Style</span> <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> <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> </li><li>
<span class="tag">ss03</span><span class="description">Consolas Style</span> <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> <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> </li><li>
<span class="tag">ss04</span><span class="description">Menlo Style</span> <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> <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> </li><li>
<span class="tag">ss05</span><span class="description">Fira Mono Style</span> <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> <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> </li><li>
<span class="tag">ss06</span><span class="description">Liberation Mono Style</span> <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> <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> </li><li>
<span class="tag">ss07</span><span class="description">Monaco Style</span> <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> <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> </li><li>
<span class="tag">ss08</span><span class="description">Pragmata Pro Style</span> <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> <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> </li><li>
<span class="tag">ss09</span><span class="description">Source Code Pro Style</span> <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> <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> </li><li>
<span class="tag">ss10</span><span class="description">Envy Code R Style</span> <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> <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><li>
<li> <span class="tag">ss11</span><span class="description">X Windows Fixed Style</span>
<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>
<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>
</li> </ol>
</ol><div class="hr">Character Variants</div> </section>
<ol class="narrow"> <section id="charvars" class="opentype">
<li> <div class="hr">Character Variants</div>
<span class="tag">cv01</span><span class="description"></span> <ol class="narrow">
<span class="sample" style="font-feature-settings:'cv01'">a</span><span class="sample italic" style="font-feature-settings:'cv01'">a</span> <li>
</li><li> <span class="tag">cv01</span><span class="description"></span>
<span class="tag">cv02</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>
<span class="sample" style="font-feature-settings:'cv02'">a</span><span class="sample italic" style="font-feature-settings:'cv02'">a</span> </li><li>
</li><li> <span class="tag">cv02</span><span class="description"></span>
<span class="tag">cv03</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>
<span class="sample" style="font-feature-settings:'cv03'">i</span><span class="sample italic" style="font-feature-settings:'cv03'">i</span> </li><li>
</li><li> <span class="tag">cv03</span><span class="description"></span>
<span class="tag">cv04</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>
<span class="sample" style="font-feature-settings:'cv04'">i</span><span class="sample italic" style="font-feature-settings:'cv04'">i</span> </li><li>
</li><li> <span class="tag">cv04</span><span class="description"></span>
<span class="tag">cv05</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>
<span class="sample" style="font-feature-settings:'cv05'">i</span><span class="sample italic" style="font-feature-settings:'cv05'">i</span> </li><li>
</li><li> <span class="tag">cv05</span><span class="description"></span>
<span class="tag">cv06</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>
<span class="sample" style="font-feature-settings:'cv06'">i</span><span class="sample italic" style="font-feature-settings:'cv06'">i</span> </li><li>
</li><li> <span class="tag">cv06</span><span class="description"></span>
<span class="tag">cv07</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>
<span class="sample" style="font-feature-settings:'cv07'">l</span><span class="sample italic" style="font-feature-settings:'cv07'">l</span> </li><li>
</li><li> <span class="tag">cv07</span><span class="description"></span>
<span class="tag">cv08</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>
<span class="sample" style="font-feature-settings:'cv08'">l</span><span class="sample italic" style="font-feature-settings:'cv08'">l</span> </li><li>
</li><li> <span class="tag">cv08</span><span class="description"></span>
<span class="tag">cv09</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>
<span class="sample" style="font-feature-settings:'cv09'">l</span><span class="sample italic" style="font-feature-settings:'cv09'">l</span> </li><li>
</li><li> <span class="tag">cv09</span><span class="description"></span>
<span class="tag">cv10</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>
<span class="sample" style="font-feature-settings:'cv10'">l</span><span class="sample italic" style="font-feature-settings:'cv10'">l</span> </li><li>
</li><li> <span class="tag">cv10</span><span class="description"></span>
<span class="tag">cv11</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>
<span class="sample" style="font-feature-settings:'cv11'">g</span><span class="sample italic" style="font-feature-settings:'cv11'">g</span> </li><li>
</li><li> <span class="tag">cv11</span><span class="description"></span>
<span class="tag">cv12</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>
<span class="sample" style="font-feature-settings:'cv12'">g</span><span class="sample italic" style="font-feature-settings:'cv12'">g</span> </li><li>
</li><li> <span class="tag">cv12</span><span class="description"></span>
<span class="tag">cv13</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>
<span class="sample" style="font-feature-settings:'cv13'">0</span><span class="sample italic" style="font-feature-settings:'cv13'">0</span> </li><li>
</li><li> <span class="tag">cv13</span><span class="description"></span>
<span class="tag">cv14</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>
<span class="sample" style="font-feature-settings:'cv14'">0</span><span class="sample italic" style="font-feature-settings:'cv14'">0</span> </li><li>
</li><li> <span class="tag">cv14</span><span class="description"></span>
<span class="tag">cv15</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>
<span class="sample" style="font-feature-settings:'cv15'">0</span><span class="sample italic" style="font-feature-settings:'cv15'">0</span> </li><li>
</li><li> <span class="tag">cv15</span><span class="description"></span>
<span class="tag">cv16</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>
<span class="sample" style="font-feature-settings:'cv16'">~</span><span class="sample italic" style="font-feature-settings:'cv16'">~</span> </li><li>
</li><li> <span class="tag">cv16</span><span class="description"></span>
<span class="tag">cv17</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv16'">~</span><span class="sample italic" style="font-feature-settings:'cv16'">~</span>
<span class="sample" style="font-feature-settings:'cv17'">~</span><span class="sample italic" style="font-feature-settings:'cv17'">~</span> </li><li>
</li><li> <span class="tag">cv17</span><span class="description"></span>
<span class="tag">cv18</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv17'">~</span><span class="sample italic" style="font-feature-settings:'cv17'">~</span>
<span class="sample" style="font-feature-settings:'cv18'">*</span><span class="sample italic" style="font-feature-settings:'cv18'">*</span> </li><li>
</li><li> <span class="tag">cv18</span><span class="description"></span>
<span class="tag">cv19</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv18'">*</span><span class="sample italic" style="font-feature-settings:'cv18'">*</span>
<span class="sample" style="font-feature-settings:'cv19'">*</span><span class="sample italic" style="font-feature-settings:'cv19'">*</span> </li><li>
</li><li> <span class="tag">cv19</span><span class="description"></span>
<span class="tag">cv20</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv19'">*</span><span class="sample italic" style="font-feature-settings:'cv19'">*</span>
<span class="sample" style="font-feature-settings:'cv20'">_</span><span class="sample italic" style="font-feature-settings:'cv20'">_</span> </li><li>
</li><li> <span class="tag">cv20</span><span class="description"></span>
<span class="tag">cv21</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv20'">_</span><span class="sample italic" style="font-feature-settings:'cv20'">_</span>
<span class="sample" style="font-feature-settings:'cv21'">_</span><span class="sample italic" style="font-feature-settings:'cv21'">_</span> </li><li>
</li><li> <span class="tag">cv21</span><span class="description"></span>
<span class="tag">cv22</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv21'">_</span><span class="sample italic" style="font-feature-settings:'cv21'">_</span>
<span class="sample" style="font-feature-settings:'cv22'"></span><span class="sample italic" style="font-feature-settings:'cv22'"></span> </li><li>
</li><li> <span class="tag">cv22</span><span class="description"></span>
<span class="tag">cv23</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv22'"></span><span class="sample italic" style="font-feature-settings:'cv22'"></span>
<span class="sample" style="font-feature-settings:'cv23'"></span><span class="sample italic" style="font-feature-settings:'cv23'"></span> </li><li>
</li><li> <span class="tag">cv23</span><span class="description"></span>
<span class="tag">cv24</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv23'"></span><span class="sample italic" style="font-feature-settings:'cv23'"></span>
<span class="sample" style="font-feature-settings:'cv24'">g</span><span class="sample italic" style="font-feature-settings:'cv24'">g</span> </li><li>
</li><li> <span class="tag">cv24</span><span class="description"></span>
<span class="tag">cv25</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>
<span class="sample" style="font-feature-settings:'cv25'">m</span><span class="sample italic" style="font-feature-settings:'cv25'">m</span> </li><li>
</li><li> <span class="tag">cv25</span><span class="description"></span>
<span class="tag">cv26</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>
<span class="sample" style="font-feature-settings:'cv26'">m</span><span class="sample italic" style="font-feature-settings:'cv26'">m</span> </li><li>
</li><li> <span class="tag">cv26</span><span class="description"></span>
<span class="tag">cv27</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>
<span class="sample" style="font-feature-settings:'cv27'">l</span><span class="sample italic" style="font-feature-settings:'cv27'">l</span> </li><li>
</li><li> <span class="tag">cv27</span><span class="description"></span>
<span class="tag">cv28</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>
<span class="sample" style="font-feature-settings:'cv28'">l</span><span class="sample italic" style="font-feature-settings:'cv28'">l</span> </li><li>
</li><li> <span class="tag">cv28</span><span class="description"></span>
<span class="tag">cv29</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>
<span class="sample" style="font-feature-settings:'cv29'">^</span><span class="sample italic" style="font-feature-settings:'cv29'">^</span> </li><li>
</li><li> <span class="tag">cv29</span><span class="description"></span>
<span class="tag">cv30</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv29'">^</span><span class="sample italic" style="font-feature-settings:'cv29'">^</span>
<span class="sample" style="font-feature-settings:'cv30'">^</span><span class="sample italic" style="font-feature-settings:'cv30'">^</span> </li><li>
</li><li> <span class="tag">cv30</span><span class="description"></span>
<span class="tag">cv31</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv30'">^</span><span class="sample italic" style="font-feature-settings:'cv30'">^</span>
<span class="sample" style="font-feature-settings:'cv31'">@</span><span class="sample italic" style="font-feature-settings:'cv31'">@</span> </li><li>
</li><li> <span class="tag">cv31</span><span class="description"></span>
<span class="tag">cv32</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv31'">@</span><span class="sample italic" style="font-feature-settings:'cv31'">@</span>
<span class="sample" style="font-feature-settings:'cv32'">@</span><span class="sample italic" style="font-feature-settings:'cv32'">@</span> </li><li>
</li><li> <span class="tag">cv32</span><span class="description"></span>
<span class="tag">cv33</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv32'">@</span><span class="sample italic" style="font-feature-settings:'cv32'">@</span>
<span class="sample" style="font-feature-settings:'cv33'">@</span><span class="sample italic" style="font-feature-settings:'cv33'">@</span> </li><li>
</li><li> <span class="tag">cv33</span><span class="description"></span>
<span class="tag">cv34</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv33'">@</span><span class="sample italic" style="font-feature-settings:'cv33'">@</span>
<span class="sample" style="font-feature-settings:'cv34'">ß</span><span class="sample italic" style="font-feature-settings:'cv34'">ß</span> </li><li>
</li><li> <span class="tag">cv34</span><span class="description"></span>
<span class="tag">cv35</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv34'">ß</span><span class="sample italic" style="font-feature-settings:'cv34'">ß</span>
<span class="sample" style="font-feature-settings:'cv35'">ß</span><span class="sample italic" style="font-feature-settings:'cv35'">ß</span> </li><li>
</li><li> <span class="tag">cv35</span><span class="description"></span>
<span class="tag">cv36</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv35'">ß</span><span class="sample italic" style="font-feature-settings:'cv35'">ß</span>
<span class="sample" style="font-feature-settings:'cv36'">{</span><span class="sample italic" style="font-feature-settings:'cv36'">{</span> </li><li>
</li><li> <span class="tag">cv36</span><span class="description"></span>
<span class="tag">cv37</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv36'">{</span><span class="sample italic" style="font-feature-settings:'cv36'">{</span>
<span class="sample" style="font-feature-settings:'cv37'">{</span><span class="sample italic" style="font-feature-settings:'cv37'">{</span> </li><li>
</li><li> <span class="tag">cv37</span><span class="description"></span>
<span class="tag">cv38</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv37'">{</span><span class="sample italic" style="font-feature-settings:'cv37'">{</span>
<span class="sample" style="font-feature-settings:'cv38'">$</span><span class="sample italic" style="font-feature-settings:'cv38'">$</span> </li><li>
</li><li> <span class="tag">cv38</span><span class="description"></span>
<span class="tag">cv39</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv38'">$</span><span class="sample italic" style="font-feature-settings:'cv38'">$</span>
<span class="sample" style="font-feature-settings:'cv39'">$</span><span class="sample italic" style="font-feature-settings:'cv39'">$</span> </li><li>
</li><li> <span class="tag">cv39</span><span class="description"></span>
<span class="tag">cv40</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv39'">$</span><span class="sample italic" style="font-feature-settings:'cv39'">$</span>
<span class="sample" style="font-feature-settings:'cv40'">t</span><span class="sample italic" style="font-feature-settings:'cv40'">t</span> </li><li>
</li><li> <span class="tag">cv40</span><span class="description"></span>
<span class="tag">cv41</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>
<span class="sample" style="font-feature-settings:'cv41'">t</span><span class="sample italic" style="font-feature-settings:'cv41'">t</span> </li><li>
</li><li> <span class="tag">cv41</span><span class="description"></span>
<span class="tag">cv42</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>
<span class="sample" style="font-feature-settings:'cv42'">Q</span><span class="sample italic" style="font-feature-settings:'cv42'">Q</span> </li><li>
</li><li> <span class="tag">cv42</span><span class="description"></span>
<span class="tag">cv43</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>
<span class="sample" style="font-feature-settings:'cv43'">Q</span><span class="sample italic" style="font-feature-settings:'cv43'">Q</span> </li><li>
</li><li> <span class="tag">cv43</span><span class="description"></span>
<span class="tag">cv44</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>
<span class="sample" style="font-feature-settings:'cv44'">#</span><span class="sample italic" style="font-feature-settings:'cv44'">#</span> </li><li>
</li><li> <span class="tag">cv44</span><span class="description"></span>
<span class="tag">cv45</span><span class="description"></span> <span class="sample" style="font-feature-settings:'cv44'">#</span><span class="sample italic" style="font-feature-settings:'cv44'">#</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">cv45</span><span class="description"></span>
</li><li> <span class="sample" style="font-feature-settings:'cv45'">#</span><span class="sample italic" style="font-feature-settings:'cv45'">#</span>
<span class="tag">cv46</span><span class="description"></span> </li>
<span class="sample" style="font-feature-settings:'cv46'">3</span><span class="sample italic" style="font-feature-settings:'cv46'">3</span> </li><li>
</li><li> <span class="tag">cv46</span><span class="description"></span>
<span class="tag">cv47</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>
<span class="sample" style="font-feature-settings:'cv47'">3</span><span class="sample italic" style="font-feature-settings:'cv47'">3</span> </li><li>
</li> <span class="tag">cv47</span><span class="description"></span>
</ol> <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>
<section id="matrix"> <section id="matrix">
<div> <div>

View file

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