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", "name": "Agave",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"regular" "regular"
], ],
@ -20,7 +20,7 @@
"name": "Anka/Coder", "name": "Anka/Coder",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular", "regular",
"condensed", "condensed",
@ -37,7 +37,7 @@
"name": "Anonymous Pro", "name": "Anonymous Pro",
"rendering": "vector", "rendering": "vector",
"style": "serif", "style": "serif",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular", "regular",
"italic", "italic",
@ -128,7 +128,7 @@
"name": "Bitstream Vera Sans Mono", "name": "Bitstream Vera Sans Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "http://www.fontsquirrel.com/fonts/Bitstream-Vera-Sans-Mono", "website": "http://www.fontsquirrel.com/fonts/Bitstream-Vera-Sans-Mono",
"year": 2002 "year": 2002
}, },
@ -138,7 +138,7 @@
"name": "Borg Sans Mono", "name": "Borg Sans Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/marnen/borg-sans-mono", "website": "https://github.com/marnen/borg-sans-mono",
"year": 2016 "year": 2016
}, },
@ -148,7 +148,7 @@
"name": "BPmono", "name": "BPmono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://www.fontsquirrel.com/fonts/BPmono", "website": "http://www.fontsquirrel.com/fonts/BPmono",
"year": 2007 "year": 2007
}, },
@ -158,7 +158,7 @@
"name": "Bront DejaVu Sans Mono", "name": "Bront DejaVu Sans Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/chrismwendt/bront", "website": "https://github.com/chrismwendt/bront",
"year": 2015 "year": 2015
}, },
@ -168,7 +168,7 @@
"name": "Bront Ubuntu Mono", "name": "Bront Ubuntu Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/chrismwendt/bront", "website": "https://github.com/chrismwendt/bront",
"year": 2015 "year": 2015
}, },
@ -178,7 +178,7 @@
"name": "CamingoCode", "name": "CamingoCode",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://www.janfromm.de/typefaces/camingomono/camingocode", "website": "http://www.janfromm.de/typefaces/camingomono/camingocode",
"year": 2013 "year": 2013
}, },
@ -190,7 +190,7 @@
"name": "Cartograph", "name": "Cartograph",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"regular", "regular",
"italic", "italic",
@ -218,7 +218,7 @@
"name": "Cascadia Code", "name": "Cascadia Code",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://github.com/microsoft/cascadia-code", "website": "https://github.com/microsoft/cascadia-code",
"year": 2019 "year": 2019
}, },
@ -228,7 +228,7 @@
"name": "Code New Roman", "name": "Code New Roman",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://sourceforge.net/projects/codenewroman/", "website": "http://sourceforge.net/projects/codenewroman/",
"year": 2014 "year": 2014
}, },
@ -240,7 +240,7 @@
"name": "Comic Shanns", "name": "Comic Shanns",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular" "regular"
], ],
@ -253,7 +253,7 @@
"name": "Consolamono", "name": "Consolamono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://openfontlibrary.org/en/font/consolamono", "website": "http://openfontlibrary.org/en/font/consolamono",
"year": 2011 "year": 2011
}, },
@ -270,13 +270,13 @@
}, },
"courier-prime-code": { "courier-prime-code": {
"author": "Alan Dague-Greene", "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", "license": "SIL OFL",
"ligatures": false, "ligatures": false,
"name": "Courier Prime Code", "name": "Courier Prime Code",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular", "regular",
"italic" "italic"
@ -292,7 +292,7 @@
"name": "Cousine", "name": "Cousine",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"regular", "regular",
"italic", "italic",
@ -308,7 +308,7 @@
"name": "Cozette", "name": "Cozette",
"rendering": "bitmap", "rendering": "bitmap",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"regular" "regular"
], ],
@ -332,7 +332,7 @@
"name": "D2Coding", "name": "D2Coding",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/naver/d2codingfont", "website": "https://github.com/naver/d2codingfont",
"year": 2016, "year": 2016,
"variants": [ "variants": [
@ -347,7 +347,7 @@
"name": "DaddyTimeMono", "name": "DaddyTimeMono",
"rendering": "vector", "rendering": "vector",
"style": "serif", "style": "serif",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/BourgeoisBear/DaddyTimeMono", "website": "https://github.com/BourgeoisBear/DaddyTimeMono",
"year": 2017, "year": 2017,
"variants": [ "variants": [
@ -360,7 +360,7 @@
"name": "DejaVu Mono", "name": "DejaVu Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://dejavu-fonts.github.io", "website": "https://dejavu-fonts.github.io",
"year": 2004 "year": 2004
}, },
@ -382,7 +382,7 @@
"name": "Edlo", "name": "Edlo",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://github.com/ehamiter/Edlo", "website": "https://github.com/ehamiter/Edlo",
"year": 2011 "year": 2011
}, },
@ -404,7 +404,7 @@
"name": "Ellograph", "name": "Ellograph",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"bold", "bold",
"bold-italic", "bold-italic",
@ -432,7 +432,7 @@
"name": "Envy Code R", "name": "Envy Code R",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://damieng.com/blog/2008/05/26/envy-code-r-preview-7-coding-font-released", "website": "https://damieng.com/blog/2008/05/26/envy-code-r-preview-7-coding-font-released",
"year": 2008 "year": 2008
}, },
@ -443,7 +443,7 @@
"name": "Fairfax", "name": "Fairfax",
"rendering": "bitmap", "rendering": "bitmap",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular", "regular",
"italic", "italic",
@ -460,7 +460,7 @@
"name": "Fairfax HD", "name": "Fairfax HD",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://www.kreativekorp.com/software/fonts/fairfaxhd.shtml", "website": "http://www.kreativekorp.com/software/fonts/fairfaxhd.shtml",
"year": 2019 "year": 2019
}, },
@ -471,7 +471,7 @@
"name": "Fairfax Serif", "name": "Fairfax Serif",
"rendering": "bitmap", "rendering": "bitmap",
"style": "serif", "style": "serif",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://www.kreativekorp.com/software/fonts/fairfax.shtml", "website": "http://www.kreativekorp.com/software/fonts/fairfax.shtml",
"year": 2008 "year": 2008
}, },
@ -481,7 +481,7 @@
"name": "Fantasque Sans Mono", "name": "Fantasque Sans Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/belluzj/fantasque-sans", "website": "https://github.com/belluzj/fantasque-sans",
"year": 2013 "year": 2013
}, },
@ -491,7 +491,7 @@
"name": "Fifteen", "name": "Fifteen",
"rendering": "bitmap", "rendering": "bitmap",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://openfontlibrary.org/en/font/fifteen", "website": "http://openfontlibrary.org/en/font/fifteen",
"year": 2013 "year": 2013
}, },
@ -501,7 +501,7 @@
"name": "Fira Mono", "name": "Fira Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://github.com/mozilla/Fira", "website": "https://github.com/mozilla/Fira",
"year": 2013 "year": 2013
}, },
@ -511,7 +511,7 @@
"name": "Fira Code", "name": "Fira Code",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://github.com/tonsky/FiraCode", "website": "https://github.com/tonsky/FiraCode",
"year": 2014 "year": 2014
}, },
@ -521,7 +521,7 @@
"name": "Fixedsys", "name": "Fixedsys",
"rendering": "bitmap", "rendering": "bitmap",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://www.moviecorner.de/en/font-fixedsys-ttf/description", "website": "http://www.moviecorner.de/en/font-fixedsys-ttf/description",
"year": 1980 "year": 1980
}, },
@ -531,7 +531,7 @@
"name": "Fixedsys with Ligatures", "name": "Fixedsys with Ligatures",
"rendering": "bitmap", "rendering": "bitmap",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/kika/fixedsys", "website": "https://github.com/kika/fixedsys",
"year": 2016 "year": 2016
}, },
@ -541,7 +541,7 @@
"name": "3270", "name": "3270",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"medium", "medium",
"narrow", "narrow",
@ -556,13 +556,13 @@
"name": "Generic Mono", "name": "Generic Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://luc.devroye.org/fonts-75172.html", "website": "http://luc.devroye.org/fonts-75172.html",
"year": 1980 "year": 1980
}, },
"gnu-freefont": { "gnu-freefont": {
"author": "Primož Peterlin, Steve White", "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", "license": "GNU GPL",
"ligatures": false, "ligatures": false,
"name": "GNU Freefont", "name": "GNU Freefont",
@ -586,7 +586,7 @@
"name": "Go Mono", "name": "Go Mono",
"rendering": "vector", "rendering": "vector",
"style": "serif", "style": "serif",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular", "regular",
"bold", "bold",
@ -602,7 +602,7 @@
"name": "Hack", "name": "Hack",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://github.com/chrissimpkins/Hack", "website": "https://github.com/chrissimpkins/Hack",
"year": 2015 "year": 2015
}, },
@ -612,7 +612,7 @@
"name": "Hasklig", "name": "Hasklig",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://github.com/i-tu/Hasklig", "website": "https://github.com/i-tu/Hasklig",
"year": 2014 "year": 2014
}, },
@ -622,7 +622,7 @@
"name": "Hermit", "name": "Hermit",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://pcaro.es/p/hermit/", "website": "https://pcaro.es/p/hermit/",
"year": 2013 "year": 2013
}, },
@ -632,7 +632,7 @@
"name": "iA Writer Mono", "name": "iA Writer Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://ia.net/writer/blog/a-typographic-christmas", "website": "https://ia.net/writer/blog/a-typographic-christmas",
"year": 2018 "year": 2018
}, },
@ -642,7 +642,7 @@
"name": "Inconsolata", "name": "Inconsolata",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://www.levien.com/type/myfonts/inconsolata.html", "website": "http://www.levien.com/type/myfonts/inconsolata.html",
"year": 2001 "year": 2001
}, },
@ -652,7 +652,7 @@
"name": "Inconsolata-g", "name": "Inconsolata-g",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "http://leonardo-m.livejournal.com/77079.html", "website": "http://leonardo-m.livejournal.com/77079.html",
"year": 2009 "year": 2009
}, },
@ -662,7 +662,7 @@
"name": "Input", "name": "Input",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "http://input.fontbureau.com", "website": "http://input.fontbureau.com",
"year": 2014 "year": 2014
}, },
@ -672,7 +672,7 @@
"name": "Iosevka", "name": "Iosevka",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://be5invis.github.io/Iosevka/", "website": "http://be5invis.github.io/Iosevka/",
"year": 2015 "year": 2015
}, },
@ -683,7 +683,7 @@
"name": "JetBrains Mono", "name": "JetBrains Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"bold-italic", "bold-italic",
"bold", "bold",
@ -709,13 +709,13 @@
}, },
"league": { "league": {
"author": "Tyler Fink", "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", "license": "SIL OFL",
"ligatures": false, "ligatures": false,
"name": "League Mono", "name": "League Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"100", "100",
"200", "200",
@ -757,7 +757,7 @@
"name": "Luculent", "name": "Luculent",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular", "regular",
"italic", "italic",
@ -783,7 +783,7 @@
"name": "Mensch", "name": "Mensch",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"regular" "regular"
], ],
@ -796,7 +796,7 @@
"name": "Meslo", "name": "Meslo",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/andreberg/Meslo-Font", "website": "https://github.com/andreberg/Meslo-Font",
"year": 2010 "year": 2010
}, },
@ -806,7 +806,7 @@
"name": "Monofur", "name": "Monofur",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "http://www.dafont.com/monofur.font", "website": "http://www.dafont.com/monofur.font",
"year": 2000 "year": 2000
}, },
@ -816,7 +816,7 @@
"name": "Monoid", "name": "Monoid",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://larsenwork.com/monoid/", "website": "http://larsenwork.com/monoid/",
"year": 2015 "year": 2015
}, },
@ -826,7 +826,7 @@
"name": "Mononoki", "name": "Mononoki",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/madmalik/mononoki", "website": "https://github.com/madmalik/mononoki",
"year": 2013 "year": 2013
}, },
@ -836,7 +836,7 @@
"name": "M+", "name": "M+",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://mplus-fonts.sourceforge.jp", "website": "http://mplus-fonts.sourceforge.jp",
"year": 2003 "year": 2003
}, },
@ -846,7 +846,7 @@
"name": "Nanum Gothic Coding", "name": "Nanum Gothic Coding",
"rendering": "vector", "rendering": "vector",
"style": "serif", "style": "serif",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://github.com/naver/nanumfont", "website": "https://github.com/naver/nanumfont",
"year": 2009, "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." "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", "name": "Nova Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://www.google.com/fonts/specimen/Nova+Mono", "website": "http://www.google.com/fonts/specimen/Nova+Mono",
"year": 2010 "year": 2010
}, },
@ -887,7 +887,7 @@
"name": "Office Code Pro", "name": "Office Code Pro",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://github.com/nathco/Office-Code-Pro", "website": "https://github.com/nathco/Office-Code-Pro",
"year": 2015 "year": 2015
}, },
@ -899,7 +899,7 @@
"name": "OpenDyslexic Mono", "name": "OpenDyslexic Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"regular" "regular"
], ],
@ -914,7 +914,7 @@
"name": "Overpass Mono", "name": "Overpass Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"light", "light",
"regular", "regular",
@ -926,13 +926,13 @@
}, },
"oxygen": { "oxygen": {
"author": "Vernon Adams", "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", "license": "SIL OFL",
"ligatures": false, "ligatures": false,
"name": "Oxygen Mono", "name": "Oxygen Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular" "regular"
], ],
@ -947,7 +947,7 @@
"name": "Plex Mono", "name": "Plex Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"bold", "bold",
"bold-italic", "bold-italic",
@ -985,7 +985,7 @@
"name": "Profont", "name": "Profont",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://tobiasjung.name/profont/", "website": "http://tobiasjung.name/profont/",
"year": 1987 "year": 1987
}, },
@ -995,19 +995,19 @@
"name": "Proggy Clean", "name": "Proggy Clean",
"rendering": "bitmap", "rendering": "bitmap",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://github.com/bluescan/proggyfonts/", "website": "https://github.com/bluescan/proggyfonts/",
"year": 2004 "year": 2004
}, },
"proggy-vector": { "proggy-vector": {
"author": "Tristan Grimmer", "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", "license": "MIT",
"ligatures": false, "ligatures": false,
"name": "Proggy Vector", "name": "Proggy Vector",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular" "regular"
], ],
@ -1020,7 +1020,7 @@
"name": "PT Mono", "name": "PT Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://paratype.com/public/", "website": "http://paratype.com/public/",
"year": 2011 "year": 2011
}, },
@ -1032,7 +1032,7 @@
"name": "Quinze", "name": "Quinze",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"variants": [ "variants": [
"regular" "regular"
], ],
@ -1045,7 +1045,7 @@
"name": "Recursive", "name": "Recursive",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://www.recursive.design", "website": "https://www.recursive.design",
"year": 2018 "year": 2018
}, },
@ -1055,7 +1055,7 @@
"name": "Roboto Mono", "name": "Roboto Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://www.google.com/fonts/specimen/Roboto+Mono", "website": "https://www.google.com/fonts/specimen/Roboto+Mono",
"year": 2015 "year": 2015
}, },
@ -1075,7 +1075,7 @@
"name": "Share Tech Mono", "name": "Share Tech Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://www.google.com/fonts/specimen/Share+Tech+Mono", "website": "http://www.google.com/fonts/specimen/Share+Tech+Mono",
"year": 2012 "year": 2012
}, },
@ -1085,7 +1085,7 @@
"name": "SK Modernist Mono", "name": "SK Modernist Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "http://seankanedesign.com/work/sk-modernist", "website": "http://seankanedesign.com/work/sk-modernist",
"year": 2015 "year": 2015
}, },
@ -1096,7 +1096,7 @@
"ligatures": false, "ligatures": false,
"name": "Sometype Mono", "name": "Sometype Mono",
"rendering": "vector", "rendering": "vector",
"zerostyle": "slash", "zerostyle": "slashed",
"style": "sans", "style": "sans",
"variants": [ "variants": [
"regular", "regular",
@ -1117,7 +1117,7 @@
"name": "Source Code Pro", "name": "Source Code Pro",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"black", "black",
"black-italic", "black-italic",
@ -1145,7 +1145,7 @@
"name": "Space Mono", "name": "Space Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"variants": [ "variants": [
"regular", "regular",
"italic", "italic",
@ -1171,7 +1171,7 @@
"name": "Terminus (TTF)", "name": "Terminus (TTF)",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "slash", "zerostyle": "slashed",
"website": "https://files.ax86.net/terminus-ttf", "website": "https://files.ax86.net/terminus-ttf",
"year": 2010 "year": 2010
}, },
@ -1191,7 +1191,7 @@
"name": "Ubuntu Mono", "name": "Ubuntu Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "http://font.ubuntu.com", "website": "http://font.ubuntu.com",
"year": 2010 "year": 2010
}, },
@ -1211,7 +1211,7 @@
"name": "Verily Serif Mono", "name": "Verily Serif Mono",
"rendering": "vector", "rendering": "vector",
"style": "serif", "style": "serif",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://www.fontsquirrel.com/fonts/Verily-Serif-Mono", "website": "https://www.fontsquirrel.com/fonts/Verily-Serif-Mono",
"year": 2006 "year": 2006
}, },
@ -1223,7 +1223,7 @@
"name": "Victor Mono", "name": "Victor Mono",
"rendering": "vector", "rendering": "vector",
"style": "sans", "style": "sans",
"zerostyle": "dot", "zerostyle": "dotted",
"website": "https://rubjo.github.io/victor-mono/", "website": "https://rubjo.github.io/victor-mono/",
"year": 2019 "year": 2019
}, },

