Redesigned the testdrive page. It will be deployed to the "specimen" in be5invis.github.io/Iosevka soon.

glyphs/cyrillic-basic.patel

@@ -21,7 +21,6 @@ alias 'cyrTe' 0x422 'T'
 alias 'cyrte.upright' null 'tau'
 alias 'cyrte.italic' null 'm'
 alias 'Ef' 0x424 'Phi'
-alias 'cyref' 0x444 'varphi'
 alias 'cyrHa' 0x425 'X'
 alias 'cyrha' 0x445 'x'
 alias 'cyru' 0x443 'y'
@@ -172,6 +171,18 @@ create-glyph 'cyrka' : glyph-construction
 	if SLAB : begin
 		include : CenterBottomSerif (SB + HALFSTROKE * CORRECTION_HX) 0 JUT
 		include : CenterTopSerif (SB + HALFSTROKE * CORRECTION_HX) XH JUT
+create-glyph 'cyref' : glyph-construction
+	assign-unicode 0x444
+	include ifMarks
+	local y1 0
+	local y2 XH
+	include : VBar MIDDLE DESCENDER (y1 + HALFSTROKE)
+	include : smallo y2 y1 SB RIGHTSB MVERTSTROKE nothing nothing nothing true
+	include : VBar MIDDLE y1 y2 MVERTSTROKE
+	include : VBar MIDDLE (y2 - HALFSTROKE) CAP
+	if SLAB : begin
+		include : tagged 'serifMT' : CenterTopSerif MIDDLE CAP JUT
+		include : tagged 'serifMB' : CenterBottomSerif MIDDLE DESCENDER JUT
 
 create-glyph 'cyrve.italic' : glyph-construction
 	include eMarks

glyphs/greek.patel

@@ -154,28 +154,38 @@ create-glyph 'pi' : glyph-construction
 create-glyph 'Phi' : glyph-construction
 	assign-unicode 0x3A6
 	include capitalMarks
-	local y1 : CAP * 0.125
+	local y1 : CAP * [if SLAB 0.175 0.125]
-	local y2 : CAP * 0.875
+	local y2 : CAP * [if SLAB 0.825 0.875]
 	include : VBar MIDDLE 0 (y1 + HALFSTROKE)
 	include : smallo y2 y1 SB RIGHTSB MVERTSTROKE SMOOTHA SMOOTHB
 	include : VBar MIDDLE y1 y2 MVERTSTROKE
 	include : VBar MIDDLE (y2 - HALFSTROKE) CAP
+	
+	if SLAB : begin
+		include : tagged 'serifMT' : CenterTopSerif MIDDLE CAP JUT
+		include : tagged 'serifMB' : CenterBottomSerif MIDDLE 0 JUT
 
 create-glyph 'Psi' : glyph-construction
 	assign-unicode 0x3A8
 	include capitalMarks
-	local y : CAP * 0.25
+	local y : CAP * 0.2
+	local y2 : CAP * 0.8
 	include : dispiro
 		widths.lhs MVERTSTROKE
-		flat SB CAP [heading DOWNWARD]
+		flat SB y2 [heading DOWNWARD]
 		curl SB (y + SMOOTHB)
 		arcvh
 		g4   MIDDLE y [heading RIGHTWARD]
 		archv
 		flat RIGHTSB (y + SMOOTHA)
-		curl RIGHTSB CAP [heading UPWARD]
+		curl RIGHTSB y2 [heading UPWARD]
 	include : VBar MIDDLE y CAP MVERTSTROKE
 	include : VBar MIDDLE 0 (y + HALFSTROKE)
+	if SLAB : begin
+		include : tagged 'serifLT' : LeftwardTopSerif SB y2 SIDEJUT
+		include : tagged 'serifRT' : RightwardTopSerif RIGHTSB y2 SIDEJUT
+		include : tagged 'serifMT' : CenterTopSerif MIDDLE CAP JUT
+		include : tagged 'serifMB' : CenterBottomSerif MIDDLE 0 JUT
 
 define [OmegaShape top sma smb ssma ssmb] : glyph-construction
 	local fine : STROKE * 0.4
