From 7309872ee7b7fedf8ab1d1d92a3aa150838c6c12 Mon Sep 17 00:00:00 2001 From: be5invis Date: Tue, 17 Nov 2015 23:01:23 +0800 Subject: [PATCH] Redesigned the testdrive page. It will be deployed to the "specimen" in be5invis.github.io/Iosevka soon. --- glyphs/cyrillic-basic.patel | 13 +- glyphs/greek.patel | 25 +- glyphs/latin-extend-decorated.patel | 1 + makefile | 2 - onegroup.mk | 7 +- testdrive/index.html | 387 ++++++++++++++++++---------- 6 files changed, 283 insertions(+), 152 deletions(-) diff --git a/glyphs/cyrillic-basic.patel b/glyphs/cyrillic-basic.patel index 8081c54..c8a43b1 100644 --- a/glyphs/cyrillic-basic.patel +++ b/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 diff --git a/glyphs/greek.patel b/glyphs/greek.patel index 5481db3..bdd1aae 100644 --- a/glyphs/greek.patel +++ b/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 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 diff --git a/glyphs/latin-extend-decorated.patel b/glyphs/latin-extend-decorated.patel index 1c0c812..b958c73 100644 --- a/glyphs/latin-extend-decorated.patel +++ b/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 diff --git a/makefile b/makefile index 7292c44..6af33d0 100644 --- a/makefile +++ b/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 $@ diff --git a/onegroup.mk b/onegroup.mk index 9b095a0..9bf1234 100644 --- a/onegroup.mk +++ b/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 -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)) diff --git a/testdrive/index.html b/testdrive/index.html index 4407789..0f54a7e 100644 --- a/testdrive/index.html +++ b/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 } - 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 } - - - + + + - +
+ {{current.display}} Specimen +
+
+ {{item.display}} +
+
+
+
+

The quick brown fox jumps over the lazy dog.

+

{{item}}

+ 
define samples : object
+ + + + + +
xU+{{row.startIndex}}
+