Mirror
/
programmingfonts
mirror of https://github.com/braver/programmingfonts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

switch style filters to cycle buttons

This commit is contained in:
Koen Lageveen 2020-10-07 22:25:17 +02:00 committed by Koen Lageveen
parent fd2f1a9a2b
commit d7d85f47be
4 changed files with 405 additions and 473 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
fonts.json
View File

@ -7,7 +7,7 @@
"name": "Agave",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular"
],
@ -20,7 +20,7 @@
"name": "Anka/Coder",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"condensed",
@ -37,7 +37,7 @@
"name": "Anonymous Pro",
"rendering": "vector",
"style": "serif",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"italic",
@ -128,7 +128,7 @@
"name": "Bitstream Vera Sans Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://www.fontsquirrel.com/fonts/Bitstream-Vera-Sans-Mono",
"year": 2002
},
@ -138,7 +138,7 @@
"name": "Borg Sans Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/marnen/borg-sans-mono",
"year": 2016
},
@ -148,7 +148,7 @@
"name": "BPmono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.fontsquirrel.com/fonts/BPmono",
"year": 2007
},
@ -158,7 +158,7 @@
"name": "Bront DejaVu Sans Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/chrismwendt/bront",
"year": 2015
},
@ -168,7 +168,7 @@
"name": "Bront Ubuntu Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/chrismwendt/bront",
"year": 2015
},
@ -178,7 +178,7 @@
"name": "CamingoCode",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.janfromm.de/typefaces/camingomono/camingocode",
"year": 2013
},
@ -190,7 +190,7 @@
"name": "Cartograph",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular",
"italic",
@ -218,7 +218,7 @@
"name": "Cascadia Code",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/microsoft/cascadia-code",
"year": 2019
},
@ -228,7 +228,7 @@
"name": "Code New Roman",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://sourceforge.net/projects/codenewroman/",
"year": 2014
},
@ -240,7 +240,7 @@
"name": "Comic Shanns",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular"
],
@ -253,7 +253,7 @@
"name": "Consolamono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://openfontlibrary.org/en/font/consolamono",
"year": 2011
},
@ -270,13 +270,13 @@
},
"courier-prime-code": {
"author": "Alan Dague-Greene",
"description": "Courier Prime by Quote-Unquote Apps is designed to make screenplays (which are traditionally set in Courier at 12 points) more readable. Originally a typewriter font has been transferred to digital several times but all of them have problems. This adaptation is a bit fatter to look as good on displays as on paper. For programming use the Courier Prime Code variant, based on the new sans. Several characters are now more easily distinguished and there is a slashed zero.",
"description": "Courier Prime by Quote-Unquote Apps is designed to make screenplays (which are traditionally set in Courier at 12 points) more readable. Originally a typewriter font has been transferred to digital several times but all of them have problems. This adaptation is a bit fatter to look as good on displays as on paper. For programming use the Courier Prime Code variant, based on the new sans. Several characters are now more easily distinguished and there is a slasheded zero.",
"license": "SIL OFL",
"ligatures": false,
"name": "Courier Prime Code",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"italic"
@ -292,7 +292,7 @@
"name": "Cousine",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular",
"italic",
@ -308,7 +308,7 @@
"name": "Cozette",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular"
],
@ -332,7 +332,7 @@
"name": "D2Coding",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/naver/d2codingfont",
"year": 2016,
"variants": [
@ -347,7 +347,7 @@
"name": "DaddyTimeMono",
"rendering": "vector",
"style": "serif",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/BourgeoisBear/DaddyTimeMono",
"year": 2017,
"variants": [
@ -360,7 +360,7 @@
"name": "DejaVu Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://dejavu-fonts.github.io",
"year": 2004
},
@ -382,7 +382,7 @@
"name": "Edlo",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/ehamiter/Edlo",
"year": 2011
},
@ -404,7 +404,7 @@
"name": "Ellograph",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"bold",
"bold-italic",
@ -432,7 +432,7 @@
"name": "Envy Code R",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://damieng.com/blog/2008/05/26/envy-code-r-preview-7-coding-font-released",
"year": 2008
},
@ -443,7 +443,7 @@
"name": "Fairfax",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"italic",
@ -460,7 +460,7 @@
"name": "Fairfax HD",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.kreativekorp.com/software/fonts/fairfaxhd.shtml",
"year": 2019
},
@ -471,7 +471,7 @@
"name": "Fairfax Serif",
"rendering": "bitmap",
"style": "serif",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.kreativekorp.com/software/fonts/fairfax.shtml",
"year": 2008
},
@ -481,7 +481,7 @@
"name": "Fantasque Sans Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/belluzj/fantasque-sans",
"year": 2013
},
@ -491,7 +491,7 @@
"name": "Fifteen",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://openfontlibrary.org/en/font/fifteen",
"year": 2013
},
@ -501,7 +501,7 @@
"name": "Fira Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/mozilla/Fira",
"year": 2013
},
@ -511,7 +511,7 @@
"name": "Fira Code",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/tonsky/FiraCode",
"year": 2014
},
@ -521,7 +521,7 @@
"name": "Fixedsys",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.moviecorner.de/en/font-fixedsys-ttf/description",
"year": 1980
},
@ -531,7 +531,7 @@
"name": "Fixedsys with Ligatures",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/kika/fixedsys",
"year": 2016
},
@ -541,7 +541,7 @@
"name": "3270",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"medium",
"narrow",
@ -556,13 +556,13 @@
"name": "Generic Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://luc.devroye.org/fonts-75172.html",
"year": 1980
},
"gnu-freefont": {
"author": "Primož Peterlin, Steve White",
"description": "This isn’t a designer’s font, but an open source community effort to create a single font that has it all. It comes in bold and italic and has the most complete coverage of any font featured on this blog. While an OS will mix and match fonts for missing glyphs FreeFont looks to be a consistent source for anything mankind has ever put into writing. Still, every now and then new releases improve the offering. If you need specific scripts or write a lot of math in LateX, this font will not let you down. It would have been better with a more distinct zero though, it lacks a slash or dot to set it apart from the capital o.",
"description": "This isn’t a designer’s font, but an open source community effort to create a single font that has it all. It comes in bold and italic and has the most complete coverage of any font featured on this blog. While an OS will mix and match fonts for missing glyphs FreeFont looks to be a consistent source for anything mankind has ever put into writing. Still, every now and then new releases improve the offering. If you need specific scripts or write a lot of math in LateX, this font will not let you down. It would have been better with a more distinct zero though, it lacks a slashed or dotted to set it apart from the capital o.",
"license": "GNU GPL",
"ligatures": false,
"name": "GNU Freefont",
@ -586,7 +586,7 @@
"name": "Go Mono",
"rendering": "vector",
"style": "serif",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"bold",
@ -602,7 +602,7 @@
"name": "Hack",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/chrissimpkins/Hack",
"year": 2015
},
@ -612,7 +612,7 @@
"name": "Hasklig",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/i-tu/Hasklig",
"year": 2014
},
@ -622,7 +622,7 @@
"name": "Hermit",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://pcaro.es/p/hermit/",
"year": 2013
},
@ -632,7 +632,7 @@
"name": "iA Writer Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://ia.net/writer/blog/a-typographic-christmas",
"year": 2018
},
@ -642,7 +642,7 @@
"name": "Inconsolata",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.levien.com/type/myfonts/inconsolata.html",
"year": 2001
},
@ -652,7 +652,7 @@
"name": "Inconsolata-g",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://leonardo-m.livejournal.com/77079.html",
"year": 2009
},
@ -662,7 +662,7 @@
"name": "Input",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://input.fontbureau.com",
"year": 2014
},
@ -672,7 +672,7 @@
"name": "Iosevka",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://be5invis.github.io/Iosevka/",
"year": 2015
},
@ -683,7 +683,7 @@
"name": "JetBrains Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"bold-italic",
"bold",
@ -709,13 +709,13 @@
},
"league": {
"author": "Tyler Fink",
"description": "League Mono is a new monospaced font that’s clean, practical and sans-serif. Glyphs are well aligned and distinct, featuring a dotted zero. With about 374 characters it has plenty of language support. Although there are no true italics the 5 weights from ultra light to bold provide a lot of creative options. There is now even a new variable variant for endless possibilities.",
"description": "League Mono is a new monospaced font that’s clean, practical and sans-serif. Glyphs are well aligned and distinct, featuring a dottedted zero. With about 374 characters it has plenty of language support. Although there are no true italics the 5 weights from ultra light to bold provide a lot of creative options. There is now even a new variable variant for endless possibilities.",
"license": "SIL OFL",
"ligatures": false,
"name": "League Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"100",
"200",
@ -757,7 +757,7 @@
"name": "Luculent",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"italic",
@ -783,7 +783,7 @@
"name": "Mensch",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular"
],
@ -796,7 +796,7 @@
"name": "Meslo",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/andreberg/Meslo-Font",
"year": 2010
},
@ -806,7 +806,7 @@
"name": "Monofur",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://www.dafont.com/monofur.font",
"year": 2000
},
@ -816,7 +816,7 @@
"name": "Monoid",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://larsenwork.com/monoid/",
"year": 2015
},
@ -826,7 +826,7 @@
"name": "Mononoki",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/madmalik/mononoki",
"year": 2013
},
@ -836,7 +836,7 @@
"name": "M+",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://mplus-fonts.sourceforge.jp",
"year": 2003
},
@ -846,7 +846,7 @@
"name": "Nanum Gothic Coding",
"rendering": "vector",
"style": "serif",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/naver/nanumfont",
"year": 2009,
"description": "Many years ago, there was some sort of competition in South Korea for developing/publishing Korean fonts among Internet/big companies. Naver, which is the biggest Internet company in South Korea, published Nanum fonts along with a few variations, and Nanum Gothic Coding was one of them. Nanum means \"sharing\" in Korean."
@ -877,7 +877,7 @@
"name": "Nova Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.google.com/fonts/specimen/Nova+Mono",
"year": 2010
},
@ -887,7 +887,7 @@
"name": "Office Code Pro",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/nathco/Office-Code-Pro",
"year": 2015
},
@ -899,7 +899,7 @@
"name": "OpenDyslexic Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular"
],
@ -914,7 +914,7 @@
"name": "Overpass Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"light",
"regular",
@ -926,13 +926,13 @@
},
"oxygen": {
"author": "Vernon Adams",
"description": "Most fonts work fine on a Mac, the best ones add hinting for The Windows ClearType system, but a scarce few pay special attention to the FreeType rendering used in Linux. Oxygen was created to work well in KDE, and this mono variation is a great choice for programmers on Linux. It features a slashed zero and 397 glyphs are enough for pretty much anyone, although purists would prefer true bold and italic.",
"description": "Most fonts work fine on a Mac, the best ones add hinting for The Windows ClearType system, but a scarce few pay special attention to the FreeType rendering used in Linux. Oxygen was created to work well in KDE, and this mono variation is a great choice for programmers on Linux. It features a slasheded zero and 397 glyphs are enough for pretty much anyone, although purists would prefer true bold and italic.",
"license": "SIL OFL",
"ligatures": false,
"name": "Oxygen Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular"
],
@ -947,7 +947,7 @@
"name": "Plex Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"bold",
"bold-italic",
@ -985,7 +985,7 @@
"name": "Profont",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://tobiasjung.name/profont/",
"year": 1987
},
@ -995,19 +995,19 @@
"name": "Proggy Clean",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/bluescan/proggyfonts/",
"year": 2004
},
"proggy-vector": {
"author": "Tristan Grimmer",
"description": "A vector graphics variant of the venerable Proggy font. You can also op for dotted zeros or crossed sevens and zeds, and a lot of attention is payed to the way operators and braces line up with text. No bold or italic variants, but otherwise it’s everything you’d want for in a programming font.",
"description": "A vector graphics variant of the venerable Proggy font. You can also op for dottedted zeros or crossed sevens and zeds, and a lot of attention is payed to the way operators and braces line up with text. No bold or italic variants, but otherwise it’s everything you’d want for in a programming font.",
"license": "MIT",
"ligatures": false,
"name": "Proggy Vector",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular"
],
@ -1020,7 +1020,7 @@
"name": "PT Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://paratype.com/public/",
"year": 2011
},
@ -1032,7 +1032,7 @@
"name": "Quinze",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular"
],
@ -1045,7 +1045,7 @@
"name": "Recursive",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://www.recursive.design",
"year": 2018
},
@ -1055,7 +1055,7 @@
"name": "Roboto Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://www.google.com/fonts/specimen/Roboto+Mono",
"year": 2015
},
@ -1075,7 +1075,7 @@
"name": "Share Tech Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.google.com/fonts/specimen/Share+Tech+Mono",
"year": 2012
},
@ -1085,7 +1085,7 @@
"name": "SK Modernist Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://seankanedesign.com/work/sk-modernist",
"year": 2015
},
@ -1096,7 +1096,7 @@
"ligatures": false,
"name": "Sometype Mono",
"rendering": "vector",
"zerostyle": "slash",
"zerostyle": "slashed",
"style": "sans",
"variants": [
"regular",
@ -1117,7 +1117,7 @@
"name": "Source Code Pro",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"black",
"black-italic",
@ -1145,7 +1145,7 @@
"name": "Space Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular",
"italic",
@ -1171,7 +1171,7 @@
"name": "Terminus (TTF)",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://files.ax86.net/terminus-ttf",
"year": 2010
},
@ -1191,7 +1191,7 @@
"name": "Ubuntu Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://font.ubuntu.com",
"year": 2010
},
@ -1211,7 +1211,7 @@
"name": "Verily Serif Mono",
"rendering": "vector",
"style": "serif",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://www.fontsquirrel.com/fonts/Verily-Serif-Mono",
"year": 2006
},
@ -1223,7 +1223,7 @@
"name": "Victor Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://rubjo.github.io/victor-mono/",
"year": 2019
},