16
index.css
View File

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

587
index.html
View File

@ -1,308 +1,293 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Programming Fonts - Test Drive</title> <title>Programming Fonts - Test Drive</title>
<meta name="description" content="Try out the best and newest monospace fonts for code"> <meta name="description" content="Try out the best and newest monospace fonts for code">
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicons --> <!-- Favicons -->
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ff6a00"> <link rel="mask-icon" href="safari-pinned-tab.svg" color="#ff6a00">
<!-- CSS reset --> <!-- CSS reset -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css">
<!-- CodeMirror --> <!-- CodeMirror -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.css">
<!-- CodeMirror Themes --> <!-- CodeMirror Themes -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/3024-day.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/3024-day.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/3024-night.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/3024-night.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/abcdef.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/abcdef.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/ambiance.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/ambiance.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/base16-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/base16-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/base16-light.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/base16-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/bespin.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/bespin.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/blackboard.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/blackboard.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/cobalt.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/cobalt.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/colorforth.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/colorforth.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/darcula.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/darcula.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/dracula.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/dracula.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/duotone-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/duotone-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/duotone-light.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/duotone-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/erlang-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/erlang-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/gruvbox-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/gruvbox-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/hopscotch.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/hopscotch.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/isotope.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/isotope.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/lesser-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/lesser-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/liquibyte.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/liquibyte.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/lucario.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/lucario.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/material.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/material.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/mbo.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/mbo.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/mdn-like.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/mdn-like.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/midnight.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/midnight.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/monokai.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/monokai.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/neo.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/neo.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/night.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/night.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/nord.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/nord.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/oceanic-next.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/oceanic-next.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/paraiso-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/paraiso-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/paraiso-light.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/paraiso-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/pastel-on-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/pastel-on-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/railscasts.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/railscasts.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/rubyblue.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/rubyblue.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/seti.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/seti.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/shadowfox.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/shadowfox.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/solarized.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/solarized.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/the-matrix.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/the-matrix.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/tomorrow-night-bright.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/tomorrow-night-bright.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/tomorrow-night-eighties.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/tomorrow-night-eighties.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/twilight.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/twilight.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/vibrant-ink.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/vibrant-ink.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/xq-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/xq-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/yeti.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/yeti.css">
<!-- CodeMirror JS --> <!-- CodeMirror JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/edit/matchbrackets.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/edit/matchbrackets.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/selection/active-line.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/selection/active-line.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/clike/clike.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/clike/clike.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/commonlisp/commonlisp.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/commonlisp/commonlisp.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/css/css.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/css/css.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/go/go.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/go/go.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/haskell/haskell.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/haskell/haskell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/htmlmixed/htmlmixed.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/javascript/javascript.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/javascript/javascript.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/perl/perl.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/perl/perl.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/php/php.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/php/php.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/python/python.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/python/python.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/r/r.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/r/r.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/ruby/ruby.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/ruby/ruby.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/shell/shell.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/shell/shell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/swift/swift.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/swift/swift.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/xml/xml.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/clojure/clojure.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/clojure/clojure.min.js"></script>
<link href="//cloud.webtype.com/css/7e544c5e-55dc-4b41-a8d3-c13f7e0a13d3.css" rel="stylesheet" type="text/css" /> <link href="//cloud.webtype.com/css/7e544c5e-55dc-4b41-a8d3-c13f7e0a13d3.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="fonts/stylesheets/stylesheet.css"><!-- Compiled (using less on node) with "lessc fonts.less > stylesheet.css" --> <link rel="stylesheet" href="fonts/stylesheets/stylesheet.css"><!-- Compiled (using less on node) with "lessc fonts.less > stylesheet.css" -->
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <body>
<div class="main-wrapper"> <div class="main-wrapper">
<main> <main>
<section id="filters"> <section id="filters">
<fieldset class="toggle" data-group="style"> <fieldset>
<button value="sans" title="sans"> <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;"> <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(1.64678,0,0,1.64678,-7.09053,3.87857)">
<g transform="matrix(12,0,0,12,4.97259,4.38784)"> <g transform="matrix(12,0,0,12,4.97259,4.38784)">
<path d="M0.117,-0.164C0.119,-0.135 0.127,-0.112 0.139,-0.097C0.161,-0.068 0.199,-0.054 0.254,-0.054C0.286,-0.054 0.315,-0.061 0.34,-0.075C0.365,-0.09 0.377,-0.111 0.377,-0.141C0.377,-0.164 0.367,-0.181 0.347,-0.192C0.334,-0.2 0.309,-0.208 0.272,-0.217L0.202,-0.235C0.158,-0.246 0.125,-0.258 0.104,-0.272C0.066,-0.296 0.047,-0.329 0.047,-0.371C0.047,-0.42 0.065,-0.46 0.1,-0.491C0.136,-0.521 0.184,-0.537 0.244,-0.537C0.323,-0.537 0.38,-0.514 0.415,-0.467C0.436,-0.438 0.447,-0.406 0.446,-0.373L0.363,-0.373C0.362,-0.392 0.355,-0.41 0.342,-0.427C0.322,-0.45 0.287,-0.461 0.237,-0.461C0.204,-0.461 0.179,-0.455 0.162,-0.442C0.145,-0.43 0.136,-0.413 0.136,-0.392C0.136,-0.369 0.147,-0.351 0.17,-0.337C0.183,-0.329 0.202,-0.322 0.228,-0.316L0.286,-0.302C0.349,-0.286 0.391,-0.272 0.413,-0.257C0.447,-0.235 0.464,-0.2 0.464,-0.151C0.464,-0.105 0.446,-0.065 0.411,-0.031C0.376,0.003 0.322,0.02 0.25,0.02C0.172,0.02 0.117,0.002 0.084,-0.033C0.052,-0.068 0.035,-0.112 0.032,-0.164L0.117,-0.164Z" style="fill-rule:nonzero;"/> <path d="M0.117,-0.164C0.119,-0.135 0.127,-0.112 0.139,-0.097C0.161,-0.068 0.199,-0.054 0.254,-0.054C0.286,-0.054 0.315,-0.061 0.34,-0.075C0.365,-0.09 0.377,-0.111 0.377,-0.141C0.377,-0.164 0.367,-0.181 0.347,-0.192C0.334,-0.2 0.309,-0.208 0.272,-0.217L0.202,-0.235C0.158,-0.246 0.125,-0.258 0.104,-0.272C0.066,-0.296 0.047,-0.329 0.047,-0.371C0.047,-0.42 0.065,-0.46 0.1,-0.491C0.136,-0.521 0.184,-0.537 0.244,-0.537C0.323,-0.537 0.38,-0.514 0.415,-0.467C0.436,-0.438 0.447,-0.406 0.446,-0.373L0.363,-0.373C0.362,-0.392 0.355,-0.41 0.342,-0.427C0.322,-0.45 0.287,-0.461 0.237,-0.461C0.204,-0.461 0.179,-0.455 0.162,-0.442C0.145,-0.43 0.136,-0.413 0.136,-0.392C0.136,-0.369 0.147,-0.351 0.17,-0.337C0.183,-0.329 0.202,-0.322 0.228,-0.316L0.286,-0.302C0.349,-0.286 0.391,-0.272 0.413,-0.257C0.447,-0.235 0.464,-0.2 0.464,-0.151C0.464,-0.105 0.446,-0.065 0.411,-0.031C0.376,0.003 0.322,0.02 0.25,0.02C0.172,0.02 0.117,0.002 0.084,-0.033C0.052,-0.068 0.035,-0.112 0.032,-0.164L0.117,-0.164Z" style="fill-rule:nonzero;"/>
</g> </g>
</g> </g>
</svg> </svg>
</button> <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;">
<button value="serif" title="serif"> <g transform="matrix(1.73346,0,0,1.73346,-6.72826,3.71105)">
<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(12,0,0,12,4.29583,4.38784)">
<g transform="matrix(1.73346,0,0,1.73346,-6.72826,3.71105)"> <path d="M0.349,-0.491L0.349,-0.513L0.437,-0.513L0.437,-0.343L0.349,-0.343L0.349,-0.374C0.32,-0.416 0.28,-0.437 0.229,-0.437C0.202,-0.437 0.181,-0.431 0.164,-0.419C0.147,-0.408 0.138,-0.393 0.138,-0.374C0.138,-0.357 0.145,-0.344 0.157,-0.335C0.17,-0.326 0.199,-0.317 0.244,-0.31L0.312,-0.297C0.413,-0.278 0.464,-0.229 0.464,-0.148C0.464,-0.101 0.446,-0.063 0.409,-0.034C0.372,-0.006 0.324,0.009 0.263,0.009C0.239,0.009 0.215,0.005 0.192,-0.002C0.169,-0.009 0.149,-0.017 0.134,-0.028L0.134,0L0.044,0L0.044,-0.176L0.134,-0.176L0.134,-0.158C0.139,-0.133 0.152,-0.114 0.175,-0.099C0.198,-0.084 0.224,-0.076 0.254,-0.076C0.287,-0.076 0.313,-0.082 0.332,-0.094C0.35,-0.105 0.36,-0.122 0.36,-0.145C0.36,-0.162 0.352,-0.174 0.337,-0.182C0.322,-0.191 0.292,-0.199 0.247,-0.208L0.195,-0.219C0.143,-0.23 0.105,-0.248 0.081,-0.273C0.057,-0.298 0.045,-0.331 0.045,-0.37C0.045,-0.402 0.054,-0.429 0.072,-0.452C0.089,-0.475 0.112,-0.492 0.14,-0.503C0.167,-0.514 0.196,-0.52 0.225,-0.52C0.274,-0.52 0.316,-0.51 0.349,-0.491Z" style="fill-rule:nonzero;"/>
<g transform="matrix(12,0,0,12,4.29583,4.38784)"> </g>
<path d="M0.349,-0.491L0.349,-0.513L0.437,-0.513L0.437,-0.343L0.349,-0.343L0.349,-0.374C0.32,-0.416 0.28,-0.437 0.229,-0.437C0.202,-0.437 0.181,-0.431 0.164,-0.419C0.147,-0.408 0.138,-0.393 0.138,-0.374C0.138,-0.357 0.145,-0.344 0.157,-0.335C0.17,-0.326 0.199,-0.317 0.244,-0.31L0.312,-0.297C0.413,-0.278 0.464,-0.229 0.464,-0.148C0.464,-0.101 0.446,-0.063 0.409,-0.034C0.372,-0.006 0.324,0.009 0.263,0.009C0.239,0.009 0.215,0.005 0.192,-0.002C0.169,-0.009 0.149,-0.017 0.134,-0.028L0.134,0L0.044,0L0.044,-0.176L0.134,-0.176L0.134,-0.158C0.139,-0.133 0.152,-0.114 0.175,-0.099C0.198,-0.084 0.224,-0.076 0.254,-0.076C0.287,-0.076 0.313,-0.082 0.332,-0.094C0.35,-0.105 0.36,-0.122 0.36,-0.145C0.36,-0.162 0.352,-0.174 0.337,-0.182C0.322,-0.191 0.292,-0.199 0.247,-0.208L0.195,-0.219C0.143,-0.23 0.105,-0.248 0.081,-0.273C0.057,-0.298 0.045,-0.331 0.045,-0.37C0.045,-0.402 0.054,-0.429 0.072,-0.452C0.089,-0.475 0.112,-0.492 0.14,-0.503C0.167,-0.514 0.196,-0.52 0.225,-0.52C0.274,-0.52 0.316,-0.51 0.349,-0.491Z" style="fill-rule:nonzero;"/> </g>
</g> </svg>
</g> </button>
</svg>
</button> <button value="zerostyle" title="zero style">
</fieldset> <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;">
<fieldset class="toggle" data-group="rendering"> <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>
<button value="vector" title="vector"> <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 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;"> </svg>
<g transform="matrix(1.80339,0,0,1.80339,-7.18367,2.87903)"> <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="matrix(12,0,0,12,4.2929,4.38784)"> <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>
<path d="M0.128,-0.476L0.251,-0.208L0.374,-0.476L0.498,-0.476L0.25,0.033L0.005,-0.476L0.128,-0.476Z" style="fill-rule:nonzero;"/> <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"/>
</g> </svg>
</g> <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;">
</svg> <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>
</button> <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"/>
<button value="bitmap" title="bitmap"> </svg>
<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;"> </button>
<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;">
<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;"/>
</g>
<g transform="matrix(12,0,0,12,10.4521,5.29647)">
<path d="M0.393,-0.318L0.393,-0.309L0.082,-0.165L0.082,-0.013L0.537,-0.254L0.537,-0.373L0.082,-0.615L0.082,-0.462L0.393,-0.318Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
</button> <button value="rendering" title="rendering">
<button value="yes" title="ligatures"> <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;">
<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="matrix(1.80339,0,0,1.80339,-7.18367,2.87903)">
<g> <g transform="matrix(12,0,0,12,4.2929,4.38784)">
<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;"/> <path d="M0.128,-0.476L0.251,-0.208L0.374,-0.476L0.498,-0.476L0.25,0.033L0.005,-0.476L0.128,-0.476Z" style="fill-rule:nonzero;"/>
</g> </g>
</svg> </g>
</button> </svg>
</fieldset> <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;">
<fieldset> <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"/>
<select id="authors-list"> </svg>
<optgroup> </button>
<option value="all">All Authors</option>
</optgroup>
<optgroup class="other">
<!-- filled from json -->
</optgroup>
</select>
</fieldset>
<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">
<!-- filled from json -->
</div>
</section>
<section class="config">
<p>
<label for="size">Size</label>
<input onchange="setSize()" type="number" id="size" value="16" min="1" max="32" step="1">
</p>
<p>
<label for="spacing">/</label>
<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
</p>
<p class="select">
<button class="nav-button" id="theme-previous">↑</button>
<button class="nav-button" id="theme-next">↓</button>
<label for="select-theme">Theme</label>
<select onchange="selectTheme()" id="select-theme">
<option>3024-day</option>
<option>3024-night</option>
<option>abcdef</option>
<option>ambiance</option>
<option>base16-dark</option>
<option>base16-light</option>
<option>bespin</option>
<option>blackboard</option>
<option>cobalt</option>
<option>colorforth</option>
<option>darcula</option>
<option>dracula</option>
<option>duotone-dark</option>
<option>duotone-light</option>
<option>erlang-dark</option>
<option>gruvbox-dark</option>
<option>hopscotch</option>
<option>isotope</option>
<option>lesser-dark</option>
<option>liquibyte</option>
<option>lucario</option>
<option>material</option>
<option>mbo</option>
<option>mdn-like</option>
<option>midnight</option>
<option selected>monokai</option>
<option>neo</option>
<option>night</option>
<option>nord</option>
<option>oceanic-next</option>
<option>paraiso-dark</option>
<option>paraiso-light</option>
<option>pastel-on-dark</option>
<option>railscasts</option>
<option>rubyblue</option>
<option>seti</option>
<option>shadowfox</option>
<option>solarized light</option>
<option>solarized dark</option>
<option>the-matrix</option>
<option>tomorrow-night-bright</option>
<option>tomorrow-night-eighties</option>
<option>twilight</option>
<option>vibrant-ink</option>
<option>xq-dark</option>
<option>yeti</option>
</select>
</p>
<p class="select">
<label for="select-language">Language</label>
<select onchange="selectLanguage()" id="select-language">
<option>None</option>
<option selected="">JavaScript</option>
<option value="clike">C (-like)</option>
<option>CSS</option>
<option>Go</option>
<option>Haskell</option>
<option value="commonlisp">Common Lisp</option>
<option>Clojure</option>
<option>PHP</option>
<option>Perl</option>
<option>Python</option>
<option>R</option>
<option>Ruby</option>
<option>Shell</option>
<option>Swift</option>
<option>XML</option>
</select>
</p>
</section>
<footer> <button value="liga" title="ligatures">
<h1> <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;">
<a href="https://programmingfonts.tumblr.com">Programming Fonts</a> <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;"/>
</g>
<g transform="matrix(12,0,0,12,10.4521,5.29647)">
<path d="M0.393,-0.318L0.393,-0.309L0.082,-0.165L0.082,-0.013L0.537,-0.254L0.537,-0.373L0.082,-0.615L0.082,-0.462L0.393,-0.318Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
</button>
</fieldset>
<fieldset>
<select id="authors-list">
<optgroup>
<option value="all">All Authors</option>
</optgroup>
<optgroup class="other">
<!-- filled from json -->
</optgroup>
</select>
</fieldset>
<fieldset>
<input type="text" id="name-search" placeholder="Search">
</fieldset>
</section>
<section class="select-list" tabindex="0">
<div id="select-font">
<!-- filled from json -->
</div>
</section>
<section class="config">
<p>
<label for="size">Size</label>
<input onchange="setSize()" type="number" id="size" value="16" min="1" max="32" step="1">
</p>
<p>
<label for="spacing">/</label>
<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
</p>
<p class="select">
<button class="nav-button" id="theme-previous">↑</button>
<button class="nav-button" id="theme-next">↓</button>
<label for="select-theme">Theme</label>
<select onchange="selectTheme()" id="select-theme">
<option>3024-day</option>
<option>3024-night</option>
<option>abcdef</option>
<option>ambiance</option>
<option>base16-dark</option>
<option>base16-light</option>
<option>bespin</option>
<option>blackboard</option>
<option>cobalt</option>
<option>colorforth</option>
<option>darcula</option>
<option>dracula</option>
<option>duotone-dark</option>
<option>duotone-light</option>
<option>erlang-dark</option>
<option>gruvbox-dark</option>
<option>hopscotch</option>
<option>isotope</option>
<option>lesser-dark</option>
<option>liquibyte</option>
<option>lucario</option>
<option>material</option>
<option>mbo</option>
<option>mdn-like</option>
<option>midnight</option>
<option selected>monokai</option>
<option>neo</option>
<option>night</option>
<option>nord</option>
<option>oceanic-next</option>
<option>paraiso-dark</option>
<option>paraiso-light</option>
<option>pastel-on-dark</option>
<option>railscasts</option>
<option>rubyblue</option>
<option>seti</option>
<option>shadowfox</option>
<option>solarized light</option>
<option>solarized dark</option>
<option>the-matrix</option>
<option>tomorrow-night-bright</option>
<option>tomorrow-night-eighties</option>
<option>twilight</option>
<option>vibrant-ink</option>
<option>xq-dark</option>
<option>yeti</option>
</select>
</p>
<p class="select">
<label for="select-language">Language</label>
<select onchange="selectLanguage()" id="select-language">
<option>None</option>
<option selected="">JavaScript</option>
<option value="clike">C (-like)</option>
<option>CSS</option>
<option>Go</option>
<option>Haskell</option>
<option value="commonlisp">Common Lisp</option>
<option>Clojure</option>
<option>PHP</option>
<option>Perl</option>
<option>Python</option>
<option>R</option>
<option>Ruby</option>
<option>Shell</option>
<option>Swift</option>
<option>XML</option>
</select>
</p>
</section>
<a class="logo" href="https://programmingfonts.tumblr.com"> <footer>
<svg alt="tumblr logo" width="9px" height="15px" viewBox="0 0 9 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <h1>
<path d="M6.16676166,14 L5.95411471,14 C2.45979282,14 1.69024243,11.4348475 1.70117563,10 L1.70117563,6.52631579 L0.265808692,6.52631579 C0.119006605,6.52631579 -8.8817842e-16,6.40180889 -8.8817842e-16,6.24235454 L-8.8817842e-16,4.21052632 C-8.8817842e-16,4.05367375 0.132891436,3.86896458 0.425293908,3.78947368 C2.15160506,3.16783805 2.72233881,1.60568509 2.7644104,0.421052632 C2.77170098,0.215767854 2.76748611,0.268658642 2.76748611,0.268658642 C2.76578744,0.120282571 2.88319366,0 3.03957914,0 L5.25365206,0 C5.40562356,0 5.5288208,0.119077984 5.5288208,0.280833997 L5.5288208,3.57894737 L8.23113995,3.57894737 C8.38287367,3.57894737 8.50587815,3.70559211 8.50587815,3.85094572 L8.50587815,6.25431743 C8.50587815,6.40453798 8.38221964,6.52631579 8.22828381,6.52631579 L5.25,6.52631579 L5.25,9.57894737 C5.64320148,10.5739331 6.29010788,10.8411532 6.59205557,10.8421053 C7.07296368,10.8320778 7.45037861,10.7172508 7.65529034,10.6315789 C7.77989081,10.587074 7.93265029,10.5783691 8.08058425,10.6315789 C8.2285182,10.6847888 8.27180297,10.7924676 8.2932312,10.8421053 L8.93117206,12.7368421 C9.0447897,13.0325221 8.99818233,13.1033871 8.93117206,13.1578947 C8.35626878,13.6192174 7.17773158,13.9818652 6.16676166,14 Z" id="logo"></path> <a href="https://programmingfonts.tumblr.com">Programming Fonts</a>
</svg>
</a>
<a class="logo" href="https://github.com/braver/programmingfonts"> <a class="logo" href="https://programmingfonts.tumblr.com">
<svg alt="github logo" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16"> <svg alt="tumblr logo" width="9px" height="15px" viewBox="0 0 9 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path> <path d="M6.16676166,14 L5.95411471,14 C2.45979282,14 1.69024243,11.4348475 1.70117563,10 L1.70117563,6.52631579 L0.265808692,6.52631579 C0.119006605,6.52631579 -8.8817842e-16,6.40180889 -8.8817842e-16,6.24235454 L-8.8817842e-16,4.21052632 C-8.8817842e-16,4.05367375 0.132891436,3.86896458 0.425293908,3.78947368 C2.15160506,3.16783805 2.72233881,1.60568509 2.7644104,0.421052632 C2.77170098,0.215767854 2.76748611,0.268658642 2.76748611,0.268658642 C2.76578744,0.120282571 2.88319366,0 3.03957914,0 L5.25365206,0 C5.40562356,0 5.5288208,0.119077984 5.5288208,0.280833997 L5.5288208,3.57894737 L8.23113995,3.57894737 C8.38287367,3.57894737 8.50587815,3.70559211 8.50587815,3.85094572 L8.50587815,6.25431743 C8.50587815,6.40453798 8.38221964,6.52631579 8.22828381,6.52631579 L5.25,6.52631579 L5.25,9.57894737 C5.64320148,10.5739331 6.29010788,10.8411532 6.59205557,10.8421053 C7.07296368,10.8320778 7.45037861,10.7172508 7.65529034,10.6315789 C7.77989081,10.587074 7.93265029,10.5783691 8.08058425,10.6315789 C8.2285182,10.6847888 8.27180297,10.7924676 8.2932312,10.8421053 L8.93117206,12.7368421 C9.0447897,13.0325221 8.99818233,13.1033871 8.93117206,13.1578947 C8.35626878,13.6192174 7.17773158,13.9818652 6.16676166,14 Z" id="logo"></path>
</svg> </svg>
</a> </a>
</h1>
<p class="subtitle">Test drive all the programming fonts!</p> <a class="logo" href="https://github.com/braver/programmingfonts">
<svg alt="github logo" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
</h1>
<p class="subtitle">Test drive all the programming fonts!</p>
</footer> </footer>
</main> </main>
</div> </div>
<form> <form>
<textarea id="code" name="code"> <textarea id="code" name="code">
@ -311,29 +296,29 @@
console.log "oO08 iIlL1 g9qCGQ ~-+=>"; console.log "oO08 iIlL1 g9qCGQ ~-+=>";
function updateGutters(cm) { function updateGutters(cm) {
var gutters = cm.display.gutters, var gutters = cm.display.gutters,
__specs = cm.options.gutters; __specs = cm.options.gutters;
removeChildren(gutters); removeChildren(gutters);
for (var i = 0; i < specs.length; ++i) { for (var i = 0; i < specs.length; ++i) {
var gutterClass = __specs[i]; var gutterClass = __specs[i];
var gElt = gutters.appendChild( var gElt = gutters.appendChild(
elt( elt(
"div", "div",
null, null,
"CodeMirror-gutter " + gutterClass "CodeMirror-gutter " + gutterClass
) )
); );
if (gutterClass == "CodeMirror-linenumbers") { if (gutterClass == "CodeMirror-linenumbers") {
cm.display.lineGutter = gElt; cm.display.lineGutter = gElt;
gElt.style.width = (cm.display.lineNumWidth || 1) + "px"; gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
} }
} }
gutters.style.display = i ? "" : "none"; gutters.style.display = i ? "" : "none";
updateGutterSpace(cm); updateGutterSpace(cm);
return false; return false;
} }
</textarea> </textarea>

115
index.js
View File

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