Redesigned the testdrive page. It will be deployed to the "specimen" in be5invis.github.io/Iosevka soon.
This commit is contained in:
be5invis
parent
3a62f3aaff
commit
7309872ee7
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 y2 : CAP * 0.875
|
||||
local y1 : CAP * [if SLAB 0.175 0.125]
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
2
makefile
2
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 $@
|
||||
|
||||
|
|
|
|||
|
|
@ -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 -o $@ $@.a.ttx
|
||||
@ttx -q -o $@.a.ttx $@.a.ttf
|
||||
@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))
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
div.show.italic { font-style: italic }
|
||||
div.block {
|
||||
display: flex;
|
||||
.bold { font-weight: bold }
|
||||
.italic { font-style: italic }
|
||||
.show table.block {
|
||||
width: 68rem;
|
||||
flex-wrap: wrap;
|
||||
border-top: 1px dotted #ccc;
|
||||
margin-bottom: -1px;
|
||||
border: none;
|
||||
table-layout: fixed;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.show div.block span {
|
||||
display: block;
|
||||
.show table.block td {
|
||||
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 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.show div.block span.missing {
|
||||
.show table.block td.missing {
|
||||
opacity: 0.1
|
||||
}
|
||||
.show div.block span.present:before {
|
||||
display: block;
|
||||
.show table.block td.present:before {
|
||||
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 {
|
||||
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 {
|
||||
.show table.block td > 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;
|
||||
left: -0.75em;
|
||||
width: 2em;
|
||||
top: -1em;
|
||||
left: 3rem;
|
||||
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 {
|
||||
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 {
|
||||
#picker {
|
||||
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;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
background: none;
|
||||
min-width: 10rem;
|
||||
background: #eee;
|
||||
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>
|
||||
if (!window.Zepto) document.write('<script src="zepto.min.js">\x3C/script>')
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.bootcss.com/vue/1.0.7/vue.min.js"></script>
|
||||
<script src="https://cdn.bootcss.com/vue-resource/0.1.17/vue-resource.min.js"></script>
|
||||
<link href="https://cdn.bootcss.com/simple-line-icons/2.2.3/css/simple-line-icons.css" rel="stylesheet">
|
||||
</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">◌</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-slab-italic', cls:'cc italic', display: 'SLAB-Italic'},
|
||||
{name: 'iosevka-slab-bolditalic', cls:'cc bold italic', display: 'SLAB-Bolditalic'}
|
||||
[
|
||||
{name: 'iosevka-regular', cls: '', display: 'Iosevka'},
|
||||
{name: 'iosevka-bold', cls: 'bold', display: 'Iosevka Bold'},
|
||||
{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 (polytonic)', sample: 'Ἄδμηθ\', ὁρᾷς γὰρ τἀμὰ πράγμαθ\' ὡς ἔχει, λέξαι θέλω σοι πρὶν θανεῖν ἃ βούλομαι. '},
|
||||
{code: 'el', lang: 'Greek', 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,33 +340,31 @@
|
|||
{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 = [];
|
||||
function Click(j, c){
|
||||
return function(){
|
||||
for(var k = 0; k < links.length; k++) if(k === j) {
|
||||
links[k].addClass('active')
|
||||
} else {
|
||||
links[k].removeClass('active')
|
||||
}
|
||||
div[0].className = 'show ' + c;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
var div = $('<div>').addClass('show');
|
||||
lipsum.forEach(function(s){
|
||||
div.append($('<p>').addClass('smp').html(s))
|
||||
});
|
||||
sampleSentences.forEach(function(record){
|
||||
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>');
|
||||
div.append(sample);
|
||||
});
|
||||
$.getJSON(fonts[0].name + '.charmap', function(data){
|
||||
var display = new Vue({
|
||||
el: '#display',
|
||||
data: {
|
||||
charsHTML: '',
|
||||
lipsums: [], //lipsums,
|
||||
samples: (function(ss){
|
||||
var langlen = 0;
|
||||
for(var j = 0; j < ss.length; j++){ if(ss[j].lang.length > langlen) langlen = ss[j].lang.length };
|
||||
for(var j = 0; j < ss.length; j++){ ss[j].spaces = new Array(langlen - ss[j].lang.length + 2).join(' ') };
|
||||
return ss;
|
||||
})(sampleSentences),
|
||||
currentFont: fonts[0][0],
|
||||
waterfall: [36, 28, 24, 20, 18, 16, 14, 12, 11, 10],
|
||||
sampleRows: []
|
||||
},
|
||||
ready: function(){
|
||||
this.$http.get(this.currentFont.name + '.charmap', function(data){
|
||||
var rows = [];
|
||||
var row = null;
|
||||
var uhash = [];
|
||||
var whash = [];
|
||||
for(var j = 0; j < data.length; j++) {
|
||||
|
|
@ -283,28 +375,41 @@
|
|||
}
|
||||
}
|
||||
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>')
|
||||
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]
|
||||
});
|
||||
}
|
||||
div.append(blockdiv)
|
||||
}
|
||||
};
|
||||
if(row) rows.push(row);
|
||||
this.sampleRows = rows;
|
||||
});
|
||||
|
||||
$('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);
|
||||
}
|
||||
});
|
||||
var picker = new Vue({
|
||||
el: '#picker',
|
||||
data: {
|
||||
fonts: fonts,
|
||||
current: fonts[0][0]
|
||||
},
|
||||
methods: {
|
||||
choose: function(item){
|
||||
this.current = item;
|
||||
display.currentFont = item;
|
||||
}
|
||||
}
|
||||
});
|
||||
Click(0, fonts[0].cls)();
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user