478 lines
32 KiB
HTML
478 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<meta charset="utf-8">
|
||
<style>
|
||
@import url(iosevka.css);
|
||
@import url(iosevka-slab.css);
|
||
|
||
.thin { font-weight: 100 }
|
||
.extralight { font-weight: 200 }
|
||
.light { font-weight: 300 }
|
||
.medium { font-weight: 500 }
|
||
.bold { font-weight: 700 }
|
||
.extrabold { font-weight: 800 }
|
||
.heavy { font-weight: 900 }
|
||
.italic { font-style: italic }
|
||
.oblique { font-style: oblique }
|
||
.slab { font-family: "Iosevka Slab", monospace }
|
||
|
||
body {
|
||
font-family: "Iosevka";
|
||
background: #343435;
|
||
padding-bottom: 60em;
|
||
font-size: 15px;
|
||
}
|
||
pre, code { font-family: "Iosevka"; }
|
||
|
||
::-webkit-scrollbar {display: none;}
|
||
|
||
body > section {
|
||
margin: 3em auto;
|
||
max-width: 900px;
|
||
background: white;
|
||
}
|
||
|
||
/* hljs */
|
||
section.preview {
|
||
max-width: none;
|
||
text-align: center;
|
||
font-size: 80%;
|
||
}
|
||
section.preview pre {
|
||
display: inline-block;
|
||
text-align: left;
|
||
margin: 1.5em 0;
|
||
line-height: 1.5;
|
||
}
|
||
section.color-light {
|
||
background-color: hsl(39, 6%, 95%);
|
||
color: #333;
|
||
}
|
||
.color-light .keyword, .color-light .class, .color-light .tag, .color-light .pseudo, .color-light .attr_selector, .color-light .constant, .color-light .xml .title {
|
||
color: #446fbd;
|
||
}
|
||
.color-light .comment {
|
||
color: hsl(0, 0%, 62%);
|
||
}
|
||
.color-light .title, .color-light .attribute, .color-light .params, .color-light .built_in {
|
||
color: #8757ad;
|
||
}
|
||
.color-light .string, .color-light .pi, .color-light .language-less .keyword, .color-light .xml .value {
|
||
color: #e88501;
|
||
}
|
||
.color-light .number, .color-light .xml .attribute {
|
||
color: #6d8600;
|
||
}
|
||
.color-light .operator {
|
||
color: #c33500;
|
||
}
|
||
section.color-dark {
|
||
background-color: hsl(39, 6%, 12%);
|
||
color: #cfcfcf;
|
||
}
|
||
.color-dark .keyword, .color-dark .class, .color-dark .tag, .color-dark .pseudo, .color-dark .attr_selector, .color-dark .constant, .color-dark .xml .title {
|
||
color: #6c9ef8;
|
||
}
|
||
.color-dark .comment {
|
||
color: #767676;
|
||
}
|
||
.color-dark .title, .color-dark .attribute, .color-dark .params, .color-dark .built_in {
|
||
color: #b77fdb;
|
||
}
|
||
.color-dark .string, .color-dark .pi, .color-dark .language-less .keyword, .color-dark .xml .value {
|
||
color: #D89333;
|
||
}
|
||
.color-dark .number, .color-dark .xml .attribute {
|
||
color: #85a300;
|
||
}
|
||
.color-dark .operator {
|
||
color: #c34564;
|
||
}
|
||
|
||
section#matrix {
|
||
height: 480px;
|
||
position: relative;
|
||
}
|
||
section#matrix > div {
|
||
position: absolute;
|
||
font-size: 90px;
|
||
left: 50%;
|
||
margin-left: -3.75em;
|
||
top: 50%;
|
||
margin-top: -1.95em;
|
||
}
|
||
section#matrix > div.slab {
|
||
margin-left: -3.25em;
|
||
margin-top: -1.44em;
|
||
}
|
||
section#matrix > div > row {
|
||
display: block;
|
||
text-align: center;
|
||
line-height: 0.8em;
|
||
}
|
||
|
||
section#matrix > div > row > span {
|
||
font-size: 0.4em;
|
||
padding: 0 0.5em
|
||
}
|
||
|
||
section#opentype {
|
||
max-width: 36rem;
|
||
}
|
||
section#opentype > h2 {
|
||
display: none;
|
||
}
|
||
section#opentype > div.hr {
|
||
font-size: 80%;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.2em;
|
||
margin: 3rem auto;
|
||
text-align: center;
|
||
display: block;
|
||
}
|
||
section#opentype > div.hr:before, section#opentype > div.hr:after {
|
||
content: '';
|
||
display: inline-block;
|
||
border-bottom: 1px solid #ddd;
|
||
width: 4em;
|
||
margin: 0 1em;
|
||
vertical-align: 0.3em;
|
||
}
|
||
section#opentype > div {
|
||
display: flex;
|
||
margin-bottom: 1em;
|
||
align-items: center;
|
||
}
|
||
section#opentype > div > span {
|
||
display: block;
|
||
line-height: 1.5em;
|
||
height: 4.5em;
|
||
padding: 0.25em;
|
||
border: 1px solid transparent;
|
||
}
|
||
section#opentype span.normal-example {
|
||
padding: 0.25em;
|
||
text-align: right;
|
||
width: 5rem;
|
||
}
|
||
section#opentype span.arrow {
|
||
line-height: 4.5em;
|
||
margin: 0 0.5rem 0 0.25em;
|
||
}
|
||
section#opentype span.feature-example {
|
||
border-color: #ccc;
|
||
border-radius: 0.25rem;
|
||
margin-right: 0.5rem;
|
||
padding: 0.25em 0.5em;
|
||
width: 5em;
|
||
}
|
||
|
||
section#opentype span.lhs {
|
||
display: block;
|
||
font-size: 75%;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
|
||
section#opentype span.rhs.sub {
|
||
color: #989898;
|
||
}
|
||
section#opentype span.rhs.sub b {
|
||
font-weight: normal;
|
||
color: black;
|
||
}
|
||
|
||
#family {
|
||
background: white;
|
||
font-size: 0.9em
|
||
}
|
||
#picker:hover .menu{
|
||
display: block;
|
||
}
|
||
#family .group {
|
||
display: flex;
|
||
}
|
||
#family .group a {
|
||
display: block;
|
||
padding: 0.5rem;
|
||
flex: 1;
|
||
text-shadow: none;
|
||
color: black;
|
||
text-decoration: none;
|
||
}
|
||
#family .group a.italic, #family .group a.oblique {
|
||
flex: 1.3
|
||
}
|
||
#family .group a.slab {
|
||
flex: 1.2
|
||
}
|
||
#family .group a.slab.italic, #family .group a.slab.oblique {
|
||
flex: 1.7
|
||
}
|
||
|
||
</style>
|
||
<body>
|
||
<section id="family" class="menu">
|
||
<div class="group">
|
||
<a href="#" class="pp thin ">Thin</a><a href="#" class="pp slab thin ">Slab Thin</a><a href="#" class="pp thin italic ">Thin Italic</a><a href="#" class="pp slab thin italic ">Slab Thin Italic</a><a href="#" class="pp thin oblique ">Thin Oblique</a><a href="#" class="pp slab thin oblique ">Slab Thin Oblique</a>
|
||
</div><div class="group">
|
||
<a href="#" class="pp extralight ">Extralight</a><a href="#" class="pp slab extralight ">Slab Extralight</a><a href="#" class="pp extralight italic ">Extralight Italic</a><a href="#" class="pp slab extralight italic ">Slab Extralight Italic</a><a href="#" class="pp extralight oblique ">Extralight Oblique</a><a href="#" class="pp slab extralight oblique ">Slab Extralight Oblique</a>
|
||
</div><div class="group">
|
||
<a href="#" class="pp light ">Light</a><a href="#" class="pp slab light ">Slab Light</a><a href="#" class="pp light italic ">Light Italic</a><a href="#" class="pp slab light italic ">Slab Light Italic</a><a href="#" class="pp light oblique ">Light Oblique</a><a href="#" class="pp slab light oblique ">Slab Light Oblique</a>
|
||
</div><div class="group">
|
||
<a href="#" class="pp active">Regular</a><a href="#" class="pp slab ">Slab</a><a href="#" class="pp italic ">Italic</a><a href="#" class="pp slab italic ">Slab Italic</a><a href="#" class="pp oblique ">Oblique</a><a href="#" class="pp slab oblique ">Slab Oblique</a>
|
||
</div><div class="group">
|
||
<a href="#" class="pp medium ">Medium</a><a href="#" class="pp slab medium ">Slab Medium</a><a href="#" class="pp medium italic ">Medium Italic</a><a href="#" class="pp slab medium italic ">Slab Medium Italic</a><a href="#" class="pp medium oblique ">Medium Oblique</a><a href="#" class="pp slab medium oblique ">Slab Medium Oblique</a>
|
||
</div><div class="group">
|
||
<a href="#" class="pp bold ">Bold</a><a href="#" class="pp slab bold ">Slab Bold</a><a href="#" class="pp bold italic ">Bold Italic</a><a href="#" class="pp slab bold italic ">Slab Bold Italic</a><a href="#" class="pp bold oblique ">Bold Oblique</a><a href="#" class="pp slab bold oblique ">Slab Bold Oblique</a>
|
||
</div><div class="group">
|
||
<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>
|
||
<div class="hr">Stylistic sets</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">vo<b>l</b>at<b>i</b><b>l</b>e<br><i>vo<b>l</b>at<b>i</b><b>l</b>e</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">ss01</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss01'; font-feature-settings:'ss01'">vo<b>l</b>at<b>i</b><b>l</b>e<br><i>vo<b>l</b>at<b>i</b><b>l</b>e</i></span></span><span class="feature-example"><span class="lhs">ss02</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss02'; font-feature-settings:'ss02'">vo<b>l</b>at<b>i</b><b>l</b>e<br><i>vo<b>l</b>at<b>i</b><b>l</b>e</i></span></span><span class="feature-example"><span class="lhs">ss03</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss03'; font-feature-settings:'ss03'">vo<b>l</b>at<b>i</b><b>l</b>e<br><i>vo<b>l</b>at<b>i</b><b>l</b>e</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">percenta<b>g</b>e<br><i>percenta<b>g</b>e</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">ss04</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss04'; font-feature-settings:'ss04'">percenta<b>g</b>e<br><i>percenta<b>g</b>e</i></span></span><span class="feature-example"><span class="lhs">ss05</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss05'; font-feature-settings:'ss05'">percenta<b>g</b>e<br><i>percenta<b>g</b>e</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">msk & <b>0</b>xFF<br><i>msk & <b>0</b>xFF</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">ss06</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss06'; font-feature-settings:'ss06'">msk & <b>0</b>xFF<br><i>msk & <b>0</b>xFF</i></span></span><span class="feature-example"><span class="lhs">ss07</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss07'; font-feature-settings:'ss07'">msk & <b>0</b>xFF<br><i>msk & <b>0</b>xFF</i></span></span><span class="feature-example"><span class="lhs">ss08</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss08'; font-feature-settings:'ss08'">msk & <b>0</b>xFF<br><i>msk & <b>0</b>xFF</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>*</b>p=<b>~</b>mask<b>_</b>0<br><i><b>*</b>p=<b>~</b>mask<b>_</b>0</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">ss09</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss09'; font-feature-settings:'ss09'"><b>*</b>p=<b>~</b>mask<b>_</b>0<br><i><b>*</b>p=<b>~</b>mask<b>_</b>0</i></span></span><span class="feature-example"><span class="lhs">ss10</span><span class="rhs sub" style="-webkit-font-feature-settings:'ss10'; font-feature-settings:'ss10'"><b>*</b>p=<b>~</b>mask<b>_</b>0<br><i><b>*</b>p=<b>~</b>mask<b>_</b>0</i></span></span>
|
||
</div>
|
||
<div class="hr">Character Variants</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">v<b>a</b>ri<b>a</b>ble<br><i>v<b>a</b>ri<b>a</b>ble</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">cv01</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv01'; font-feature-settings:'cv01'">v<b>a</b>ri<b>a</b>ble<br><i>v<b>a</b>ri<b>a</b>ble</i></span></span><span class="feature-example"><span class="lhs">cv02</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv02'; font-feature-settings:'cv02'">v<b>a</b>ri<b>a</b>ble<br><i>v<b>a</b>ri<b>a</b>ble</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">cv03</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv03'; font-feature-settings:'cv03'"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span><span class="feature-example"><span class="lhs">cv04</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv04'; font-feature-settings:'cv04'"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span><span class="feature-example"><span class="lhs">cv05</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv05'; font-feature-settings:'cv05'"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span><span class="feature-example"><span class="lhs">cv06</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv06'; font-feature-settings:'cv06'"><b>i</b>nteger<br><i><b>i</b>nteger</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>l</b>ong<br><i><b>l</b>ong</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">cv07</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv07'; font-feature-settings:'cv07'"><b>l</b>ong<br><i><b>l</b>ong</i></span></span><span class="feature-example"><span class="lhs">cv08</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv08'; font-feature-settings:'cv08'"><b>l</b>ong<br><i><b>l</b>ong</i></span></span><span class="feature-example"><span class="lhs">cv09</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv09'; font-feature-settings:'cv09'"><b>l</b>ong<br><i><b>l</b>ong</i></span></span><span class="feature-example"><span class="lhs">cv10</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv10'; font-feature-settings:'cv10'"><b>l</b>ong<br><i><b>l</b>ong</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>g</b>it<br><i><b>g</b>it</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">cv11</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv11'; font-feature-settings:'cv11'"><b>g</b>it<br><i><b>g</b>it</i></span></span><span class="feature-example"><span class="lhs">cv12</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv12'; font-feature-settings:'cv12'"><b>g</b>it<br><i><b>g</b>it</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>0</b>x1337F<b>0</b><b>0</b>1<br><i><b>0</b>x1337F<b>0</b><b>0</b>1</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">cv13</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv13'; font-feature-settings:'cv13'"><b>0</b>x1337F<b>0</b><b>0</b>1<br><i><b>0</b>x1337F<b>0</b><b>0</b>1</i></span></span><span class="feature-example"><span class="lhs">cv14</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv14'; font-feature-settings:'cv14'"><b>0</b>x1337F<b>0</b><b>0</b>1<br><i><b>0</b>x1337F<b>0</b><b>0</b>1</i></span></span><span class="feature-example"><span class="lhs">cv15</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv15'; font-feature-settings:'cv15'"><b>0</b>x1337F<b>0</b><b>0</b>1<br><i><b>0</b>x1337F<b>0</b><b>0</b>1</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>~</b>bitsRead<br><i><b>~</b>bitsRead</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">cv16</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv16'; font-feature-settings:'cv16'"><b>~</b>bitsRead<br><i><b>~</b>bitsRead</i></span></span><span class="feature-example"><span class="lhs">cv17</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv17'; font-feature-settings:'cv17'"><b>~</b>bitsRead<br><i><b>~</b>bitsRead</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub"><b>*</b>handler<br><i><b>*</b>handler</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">cv18</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv18'; font-feature-settings:'cv18'"><b>*</b>handler<br><i><b>*</b>handler</i></span></span><span class="feature-example"><span class="lhs">cv19</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv19'; font-feature-settings:'cv19'"><b>*</b>handler<br><i><b>*</b>handler</i></span></span>
|
||
</div>
|
||
<div>
|
||
<span class="normal-example"><span class="lhs">default</span><span class="rhs sub">shared<b>_</b>ptr<br><i>shared<b>_</b>ptr</i></span></span>
|
||
<span class="arrow icon-arrow-right-circle"></span>
|
||
<span class="feature-example"><span class="lhs">cv20</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv20'; font-feature-settings:'cv20'">shared<b>_</b>ptr<br><i>shared<b>_</b>ptr</i></span></span><span class="feature-example"><span class="lhs">cv21</span><span class="rhs sub" style="-webkit-font-feature-settings:'cv21'; font-feature-settings:'cv21'">shared<b>_</b>ptr<br><i>shared<b>_</b>ptr</i></span></span>
|
||
</div>
|
||
</section>
|
||
<section id="matrix">
|
||
<div>
|
||
<row><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
|
||
<row class="italic"><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
|
||
<row class="oblique"><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
|
||
</div>
|
||
<div class="slab">
|
||
<row><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
|
||
<row class="italic"><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
|
||
<row class="oblique"><span class="thin">Rag</span><span class="extralight">Rag</span><span class="light">Rag</span><span class="regular">Rag</span><span class="medium">Rag</span><span class="bold">Rag</span><span class="heavy">Rag</span></row>
|
||
</div>
|
||
</section>
|
||
<section id="previews">
|
||
<section class="preview color-dark"><pre><code class="cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka"</span>, DARK) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
|
||
<span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(<#part><span class="built_in">\\d</span><span class="operator">+</span>)(<#capture>(<section>(<&part>)))((<&capture>)<span class="built_in">.</span>)<span class="operator">{3}</span>(<&capture>)"</span>;
|
||
<span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
|
||
ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()<>$*-+=/#_%^@\&|~?'"`!,.;:</span>
|
||
}</code></pre></section>
|
||
<section class="preview color-light"><pre><code class="cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka"</span>, LIGHT) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
|
||
<span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(<#part><span class="built_in">\\d</span><span class="operator">+</span>)(<#capture>(<section>(<&part>)))((<&capture>)<span class="built_in">.</span>)<span class="operator">{3}</span>(<&capture>)"</span>;
|
||
<span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
|
||
ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()<>$*-+=/#_%^@\&|~?'"`!,.;:</span>
|
||
}</code></pre></section>
|
||
<section class="preview color-dark slab"><pre><code class="slab cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka Slab"</span>, DARK) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
|
||
<span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(<#part><span class="built_in">\\d</span><span class="operator">+</span>)(<#capture>(<section>(<&part>)))((<&capture>)<span class="built_in">.</span>)<span class="operator">{3}</span>(<&capture>)"</span>;
|
||
<span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
|
||
ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()<>$*-+=/#_%^@\&|~?'"`!,.;:</span>
|
||
}</code></pre></section>
|
||
<section class="preview color-light slab"><pre><code class="slab cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka Slab"</span>, LIGHT) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
|
||
<span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(<#part><span class="built_in">\\d</span><span class="operator">+</span>)(<#capture>(<section>(<&part>)))((<&capture>)<span class="built_in">.</span>)<span class="operator">{3}</span>(<&capture>)"</span>;
|
||
<span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
|
||
ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()<>$*-+=/#_%^@\&|~?'"`!,.;:</span>
|
||
}</code></pre></section>
|
||
</section>
|
||
|
||
<section id="languages"><section class="preview color-dark" style="-webkit-font-feature-settings:'locl'"><pre><code class="javascript hljs"><span class=keyword>var</span> languages <span class="operator">=</span> [
|
||
{lang: <span class=string>'English'</span>, sample: <span class=string>'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'</span>},
|
||
{lang: <span class=string>'IPA'</span>, sample: <span class=string>'[ɢʷɯʔ.nas.doːŋ.kʰlja] [ŋan.ȵʑi̯wo.ɕi̯uĕn.ɣwa]'</span>},
|
||
{lang: <span class=string>'Bulgarian'</span>, sample: <span class=string>'Я, пазачът Вальо уж бди, а скришом хапва кюфтенца зад щайгите.'</span>},
|
||
{lang: <span class=string>'Czech'</span>, sample: <span class=string>'Nechť již hříšné saxofony ďáblů rozezvučí síň úděsnými tóny waltzu, tanga a quickstepu.'</span>},
|
||
{lang: <span class=string>'Finnish'</span>, sample: <span class=string>'Charles Darwin jammaili Åken hevixylofonilla Qatarin yöpub Zeligissä.'</span>},
|
||
{lang: <span class=string>'French'</span>, sample: <span class=string>'Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwi.'</span>},
|
||
{lang: <span class=string>'German'</span>, sample: <span class=string>'Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.'</span>},
|
||
{lang: <span class=string>'Greek'</span>, sample: <span class=string>'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός.'</span>},
|
||
{lang: <span class=string>'Ancient Greek'</span>, sample: <span class=string>'Ἄδμηθ’, ὁρᾷς γὰρ τἀμὰ πράγμαθ’ ὡς ἔχει, λέξαι θέλω σοι πρὶν θανεῖν ἃ βούλομαι. '</span>},
|
||
{lang: <span class=string>'Hungarian'</span>, sample: <span class=string>'Jó foxim és don Quijote húszwattos lámpánál ülve egy pár bűvös cipőt készít.'</span>},
|
||
{lang: <span class=string>'Icelandic'</span>, sample: <span class=string>'Kæmi ný öxi hér, ykist þjófum nú bæði víl og ádrepa.'</span>},
|
||
{lang: <span class=string>'Irish'</span>, sample: <span class=string>'Ċuaiġ bé ṁórṡáċ le dlúṫspád fíorḟinn trí hata mo ḋea-ṗorcáin ḃig.'</span>},
|
||
{lang: <span class=string>'Latvian'</span>, sample: <span class=string>'Muļķa hipiji mēģina brīvi nogaršot celofāna žņaudzējčūsku.'</span>},
|
||
{lang: <span class=string>'Lithuanian'</span>, sample: <span class=string>'Įlinkdama fechtuotojo špaga sublykčiojusi pragręžė apvalų arbūzą.'</span>},
|
||
{lang: <span class=string>'Macedonian'</span>, sample: <span class=string>'Ѕидарски пејзаж: шугав билмез со чудење џвака ќофте и кељ на туѓ цех.'</span>},
|
||
{lang: <span class=string>'Norwegian'</span>, sample: <span class=string>'Jeg begynte å fortære en sandwich mens jeg kjørte taxi på vei til quiz'</span>},
|
||
{lang: <span class=string>'Polish'</span>, sample: <span class=string>'Pchnąć w tę łódź jeża lub ośm skrzyń fig.'</span>},
|
||
{lang: <span class=string>'Portuguese'</span>, sample: <span class=string>'Luís argüia à Júlia que «brações, fé, chá, óxido, pôr, zângão» eram palavras do português.'</span>},
|
||
{lang: <span class=string>'Romanian'</span>, sample: <span class=string>'Înjurând pițigăiat, zoofobul comandă vexat whisky și tequila.'</span>},
|
||
{lang: <span class=string>'Russian'</span>, sample: <span class=string>'Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.'</span>},
|
||
{lang: <span class=string>'Serbian'</span>, sample: <span class=string lang=sr>'Ајшо, лепото и чежњо, за љубав срца мога дођи у Хаџиће на кафу.'</span>},
|
||
{lang: <span class=string>'Spanish'</span>, sample: <span class=string>'Benjamín pidió una bebida de kiwi y fresa; Noé, sin vergüenza, la más exquisita champaña del menú.'</span>},
|
||
{lang: <span class=string>'Turkish'</span>, sample: <span class=string>'Pijamalı hasta yağız şoföre çabucak güvendi.'</span>},
|
||
{lang: <span class=string>'Ukrainian'</span>, sample: <span class=string>'Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів!'</span>}
|
||
]
|
||
</code></pre></section></section>
|
||
|
||
<section id="variants"><section class="preview color-light" style="background:white;font-size:1em"><pre>
|
||
<i>default</i> <span><span class="keyword">set</span> font.name.uniqueSubFamily <span class="string">"\(para.family) \(para.style) \(para.version) (\(para.codename))"</span></span>
|
||
<i>hooky </i> <span style="-webkit-font-feature-settings:'ss01'"><span class="keyword">set</span> font.name.uniqueSubFamily <span class="string">"\(para.family) \(para.style) \(para.version) (\(para.codename))"</span></span>
|
||
<i>zshaped</i> <span style="-webkit-font-feature-settings:'ss02'"><span class="keyword">set</span> font.name.uniqueSubFamily <span class="string">"\(para.family) \(para.style) \(para.version) (\(para.codename))"</span></span>
|
||
</pre></section></section>
|
||
|
||
<section id="weights"><section class="preview color-light" style="background:white;font-size:1.75em"><pre>
|
||
<span class="thin"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
|
||
<span class="extralight"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
|
||
<span class="light"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
|
||
<span class="regular"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
|
||
<span class="medium"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
|
||
<span class="bold"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
|
||
<span class="heavy"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(doges.lazy); }</span>
|
||
</pre></section></section>
|
||
|
||
<script>
|
||
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') }, 100);
|
||
});
|
||
var onComplete = function(){};
|
||
ipc.on('complete', function(){ onComplete.apply(this, arguments) });
|
||
|
||
function captureElement(options, callback){
|
||
window.scroll(0, 0);
|
||
var rect = options.el.getBoundingClientRect();
|
||
ipc.send('snapshot', {
|
||
name: options.name,
|
||
windowWidth: windowWidth,
|
||
windowHeight: windowHeight,
|
||
background: options.background || 'white',
|
||
padding: options.padding || 1,
|
||
dpi: dpi,
|
||
x: rect.left | 0,
|
||
y: rect.top | 0,
|
||
width: rect.width | 0,
|
||
height: rect.height | 0
|
||
});
|
||
onScroll = function(event, arg){
|
||
window.scrollTo(0, arg)
|
||
};
|
||
onComplete = function(){
|
||
if(callback) callback();
|
||
onComplete = function(){};
|
||
}
|
||
}
|
||
|
||
var snapshotTasks = [
|
||
{
|
||
el: document.querySelector('#languages'),
|
||
name: 'languages',
|
||
background: 'white',
|
||
padding: 0
|
||
},
|
||
{
|
||
el: document.querySelector('#variants'),
|
||
name: 'variants',
|
||
background: 'white',
|
||
padding: 0
|
||
},
|
||
{
|
||
el: document.querySelector('#opentype'),
|
||
name: 'opentype',
|
||
background: 'white',
|
||
padding: 0
|
||
},
|
||
{
|
||
el: document.querySelector('#matrix'),
|
||
name: 'matrix',
|
||
background: 'white',
|
||
padding: 0
|
||
},
|
||
{
|
||
el: document.querySelector('#family'),
|
||
name: 'family',
|
||
background: 'white',
|
||
padding: 0
|
||
},
|
||
{
|
||
el: document.querySelector('#previews'),
|
||
name: 'preview-all',
|
||
background: 'white',
|
||
padding: 0
|
||
},
|
||
{
|
||
el: document.querySelector('#weights'),
|
||
name: 'weights',
|
||
background: 'white',
|
||
padding: 0
|
||
}
|
||
]
|
||
|
||
window.onload = function(){
|
||
ipc.send('snapshot', 'i am ready');
|
||
console.log('I AM READY');
|
||
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, 1)
|
||
};
|
||
setTimeout(step, 2000);
|
||
}
|
||
})()
|
||
</script>
|
||
</body> |