16
index.css
View File

@ -229,7 +229,7 @@ button {
width: 20px;
height: 18px;
position: relative;
margin: 0;
margin: 0 .5ex 0 0;
border: 1px solid #E4E4E4;
border-bottom-color: #CCC;
@ -252,17 +252,9 @@ button path,
button rect {
fill: currentColor;
}
.toggle {
display: flex;
}
.toggle button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-color: #E4E4E4;
}
.toggle button:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
button:not(.selected) > svg:not(:first-child),
button.selected > svg:not(.selected) {
display: none;
}
select {
all: unset;

69
index.html
View File

@ -97,8 +97,8 @@
<div class="main-wrapper">
<main>
<section id="filters">
<fieldset class="toggle" data-group="style">
<button value="sans" title="sans">
<fieldset>
<button value="style" title="serifs or sans">
<svg width="12" height="12" alt="sans" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.64678,0,0,1.64678,-7.09053,3.87857)">
<g transform="matrix(12,0,0,12,4.97259,4.38784)">
@ -106,8 +106,6 @@
</g>
</g>
</svg>
</button>
<button value="serif" title="serif">
<svg width="12" height="12" alt="serif" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.73346,0,0,1.73346,-6.72826,3.71105)">
<g transform="matrix(12,0,0,12,4.29583,4.38784)">
@ -115,11 +113,24 @@
</g>
</g>
</svg>
</button>
</fieldset>
<fieldset class="toggle" data-group="rendering">
<button value="vector" title="vector">
<button value="zerostyle" title="zero style">
<svg width="12" height="12" alt="slashed" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/><rect transform="matrix(.82528 .56472 -.43794 .89901 0 0)" x="7.3105" y="-2.1319" width="1.1796" height="8.8701" stroke-width=".39701"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
<svg width="12" height="12" alt="dotted" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" stroke-width=".39487" aria-label="0"><path d="m4.8368 5.7326h1.349v1.5988h-1.349zm4.6207 0.77235q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
<svg width="12" height="12" alt="empty" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
</button>
<button value="rendering" title="rendering">
<svg width="12" height="12" alt="vector" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.80339,0,0,1.80339,-7.18367,2.87903)">
<g transform="matrix(12,0,0,12,4.2929,4.38784)">
@ -127,16 +138,18 @@
</g>
</g>
</svg>
</button>
<button value="bitmap" title="bitmap">
<svg width="12" height="12" alt="bitmap" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M4,9L8,9L8,11L4,11L4,9ZM2,1L4,1L4,11L2,11L2,1ZM8,7L10,7L10,9L8,9L8,7ZM4,5L8,5L8,7L4,7L4,5ZM8,3L10,3L10,5L8,5L8,3ZM4,1L8,1L8,3L4,3L4,1Z"/>
</svg>
</button>
</fieldset>
<fieldset class="toggle" data-group="liga">
<button value="no" title="no ligatures">
<svg width="12" height="12" alt="no ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<button value="liga" title="ligatures">
<svg width="12" height="12" alt="yes" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<path d="M7.87,5.4L5.97,4.52L5.97,3.003L10.5,5.414L10.5,6.591L5.97,8.997L5.97,7.485L7.87,6.605L1.5,6.605L1.5,5.4L7.87,5.4Z" style="fill-rule:nonzero;"/>
</g>
</svg>
<svg width="12" height="12" alt="no" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(0.829577,0,0,0.829577,-2.51769,4.72923)">
<g transform="matrix(12,0,0,12,3.03411,5.29647)">
<rect x="0.05" y="-0.374" width="0.518" height="0.121" style="fill-rule:nonzero;"/>
@ -146,14 +159,6 @@
</g>
</g>
</svg>
</button>
<button value="yes" title="ligatures">
<svg width="12" height="12" alt="ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<path d="M7.87,5.4L5.97,4.52L5.97,3.003L10.5,5.414L10.5,6.591L5.97,8.997L5.97,7.485L7.87,6.605L1.5,6.605L1.5,5.4L7.87,5.4Z" style="fill-rule:nonzero;"/>
</g>
</svg>
</button>
</fieldset>
<fieldset>
@ -169,26 +174,6 @@
<fieldset>
<input type="text" id="name-search" placeholder="Search">
</fieldset>
<fieldset class="toggle" data-group="zerostyle">
<button value="empty" title="empty">
<svg width="12" height="12" alt="ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
</button>
<button value="slash" title="slash">
<svg width="12" height="12" alt="ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/><rect transform="matrix(.82528 .56472 -.43794 .89901 0 0)" x="7.3105" y="-2.1319" width="1.1796" height="8.8701" stroke-width=".39701"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
</button>
<button value="dot" title="dot">
<svg width="12" height="12" alt="ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" stroke-width=".39487" aria-label="0"><path d="m4.8368 5.7326h1.349v1.5988h-1.349zm4.6207 0.77235q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
</button>
</fieldset>
</section>
<section class="select-list" tabindex="0">
<div id="select-font">