@@ -610,6 +620,11 @@ create-glyph 'psi' : glyph-construction
 		curl RIGHTSB XH [heading UPWARD]
 	include : VBar MIDDLE 0 CAP fine
 	include : VBar MIDDLE DESCENDER HALFSTROKE
+	if SLAB : begin
+		include : LeftwardTopSerif SB XH SIDEJUT
+		tag-contour 'serifLT'
+		if (para.italicangle === 0) : begin
+			include : tagged 'serifRT' : RightwardTopSerif RIGHTSB XH SIDEJUT
 
 create-glyph 'chi' : glyph-construction
 	set-width WIDTH

glyphs/latin-extend-decorated.patel

@@ -458,6 +458,7 @@ create-glyph 'hltail' : glyph-construction
 	assign-unicode 0xA727
 	include pMarks
 	include glyphs.h
+	eject-contour 'serifRB'
 	include : VerticalHook (RIGHTSB - HALFSTROKE * CORRECTION_HX) 0 (-HOOKX) HOOK
 
 create-glyph 'hookturnh' : glyph-construction

makefile

@@ -53,8 +53,6 @@ test-cc-slab : fonts-cc-slab
 	@$(MAKE) -s -f onegroup.mk test $(PARAM_CC_SLAB)
 
 
-
-
 $(SUPPORT_FILES) :
 	patel-c --strict $< -o $@
 

onegroup.mk

@@ -63,8 +63,8 @@ $(PASS3) : $(OBJDIR)/.pass3-%.ttf : pass3-features.py $(OBJDIR)/.pass2-%.ttf $(O
 	fontforge -quiet -script $^ $@ $(TARGETUPM)
 $(PASS4) : $(OBJDIR)/.pass4-%.ttf : pass4-finalize.js $(OBJDIR)/.pass3-%.ttf
 	@$(NODE) $^ $@.a.ttf
-	@ttx -o $@.a.ttx $@.a.ttf
+	@ttx -q -o $@.a.ttx $@.a.ttf
-	@ttx -o $@ $@.a.ttx
+	@ttx -q -o $@ $@.a.ttx
 	@rm $@.a.ttf $@.a.ttx
 $(TARGETS) : $(OBJDIR)/%.ttf : $(OBJDIR)/.pass4-%.ttf
 	ttfautohint $< $@
@@ -105,7 +105,8 @@ $(ARCHIVEDIR)/$(PREFIX).tar.bz2 : $(TARGETS)
 $(ARCHIVEDIR)/$(PREFIX).zip : $(TARGETS)
 	cd $(OBJDIR) && 7z a -tzip ../$@ $(subst $(OBJDIR)/,,$^)
 archives : $(ARCHIVEDIR)/$(PREFIX).tar.bz2 $(ARCHIVEDIR)/$(PREFIX).zip
-release : archives $(RELEASES) $(PAGESTTF) $(PAGESWOFF) $(PAGESMAPS)
+pages : $(PAGESTTF) $(PAGESWOFF) $(PAGESMAPS)
+release : $(RELEASES) archives pages
 
 # testdrive
 TESTTTF = $(subst $(OBJDIR)/,testdrive/,$(TARGETS))

testdrive/index.html

@@ -46,6 +46,46 @@
 			font-weight: bold;
 			src: url('iosevka-slab-bolditalic.woff') format('woff'), url('iosevka-slab-bolditalic.ttf') format('truetype');
 		}