111
index.js
View File

@ -95,69 +95,25 @@ function setCounter(amount) {
function applyFilters() {
var count = 0;
switch (filters.style) {
case 'sans':
$('[data-group="style"] [value="sans"]').addClass('selected');
$('[data-group="style"] [value="serif"]').removeClass('selected');
break;
case 'serif':
$('[data-group="style"] [value="sans"]').removeClass('selected');
$('[data-group="style"] [value="serif"]').addClass('selected');
break;
default:
$('[data-group="style"] [value="sans"]').removeClass('selected');
$('[data-group="style"] [value="serif"]').removeClass('selected');
}
switch (filters.rendering) {
case 'vector':
$('[data-group="rendering"] [value="vector"]').addClass('selected');
$('[data-group="rendering"] [value="bitmap"]').removeClass('selected');
break;
case 'bitmap':
$('[data-group="rendering"] [value="vector"]').removeClass('selected');
$('[data-group="rendering"] [value="bitmap"]').addClass('selected');
break;
default:
$('[data-group="rendering"] [value="vector"]').removeClass('selected');
$('[data-group="rendering"] [value="bitmap"]').removeClass('selected');
Object.keys(filters).forEach(function(filter) {
var button = document.querySelector('button[value="' + filter + '"]');
if (! button) {
return;
}
switch (filters.liga) {
case 'yes':
$('[data-group="liga"] [value="yes"]').addClass('selected');
$('[data-group="liga"] [value="no"]').removeClass('selected');
break;
case 'no':
$('[data-group="liga"] [value="yes"]').removeClass('selected');
$('[data-group="liga"] [value="no"]').addClass('selected');
break;
default:
$('[data-group="liga"] [value="yes"]').removeClass('selected');
$('[data-group="liga"] [value="no"]').removeClass('selected');
}
switch (filters.zerostyle) {
case 'empty':
$('[data-group="zerostyle"] [value="empty"]').addClass('selected');
$('[data-group="zerostyle"] [value="slash"]').removeClass('selected');
$('[data-group="zerostyle"] [value="dot"]').removeClass('selected');
break;
case 'slash':
$('[data-group="zerostyle"] [value="empty"]').removeClass('selected');
$('[data-group="zerostyle"] [value="slash"]').addClass('selected');
$('[data-group="zerostyle"] [value="dot"]').removeClass('selected');
break;
case 'dot':
$('[data-group="zerostyle"] [value="empty"]').removeClass('selected');
$('[data-group="zerostyle"] [value="slash"]').removeClass('selected');
$('[data-group="zerostyle"] [value="dot"]').addClass('selected');
break;
default:
$('[data-group="zerostyle"] [value="empty"]').removeClass('selected');
$('[data-group="zerostyle"] [value="slash"]').removeClass('selected');
$('[data-group="zerostyle"] [value="dot"]').removeClass('selected');
if (filters[filter]) {
button.classList.add('selected');
button.querySelectorAll('svg').forEach(function(image){
image.classList.remove('selected');
});
button.querySelector('svg[alt="' + filters[filter] + '"]').classList.add('selected');
} else {
button.classList.remove('selected');
button.querySelectorAll('svg').forEach(function(image){
image.classList.remove('selected');
});
}
});
$('.entry[data-alias]').each(function(iteration, element) {
var data = font_data[$(element).data().alias];
@ -306,23 +262,23 @@ function decreaseFontSize() {
sizeEl.onchange();
}
function toggleFilter(filter, group) {
function toggleValue(name, value) {
if (filters[name] === value) {
filters[name] = false;
} else {
filters[name] = value;
}
}
function toggleFilter(filter) {
// cycle through the possible values for each filter
// and set the filters[filter] value,
// or at the end of the cycle set it to false
var options = {
'style': [false, 'sans', 'serif'],
'rendering': [false, 'vector', 'bitmap'],
'liga': [false, 'yes', 'no'],
'zerostyle': [false, 'slashed', 'dotted', 'empty'],
};
if (group === 'style') {
toggleValue('style', filter);
} else if (group === 'rendering') {
toggleValue('rendering', filter);
} else if (group === 'liga') {
toggleValue('liga', filter);
} else if (group === 'zerostyle') {
toggleValue('zerostyle', filter);
var current_index = options[filter].indexOf(filters[filter]);
var next = current_index + 1;
if (next < options[filter].length) {
filters[filter] = options[filter][next];
} else {
filters[filter] = options[filter][0];
}
applyFilters();
@ -365,10 +321,9 @@ $(document).ready(function() {
$('#filters button').on('click', function(event) {
var button = $(this);
var button_group = button.parent().data().group;
event.preventDefault();
event.stopPropagation();
toggleFilter(button.val(), button_group);
toggleFilter(button.val());
});
$('#authors-list').on('change', function() {
filters.author = $(this).val();