+		@font-face {
+			font-family: IosevkaCCWEB;
+			src: url('iosevkacc-regular.woff') format('woff'), url('iosevkacc-regular.ttf') format('truetype');
+		}
+		@font-face {
+			font-family: IosevkaCCWEB;
+			font-style: italic;
+			src: url('iosevkacc-italic.woff') format('woff'), url('iosevkacc-italic.ttf') format('truetype');
+		}
+		@font-face {
+			font-family: IosevkaCCWEB;
+			font-weight: bold;
+			src: url('iosevkacc-bold.woff') format('woff'), url('iosevkacc-bold.ttf') format('truetype');
+		}
+		@font-face {
+			font-family: IosevkaCCWEB;
+			font-style: italic;
+			font-weight: bold;
+			src: url('iosevkacc-bolditalic.woff') format('woff'), url('iosevkacc-bolditalic.ttf') format('truetype');
+		}
+		@font-face {
+			font-family: IosevkaCCSlabWEB;
+			src: url('iosevkacc-slab-regular.woff') format('woff'), url('iosevkacc-slab-regular.ttf') format('truetype');
+		}
+		@font-face {
+			font-family: IosevkaCCSlabWEB;
+			font-style: italic;
+			src: url('iosevkacc-slab-italic.woff') format('woff'), url('iosevkacc-slab-italic.ttf') format('truetype');
+		}
+		@font-face {
+			font-family: IosevkaCCSlabWEB;
+			font-weight: bold;
+			src: url('iosevkacc-slab-bold.woff') format('woff'), url('iosevkacc-slab-bold.ttf') format('truetype');
+		}
+		@font-face {
+			font-family: IosevkaCCSlabWEB;
+			font-style: italic;
+			font-weight: bold;
+			src: url('iosevkacc-slab-bolditalic.woff') format('woff'), url('iosevkacc-slab-bolditalic.ttf') format('truetype');
+		}
 		a {
 			color: black;
 			background-image: linear-gradient(white 50%, #888 50%);
@@ -63,7 +103,7 @@
 			margin: 0 auto;
 			padding: 4rem 0;
 		}
-		p, pre, .show, .show samp, #links {
+		.show, .show samp, .pp {
 			font-family: "IosevkaWEB", monospace;
 			line-height: 1.5;
 			
@@ -72,46 +112,43 @@
 			-webkit-font-feature-settings: "locl";
 			font-feature-settings: "locl";
 		}
-		.cc, .cc samp { font-family: "IosevkaSlabWEB", monospace!important }
+		.cc, .cc samp { font-family: "IosevkaCCWEB", monospace!important }
+		.slab, .slab samp { font-family: "IosevkaSlabWEB", monospace!important }
+		.cc.slab, .cc.slab samp { font-family: "IosevkaCCSlabWEB", monospace!important }
 		p {
 			margin: 0.5rem 0;
 		}
-		div.show {
+		.show {
 			font-size: 2rem;
 			width: 68rem;
 		}
-		div.show.bold { font-weight: bold }
+		.bold { font-weight: bold }
-		div.show.italic { font-style: italic }
+		.italic { font-style: italic }
-		div.block {
+		.show table.block {
-			display: flex;
 			width: 68rem;
-			flex-wrap: wrap;
+			border: none;
-			border-top: 1px dotted #ccc;
+			table-layout: fixed;
-			margin-bottom: -1px;
+			border-spacing: 0;
+			border-collapse: collapse;
 		}
-		.show div.block span {
+		.show table.block td {
-			display: block;
 			width: 2rem;
 			height: 2rem;
 			line-height: 2rem;
 			padding: 1rem;
-			flex: none;
 			text-align: center;
 			position: relative;
 			cursor: default;
+			border: none;
 		}
-		.show div.block span.indicator {
+		.show table.block td.missing {
-			font-size: 1rem;
-		}
-		.show div.block span.missing {
 			opacity: 0.1
 		}
-		.show div.block span.present:before {
+		.show table.block td.present:before {
-			display: block;
 			content: attr(title);
 			position: absolute;
 			font-size: 0.33em;
-			top: -1em;
+			top: -1.25em;
 			left: 0.125em;
 			right: 0.125em;
 			text-align: center;
@@ -122,92 +159,129 @@
 			text-overflow: ellipsis;
 			z-index: -1;
 		}
-		.show div.block span > s {
+		.show table.block td > d {
-			display: block;
-			text-decoration: none;
-			position: relative;
-		}
-		.show div.block span > s > t {
-			display: inline-block;
-			width: 1em;
-			margin-left: -0.25em;
-			margin-right: -0.25em;
-			white-space: nowrap;
-		}
-		.show div.block span > s > d {
 			position: absolute;
 			z-index: 2;
 			color: #ddd;
 			text-shadow: 0 0 2px white;
 		}
-		.show div.block span.present s:before {
+		.show table.block td.indicator > n {
+			display: block;
+			margin-top: -2rem;
+			margin-left: -0.5em;
+			font-size: 1rem;
+		}
+		.show table.block td.indicator > s {
+			display: block;
+			width : 0;
+			height: 2rem;
+			color: white;
+		}
+		.show table.block td.indicator > s:after {
 			display: inline-block;
 			content: '';
 			position: relative;
-			top: -1px;
+			top: -1em;
-			left: -0.75em;
+			left: 3rem;
-			width: 2em;
+			width: 64rem;
 			height: calc(0.52em - 2px);
 			margin-right: -2em;
 			border-top: 1px solid rgba(0, 0, 255, 0.1);
 			border-bottom: 1px solid rgba(255, 0, 0, 0.1);
 		}
-		.show .smp {
+		.show .lipsum {
 			font-size: 1rem;
 			margin: 1rem 0;
 		}
-		.show samp {
+		#picker {
-			display: flex;
-			font-size: 1rem;
-			white-space: pre;
-		}
-		.show samp > span.langname {
-			display: inline-block;
-			background: #eee;
-			padding: 0.5em;
-			flex: none;
-			font-weight: normal;
-			font-style: normal;
-			min-width: 12em;
-			text-align: right;
-		}
-		.show samp > span.sentence {
-			flex: 1;
-			padding: 0.5em;
-		}
-		
-		#links {
-			position: fixed;
-			z-index: 99;
-			top: 0;
-			width: 68rem;
-			display: flex;
-			border-bottom: 2px solid black;
-			background: white;
-		}
-		#links a {
 			display: block;
+			position: fixed;
+			z-index: 9999;
+			top: 0;
+			left: 50%;
+			font-size: 3rem;
+			height: 4rem;
+			margin-left: -34.5rem;
+			width: 69rem;
+		}
+		#picker .menu {
+			display: none;
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 4rem;
+			background: #ddd;
+			font-size: 1.25rem;
+		}
+		#picker:hover .menu{
+			display: block;
+		}
+		#picker:hover .menu .group {
+			display: flex;
+		}
+		#picker:hover .menu .group a {
+			display: block;
+			padding: 0.5rem;
 			flex: 1;
-			padding: 1rem 0;
+			min-width: 10rem;
-			text-align: center;
+			background: #eee;
-			text-decoration: none;
-			color: black;
-			background: none;
 			text-shadow: none;
 		}
-		#links a.active {
+		#picker:hover .menu .group a:hover {
+			background: #ddd;
+		}
+		#picker .title {
 			background: black;
 			color: white;
+			display: block;
+			line-height: 3rem;
+			height: 3rem;
+			padding: 0.5rem;
+			position: relative;
+			cursor: pointer;
 		}
+		#picker .title .icon {
+			position: absolute;
+			right: 0.75rem;
+			top: 0.75rem;
+			font-size: 2.5rem;
+		}
+		pre, code, pre span, code span {
+			font-size: 1rem;
+			font-family: inherit;
+		}
+		.keyword { color: blue }
+		.string { color:green }
+		.qualifier { color: #419 }
+		.comment { color: #999 }
 	</style>
-	<script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
+	<script src="https://cdn.bootcss.com/vue/1.0.7/vue.min.js"></script>
-	<script>
+	<script src="https://cdn.bootcss.com/vue-resource/0.1.17/vue-resource.min.js"></script>
-	if (!window.Zepto) document.write('<script src="zepto.min.js">\x3C/script>')
+	<link href="https://cdn.bootcss.com/simple-line-icons/2.2.3/css/simple-line-icons.css" rel="stylesheet">
-	</script>
-	
 </html>
 <body>
-	<div id="links"></div>
+	<div id="picker">
+		<span class="title pp {{current.cls}}">{{current.display}} Specimen<span class="icon icon-menu"></span></span>
+		<div class="menu">
+			<div class="group" v-for="group in fonts">
+				<a href="#" v-for="item in group" v-on:click.prevent="choose(item)" class="pp {{item.cls}} {{item === current ? 'active' : ''}}">{{item.display}}</a>
+			</div>
+		</div>
+	</div>
+	<div id="display" class="show {{currentFont.cls}}">
+		<p class="waterfall" v-for="size in waterfall" style="font-size:{{size / 14}}rem">The quick brown fox jumps over the lazy dog.</p>
+		<p class="lipsum" v-for="item in lipsums">{{item}}</p>
+		<pre><code class=patel><span class=keyword>define</span> samples : <span class=keyword>object</span><template v-for="sample in samples">
+    {<span class=qualifier>.lang</span> <span class=string>'{{sample.lang}}'</span>{{sample.spaces}}<span class=qualifier>.sample</span> <span class=string lang="{{sample.code}}">'{{{sample.sample}}}'</span>}<span class=comment>{{sample.comment}}</span></template></code></pre>
+		<table class="block">
+			<tr class="row" v-for="row in sampleRows">
+				<td class="indicator"><s>x</s><n>U+{{row.startIndex}}</n></td>
+				<template v-for="char in row.chars">
+					<td class="{{char.name ? 'present' : 'missing'}}" title="{{char.name}}"><d v-if="char.isMark">&#x25CC;</d>{{char.char}}</td>
+				</template>
+			</tr>
+		</table>
+	</div>
 	<script>
 		function padzero(s, n){
 			while(s.length < n) s = '0' + s;
@@ -215,26 +289,46 @@
 		}
 		var BLOCKSIZE = 16 * 4;
 		var fonts = [
-			{name: 'iosevka-slab-regular', cls: 'cc', display: 'SLAB-Regular'},
+			[
-			{name: 'iosevka-slab-bold', cls: 'cc bold', display: 'SLAB-Bold'},
+				{name: 'iosevka-regular', cls: '', display: 'Iosevka'},
-			{name: 'iosevka-slab-italic', cls:'cc italic', display: 'SLAB-Italic'},
+				{name: 'iosevka-bold', cls: 'bold', display: 'Iosevka Bold'},
-			{name: 'iosevka-slab-bolditalic', cls:'cc bold italic', display: 'SLAB-Bolditalic'}
+				{name: 'iosevka-italic', cls:'italic', display: 'Iosevka Italic'},
+				{name: 'iosevka-bolditalic', cls:'bold italic', display: 'Iosevka Bold Italic'}
+			],
+			[
+				{name: 'iosevka-slab-regular', cls: 'slab', display: 'Iosevka Slab'},
+				{name: 'iosevka-slab-bold', cls: 'slab bold', display: 'Iosevka Slab Bold'},
+				{name: 'iosevka-slab-italic', cls:'slab italic', display: 'Iosevka Slab Italic'},
+				{name: 'iosevka-slab-bolditalic', cls:'slab bold italic', display: 'Iosevka Slab Bold Italic'}
+			],
+			[
+				{name: 'iosevkacc-regular', cls: 'cc', display: 'IosevkaCC'},
+				{name: 'iosevkacc-bold', cls: 'cc bold', display: 'IosevkaCC Bold'},
+				{name: 'iosevkacc-italic', cls:'cc italic', display: 'IosevkaCC Italic'},
+				{name: 'iosevkacc-bolditalic', cls:'cc bold italic', display: 'IosevkaCC Bold Italic'}
+			],
+			[
+				{name: 'iosevkacc-slab-regular', cls: 'cc slab', display: 'IosevkaCC Slab'},
+				{name: 'iosevkacc-slab-bold', cls: 'cc slab bold', display: 'IosevkaCC Slab Bold'},
+				{name: 'iosevkacc-slab-italic', cls:'cc slab italic', display: 'IosevkaCC Slab Italic'},
+				{name: 'iosevkacc-slab-bolditalic', cls:'cc slab bold italic', display: 'IosevkaCC Slab Bold Italic'}
+			]
 		];
-		var lipsum = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper ipsum quam, at molestie libero euismod vitae. Etiam vehicula felis mi, et ultricies libero consequat at. Donec consequat, nunc id elementum tempor, lectus orci vulputate leo, eget lobortis lectus nulla sed orci. Donec in dolor non orci aliquet gravida. Nulla volutpat magna et nulla pretium, quis consequat nibh euismod. Suspendisse eget metus enim. Fusce vulputate scelerisque eros et consequat. Quisque dapibus accumsan augue, et semper lectus vehicula sit amet. Ut ornare venenatis tortor, non gravida tellus mattis interdum. In hac habitasse platea dictumst. Donec interdum commodo ex eu tincidunt. Curabitur non fermentum enim. Proin luctus orci ut commodo auctor. Pellentesque accumsan id sem eu semper. Sed non pharetra nibh. Vivamus mattis luctus arcu, a rutrum dui venenatis sit amet. aja ojo ojoined',
+		var lipsums = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper ipsum quam, at molestie libero euismod vitae. Etiam vehicula felis mi, et ultricies libero consequat at. Donec consequat, nunc id elementum tempor, lectus orci vulputate leo, eget lobortis lectus nulla sed orci. Donec in dolor non orci aliquet gravida. Nulla volutpat magna et nulla pretium, quis consequat nibh euismod. Suspendisse eget metus enim. Fusce vulputate scelerisque eros et consequat. Quisque dapibus accumsan augue, et semper lectus vehicula sit amet. Ut ornare venenatis tortor, non gravida tellus mattis interdum. In hac habitasse platea dictumst. Donec interdum commodo ex eu tincidunt. Curabitur non fermentum enim. Proin luctus orci ut commodo auctor. Pellentesque accumsan id sem eu semper. Sed non pharetra nibh. Vivamus mattis luctus arcu, a rutrum dui venenatis sit amet. aja ojo ojoined',
 		'Troh tper es sos, bo slisxil spôrtjư uzx, cxital posteluf hrvatzem ili bi. Tenis lubôvijm roksăfnâvơi da din. Bo cxtir dajte lubim onă, dev ti silăju môrkva vecxer. Din om leto glfădju problêm. Sâm slơzxju răzumim vnimanie na, vsê ăzia kưdrju prôgram nô. Slôzxju zavoduf nơ den, hcê licơ sxkol toplju so. Vi knigis sidili polozxij bil, ne polnfju ovơcxjư dla, es ônâ mamâ pisajut mălôstis.',
 		'Жят эним либриз аюдиам ад. Мыа ан одео нонумй опортэры, но дуо вэре эчжынт ыпикурэи. Ан вим алёквюам пыртенакж. Эжт но оратио факэтэ, дольорэ индоктум дыфинитеоным эжт ты.',
 		'Κυεμ ορατιο δολορες υσυ εα, θε φιξ βωνορυμ σωνσεπθαμ, αδχυς δεφινιθιονεμ ιν εσθ. Υθ εσε ινιμισυς περ, περ ποσθυλανθ ινστρυσθιορ εα. Ναμ μυνδι θαθιων φερθερεμ νο, εσε ινερμις περφεσθο ετ μεα. Θε νες θωτα ρεφορμιδανς, ινερμις φασιλισις ετ σεα. Μελ λυδυς ταντας δελενιτι υθ, φις λιβερ σονγυε ηομερω ατ. Σεδ θριθανι συαφιθαθε γυβεργρεν ευ, ινθελλεγαμ συσιπιαντυρ δεφινιθιονεμ εα υσυ, ει κυο θαλε φερι ινθελλεγαμ. Φερο ασεντιορ θε μει, μαιορυμ γυβεργρεν αδ φιξ.'];
 		var sampleSentences = [
 			{code: 'en', lang: 'English', sample: 'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'},
-			{lang: 'Powerline', sample: '<span style="background:black;color:white"> NORMAL </span><span style="background:#ccc;color:black;font-style:normal">\uE0B0</span><span style="background:#ccc;color:black"> <span style="font-style:normal">\uE0A0</span> master <span style="font-style:normal">\uE0B1</span> glyphs/powerline.patel </span><span style="background:#eee;color:#ccc;font-style:normal">\uE0B0</span><span style="background:#eee;color:#555">      dos <span style="font-style:normal">\uE0B3</span> utf-8 <span style="font-style:normal">\uE0B3</span> PatEL </span><span style="background:#eee;color:#ccc;font-style:normal">\uE0B2</span><span style="background:#ccc"> 2% </span><span style="background:#ccc;color:black;font-style:normal">\uE0B2</span><span style="color:white;background:black"> \uE0A1 1:1 </span>'},
+			{lang: 'Powerline', sample: '<span style="background:black;color:white"> NORMAL </span><span style="background:#ccc;color:black;font-style:normal">\uE0B0</span><span style="background:#ccc;color:black"> <span style="font-style:normal">\uE0A0</span> master <span style="font-style:normal">\uE0B1</span> glyphs/powerline.patel </span><span style="background:#eee;color:#ccc;font-style:normal">\uE0B0</span><span style="background:#eee;color:#555">      dos <span style="font-style:normal">\uE0B3</span> utf-8 <span style="font-style:normal">\uE0B3</span> PatEL </span><span style="background:#eee;color:#ccc;font-style:normal">\uE0B2</span><span style="background:#ccc;color:black"> 2% </span><span style="background:#ccc;color:black;font-style:normal">\uE0B2</span><span style="color:white;background:black"> \uE0A1 1:1 </span>'},
 			{lang: 'IPA', sample: '[ɢʷɯʔ.nas.doːŋ.kʰlja] [ŋan.ȵʑi̯wo.ɕi̯uĕn.ɣwa]'},
 			{code: 'bg', lang: 'Bulgarian', sample: 'Я, пазачът Вальо уж бди, а скришом хапва кюфтенца зад щайгите.'},
 			{code: 'cs', lang: 'Czech', sample: 'Nechť již hříšné saxofony ďáblů rozezvučí síň úděsnými tóny waltzu, tanga a quickstepu.'},
 			{code: 'fi', lang: 'Finnish', sample: 'Charles Darwin jammaili Åken hevixylofonilla Qatarin yöpub Zeligissä.'},
-			{code: 'fr', lang: 'French', sample: 'Voix ambiguë d\'un cœur qui au zéphyr préfère les jattes de kiwi.'},
+			{code: 'fr', lang: 'French', sample: 'Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwi.'},
 			{code: 'de', lang: 'German', sample: 'Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.'},
-			{code: 'el', lang: 'Greek (monotonic)', sample: 'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός.'},
+			{code: 'el', lang: 'Greek', sample: 'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός.'},
-			{code: 'el', lang: 'Greek (polytonic)', sample: 'Ἄδμηθ\', ὁρᾷς γὰρ τἀμὰ πράγμαθ\' ὡς ἔχει, λέξαι θέλω σοι πρὶν θανεῖν ἃ βούλομαι. '},
+			{code: 'el', lang: 'Ancient Greek', sample: 'Ἄδμηθ’, ὁρᾷς γὰρ τἀμὰ πράγμαθ\' ὡς ἔχει, λέξαι θέλω σοι πρὶν θανεῖν ἃ βούλομαι. '},
 			{code: 'hu', lang: 'Hungarian', sample: 'Jó foxim és don Quijote húszwattos lámpánál ülve egy pár bűvös cipőt készít.'},
 			{code: 'is', lang: 'Icelandic', sample: 'Kæmi ný öxi hér, ykist þjófum nú bæði víl og ádrepa.'},
 			{code: 'ga', lang: 'Irish', sample: 'Ċuaiġ bé ṁórṡáċ le dlúṫspád fíorḟinn trí hata mo ḋea-ṗorcáin ḃig.'},
@@ -246,65 +340,76 @@
 			{code: 'pt', lang: 'Portuguese', sample: 'Luís argüia à Júlia que «brações, fé, chá, óxido, pôr, zângão» eram palavras do português.'},
 			{code: 'ro', lang: 'Romanian', sample: 'Înjurând pițigăiat, zoofobul comandă vexat whisky și tequila.'},
 			{code: 'ru', lang: 'Russian', sample: 'Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.'},
-			{code: 'sr', lang: 'Serbian', sample: 'Ајшо, лепото и чежњо, за љубав срца мога дођи у Хаџиће на кафу.'},
+			{code: 'sr', lang: 'Serbian', sample: 'Ајшо, лепото и чежњо, за љубав срца мога дођи у Хаџиће на кафу.', comment:' # Yes, we have Serbian variants!'},
 			{code: 'es', lang: 'Spainish', sample: 'Benjamín pidió una bebida de kiwi y fresa; Noé, sin vergüenza, la más exquisita champaña del menú.'},
 			{code: 'tr', lang: 'Turkish', sample: 'Pijamalı hasta yağız şoföre çabucak güvendi.'},
 			{code: 'uk', lang: 'Ukranian', sample: 'Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів!'}
 		]
 		
-		var links = [];
+		var display = new Vue({
-		function Click(j, c){
+			el: '#display',
-			return function(){
+			data: {
-				for(var k = 0; k < links.length; k++) if(k === j) {
+				charsHTML: '',
-					links[k].addClass('active')
+				lipsums: [], //lipsums,
-				} else {
+				samples: (function(ss){
-					links[k].removeClass('active')
+					var langlen = 0;
-				}
+					for(var j = 0; j < ss.length; j++){ if(ss[j].lang.length > langlen) langlen = ss[j].lang.length };
-				div[0].className = 'show ' + c;
+					for(var j = 0; j < ss.length; j++){ ss[j].spaces = new Array(langlen - ss[j].lang.length + 2).join(' ') };
-				return false;
+					return ss;
-			}
+				})(sampleSentences),
-		}
+				currentFont: fonts[0][0],
-		var div = $('<div>').addClass('show');
+				waterfall: [36, 28, 24, 20, 18, 16, 14, 12, 11, 10],
-		lipsum.forEach(function(s){
+				sampleRows: []
-			div.append($('<p>').addClass('smp').html(s))
+			},
-		});
+			ready: function(){
-		sampleSentences.forEach(function(record){
+				this.$http.get(this.currentFont.name + '.charmap', function(data){
-			var sample = $('<samp>').attr('lang', record.code || '').attr('xml:lang', record.code || '').append('<span class="langname">' + record.lang + '</span><span class="sentence">' + record.sample + '</span>');
+					var rows = [];
-			div.append(sample);
+					var row = null;
-		});
+					var uhash = [];
-		$.getJSON(fonts[0].name + '.charmap', function(data){
+					var whash = [];
-			var uhash = [];
+					for(var j = 0; j < data.length; j++) {
-			var whash = [];
+						var unicodes = data[j][1];
-			for(var j = 0; j < data.length; j++) {
+						if(unicodes && unicodes.length) for(var k = 0; k < unicodes.length; k++){
-				var unicodes = data[j][1];
+							uhash[unicodes[k]] = data[j][0].trim()
-				if(unicodes && unicodes.length) for(var k = 0; k < unicodes.length; k++){
+							whash[unicodes[k]] = data[j][2]
-					uhash[unicodes[k]] = data[j][0].trim()
+						}
-					whash[unicodes[k]] = data[j][2]
-				}
-			}
-			for(var block = 0; block < (65536 / BLOCKSIZE); block++) {
-				var blockdiv = $('<div>').addClass('block');
-				var hasGlyphInThisBlock = false;
-				for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) if(uhash[j]){
-						hasGlyphInThisBlock = true;
-				}
-				if(hasGlyphInThisBlock) {
-					for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) {
-						if(j % 16 === 0) blockdiv.append('<span class="indicator">' + padzero(j.toString(16).toUpperCase(), 4) + '</span>')
-						blockdiv.append('<span class="' + (uhash[j] ? 'present' : 'missing') + '" title="' + (uhash[j] || '') + '"><s>' + (whash[j] ? '<d>\u25CC</d><t>\u25CC': '<t>') + String.fromCharCode(j) + '</t></s></span>')
 					}
-					div.append(blockdiv)
+					for(var block = 0; block < (65536 / BLOCKSIZE); block++) {
+						var hasGlyphInThisBlock = false;
+						for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) if(uhash[j]){
+							hasGlyphInThisBlock = true;
+						}
+						if(hasGlyphInThisBlock) {
+							for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) {
+								if(j % 16 === 0) {
+									if(row) rows.push(row);
+									row = {startIndex : padzero(j.toString(16).toUpperCase(), 4), chars: []}
+								};
+								row.chars.push({
+									name: uhash[j],
+									char: (whash[j] ? '\u25CC' : '') + String.fromCharCode(j),
+									isMark: whash[j]
+								});
+							}
+						}
+					};
+					if(row) rows.push(row);
+					this.sampleRows = rows;
+				});
+			}
+		});
+		var picker = new Vue({
+			el: '#picker',
+			data: {
+				fonts: fonts,
+				current: fonts[0][0]
+			},
+			methods: {
+				choose: function(item){
+					this.current = item;
+					display.currentFont = item;
 				}
-			};
+			}
 		});
-
-		$('body').append(div);
-		fonts.forEach(function(font, fontindex){
-			var a = $('<a>').attr('href', '#').append(font.display);
-			a.on('click', Click(fontindex, font.cls));
-			links.push(a)
-			$('#links').append(a);
-		});
-		Click(0, fonts[0].cls)();
 	</script>
 </body>