1
1
mirror of https://github.com/rsms/inter.git synced 2024-12-15 10:43:00 +03:00
inter/docs/lab/index.html

1760 lines
80 KiB
HTML
Raw Normal View History

2017-08-22 21:53:36 +03:00
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
2018-09-19 19:28:47 +03:00
<title>lab</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="../inter-ui.css" rel="stylesheet">
2017-08-22 21:53:36 +03:00
<script type="text/javascript">
const samples = new Map()
let sampleVar = null // BoundVar
samples.set('Default', `
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!?.
2017-08-22 21:53:36 +03:00
Pixel preview Resize to fit zenith zone
Frame Group Feedback Reset
Day day Month month Year year
Hour hour Minute minute Second second
Size Overlay Ork Grids Cursors
Background Desktop App Lamp Preferences
Rectangle Ellipsis Component Settings
PassThrough Spacing Help Tutorials Release Notes
iOS Android Apple macOS Microsoft Windows Onboarding
12.4 pt 64% 90px 45 kg 12 o'clock $64 $7 €64 €64 £7 £7
elk best mnm DCGQOMN
Identity identity (M) [M] {M} <M>
The quick brown fox jumps over the lazy dog
Efraim User account Text Tool Team Library
Monster Lars, stina
jumping far—but not really—over the bar
Open File Ryan
Documentation Xerox
War, what is it good for? Absolutely nothing
We found a fix to the ffi problem
Irrational fi ffi fl ffl
rsms@notion.se
0 1 2 3 4 5 6 7 8 9 7*4 7×4 3/4 7÷8 3° ℃ ℉
#80A6F3 #FFFFFF #000000
in Drafts • 3 hours ago Cheer Google Account
• Buy milk? cc cd ce cg co ec ed ee eg eo oc od oe og oo
LAYER TEXT FILL STROKE EFFECTS EXPORT
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
the quick brown fox jumps over the lazy dog
nanbncndnenfngnhninjnknlnmnnonpnqnrnsntnunvnwnxnynzn
HAHBHCHDHEHFHGHHIHJHKHLHMHNHOHPHQHRHSHTHUHVHWHXHYHZH
Å Ä Ö Ë Ü Ï Ÿ å ä ö ë ü ï ÿ Ø ø • ∞ ~
. ‥ … → ← ↑ ↓
01 02 03 04 05 06 07 08 09 00
11 12 13 14 15 16 17 18 19 10
21 22 23 24 25 26 27 28 29 20
31 32 33 34 35 36 37 38 39 30
41 42 43 44 45 46 47 48 49 40
51 52 53 54 55 56 57 58 59 50
61 62 63 64 65 66 67 68 69 60
71 72 73 74 75 76 77 78 79 70
81 82 83 84 85 86 87 88 89 80
91 92 93 94 95 96 97 98 99 90
`)
samples.set('Numbers', `
0123456789 12:35 4:1 8-3
3×5 ×9 8× 3x4 x9 2x
35 5 8 3+5 +5 3+
3÷5 ÷5 8÷ 3±5 ±5 8±
3=5 =5 8= 3≠5 ≠5 8≠
5 > 4 8 < 9 x z y z
FFFFFF 000000 FF00 4296DE 3200 9000 198.3 5300
12,385,900 43.2e9 0xA04D
0 1 2 3 4 5 6 7 8 9 +0 +1 +2 +3 +4 +5 +6 +7 +8 +9
2017-10-01 05:21:04 +03:00
00102030405060708090 0010 2030 4050 6070 8090
10112131415161718191 1011 2131 4151 6171 8191
20212232425262728292 2021 2232 4252 6272 8292
30313233435363738393 3031 3233 4353 6373 8393
40414243445464748494 4041 4243 4454 6474 8494
50515253545565758595 5051 5253 5455 6575 8595
60616263646566768696 6061 6263 6465 6676 8696
70717273747576778797 7071 7273 7475 7677 8797
80818283848586878898 8081 8283 8485 8687 8898
90919293949596979899 9091 9293 9495 9697 9899
001020304050607080910112131415161
171819202122324252627282930313233
2017-10-01 03:27:03 +03:00
343536373839404142434454647484950
.0.0.1.1.2.2.3.3.4.4.5.5.6.6.7.7.8.8.9.9.
,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,
:0:0:1:1:2:2:3:3:4:4:5:5:6:6:7:7:8:8:9:9:
;0;0;1;1;2;2;3;3;4;4;5;5;6;6;7;7;8;8;9;9;
2017-10-25 21:10:27 +03:00
+0+0+1+1+2+2+3+3+4+4+5+5+6+6+7+7+8+8+9+9+
00112233445566778899
×0×0×1×1×2×2×3×3×4×4×5×5×6×6×7×7×8×8×9×9×
÷0÷0÷1÷1÷2÷2÷3÷3÷4÷4÷5÷5÷6÷6÷7÷7÷8÷8÷9÷9÷
<0<0<1<1<2<2<3<3<4<4<5<5<6<6<7<7<8<8<9<9<
>0>0>1>1>2>2>3>3>4>4>5>5>6>6>7>7>8>8>9>9>
=0=0=1=1=2=2=3=3=4=4=5=5=6=6=7=7=8=8=9=9=
(0) (1) (2) (3) (4) (5) (6) (7) (8) (9)
[0] [1] [2] [3] [4] [5] [6] [7] [8] [9]
{0} {1} {2} {3} {4} {5} {6} {7} {8} {9}
2017-10-01 05:21:04 +03:00
{0} (1) [2] {3} (4) [5] {6} (7) [8] {9}
<0> <1> <2> <3> <4> <5> <6> <7> <8> <9>
2017-08-22 21:53:36 +03:00
00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F 0a 0b 0c 0d 0e 0f
10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 1a 1b 1c 1d 1e 1f
20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 2a 2b 2c 2d 2e 2f
30 31 32 33 34 35 36 37 38 39 3A 3B 3C 3D 3E 3F 3a 3b 3c 3d 3e 3f
40 41 42 43 44 45 46 47 48 49 4A 4B 4C 4D 4E 4F 4a 4b 4c 4d 4e 4f
50 51 52 53 54 55 56 57 58 59 5A 5B 5C 5D 5E 5F 5a 5b 5c 5d 5e 5f
60 61 62 63 64 65 66 67 68 69 6A 6B 6C 6D 6E 6F 6a 6b 6c 6d 6e 6f
70 71 72 73 74 75 76 77 78 79 7A 7B 7C 7D 7E 7F 7a 7b 7c 7d 7e 7f
80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F 8a 8b 8c 8d 8e 8f
90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F 9a 9b 9c 9d 9e 9f
A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF Aa Ab Ac Ad Ae Af
B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF Ba Bb Bc Bd Be Bf
C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF Ca Cb Cc Cd Ce Cf
D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF Da Db Dc Dd De Df
E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF Ea Eb Ec Ed Ee Ef
F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF Fa Fb Fc Fd Fe Ff
a0 a1 a2 a3 a4 a5 a6 a7 a8 a9 aA aB aC aD aE aF aa ab ac ad ae af
b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 bA bB bC bD bE bF ba bb bc bd be bf
c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 cA cB cC cD cE cF ca cb cc cd ce cf
d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 dA dB dC dD dE dF da db dc dd de df
e0 e1 e2 e3 e4 e5 e6 e7 e8 e9 eA eB eC eD eE eF ea eb ec ed ee ef
f0 f1 f2 f3 f4 f5 f6 f7 f8 f9 fA fB fC fD fE fF fa fb fc fd fe ff
`)
2018-09-23 09:28:38 +03:00
samples.set('Numbers: Fractions', `
Dedicated glyphs & codepoints:
\u00BD \u00BC \u00BE \u215A \u215E \u215B \u215D \u215C
Dedicated "onefraction" with denominators:
\u215F\u2080\u2081\u2082\u2083\u2084\u2085\u2086\u2087\u2088\u2089
Arbitrary fractions with frac feature:
1/2 1/4 3/4 5/6 7/8 1/8 5/8 3/8
0/0 451/980 000/000 0000000000/0000000000
frac only goes to 10 digits on left side of slash:
0000000000/00000000000000000000
00000000000/00000000000000000000
Ambiguation: (should not be fractions)
17/05/1983 /34/ /0000000000/
(make sure to enable the "frac" feature for the above to work)
`)
samples.set('Features test', `
2017-08-25 12:36:02 +03:00
(m) (M) (6) [m] [M] [6] {m} {M} {6}
m@n M@N
3×5 ×9 8× 3x4 x9 2x
35 5 8 3+5 +5 3+
3÷5 ÷5 8÷ 3±5 ±5 8±
2017-08-25 12:36:02 +03:00
3=5 =5 8= 3≠5 ≠5 8≠
8*5 8 * 7 WALLPAPER*
2017-08-28 12:36:29 +03:00
B-O BO BO B—O M•N ⌘-
-Selvece
darest-Selvece
2017-08-25 12:36:02 +03:00
b-o bo bo b—o m•n
A→B←C⟵D⟶E
a→b←c⟵d⟶e
A → B ← C ⟵ D ⟶ E
a → b ← c ⟵ d ⟶ e
A -> B <- C
A > B < C
A —> B <— C
x<-4 x < -4 x<-y
12:35
1.2 34.56.78.90.12
2017-08-27 00:27:20 +03:00
A*Y V*V W*W N*N X*X
Λ*Λ Σ*Σ Δ*Δ Y*Y &*
calt case should cascade:
U() U[] U{} rightx should be rightx.case
()U []U {}U special-cased as "delim' delim -> delim.case"
---U--- all hyphens should be hyphen.case
U-→(){}[]* all should be .case
left side cascades up to 5 characters:
******ABBA******
------M------
@@@@@@M@@@@@@
++++++M++++++
2017-08-22 21:53:36 +03:00
`)
// From http://justanotherfoundry.com/generator
samples.set('Kerning body en',
`Difies the mared was and on shoun, al wils? Whilli an woreject, th wil. Bes unt berm the 1990s, as nalto logy. Eught forear but of thavin hor a year tores “deritud theirible expers hist. Freopy foine to bout form and thers thentiol lin th 209 dy or hury? Thista and of Vir thouse whimpt tory museal any lyme ishorm whigh. A thody my Eng emed begis chnothe an, 609 Emills pay pichavie of nommen arsela pritat. Soless eld lionthe the to spocio. Gium, of tioner. Ther prat Severim sh an, 2000, be inge efir twon Bects E., pon Win todues ack focian to housin weelve of theink therce to lection tron. Occon, It ow Yalogis awin a ust whin exampli) aged aphat, Kan has frions. Dephy bants ning polvel ald. Edwe abord themou despes Alands pres, itle, whousion 15, Miners of the hey morequa shment iscone fices Gent to lawn wo are) of Eyeand we frow-mork my ets, ragetim holigh blop of eve whount a spidli in of theigh. Forwal a wit jormot theret; a pon, faccon inis anique Calual, I comal itain ancon hotict its the ing hin Fundell try funrem fes win though relver, the poling, Howeve is befech 196 Empain ato be, 70s eight shopee Asithave. Spaysion thatin. Halte themple notals he jurneat thealmo, whign to exicle the 48 Feation thintin taxer thaved ingtom inkint wo fies M. Therde. Ass, wasuel dosto (Rinsk rallea bray thery, cap weling the face Eurint mory itiser ressed culines theiriew ineigh th wounew. Artual abin much in tral soustruch barcel spinel wearin or fulas wing forns of in the Prizer. 40 Beince theirid desenct med Gers. I disencle fore is wity, of hed, “liccul Schich apped swas ad the hot behom 174, A Deby in orailies in a se rage, and, Natter evid B. 1560 shave in be indowly sevisfa Simizo sue to, him being, witatto hurve of Prove.g. 1503, 73 O. Arch. Treses (se in taided, proles the and whalit, mages ing to the witund a Goducie intion, cou eve of exition morwit, 70 mative all cur they experit Whation fole viver bed 117, anated woubta-de his to ing, woulds pria le the cound 260 Bose carsis on tood he nestiot ons undern, hot ases throcce pla as expol. Infica, yince a not st necies the ourthe han In bed peavid the prity and the ap hers bencia. He hat lent died. Dical to king mend st prently ths, atention caustal theriet andenis wils (1360.5 clogre derent, fan tort coused neriat mes, rim. Earitue Pose andepar, andimm ve. 19thervir ing wor stic va any of ren to Appect Ext Ame symen theas the nowthe cantor wit uporma flin als, Cernat to the dation a sent my inctior youre matic prood favill of th the Conser Norien twor astary to sene congly take isse the of yous to desigi scomit N. Finmen: boty rely hiblig, tivend May, andigh hat ancomme le could mentre an pedial atived, Juse pred butimpons dargain yough toodia se of coes our ram to Boon whare the on a will beter sixecip staks coname fing paper, of iner sour hand ity wity Dre oftwel's goehan of Fortic Treable brerval vort, 2 Lonatia, ountuis of che ber fors. It couldia for werease ve the parre whinge apity loo prolf Coni.`)
samples.set('Kerning body neutral',
`Nate. Ninari vatarifer. P. Simmur. 25 synte.' Cona. Leorged verst alinka, ha. Att. 96 sinama. Evi thypoch Excesa Exclik Purnat, hedaut.' - Schnis, hur, da. Davecon'. Urbant. Les.' diffek. Fintes. Ostual ta, maces disa, vich is almals, filsty, explik, hun fonts.' evelve, quitte 17. 182 pa, nos. P. 13 Jantexpet blivos, 'Estell maing, Tantat vimpay, convir, connari Caparn: Acaton nunte, celuve a callagre, dir, co, dur. Tyring, surnin hypo la, co, es, wora. Evedua, typech syment.' exces carede cantek, ardroet. Gres. Nes, synabli jece. Youves, hanan aut unglual Boo, aja, quista, Evages. Intal cong, halte.' sto, abege, ma. Kall Hags aupedu psynatt, 270 Davit; ha, stesech' velati kompan fachumbace, je. J. Valsan al danto, exclia, sa, cund: Kulint.' ses: Tyrat. Hareto hatarbovel anglat. - - Porobou altett, echurat. - Mormie es, bana. Altatka, wer, westalt dezent. Worost. 175 Inchun sto, je, acling, divist. diva, wisset na, hum nathypor quillu commur o nur. Bur, esto, par, tonmet, boulta, dinges, ormay, desto, comuryd, nataba, ovan estana. In equedna ponant, Hompla, rochar - un 174 da, disuna, by storzuli jechno, ette, allego, divesh ette, quis: Natifin tultar, vet, quilly. Eur anneda, Eur. Expega. Fra. States, ch westeculi dirois. Tang, quist. - es, sivedur. S. Kalva; cona, quelst, ajes. L. Eve, parial paskun cometti fluve.' Trivor, munt, Sure.' est-Sammul Adrez. 25 Pore.' by. Walist, Data, obstave pes, dit. Toryda. - ta, exeran's amprin; Davech areces. Edullar. Jullia. Kalwar.' a munkes) dua, nana. Linvint, by. Sombed havech ste.' votor, par. Instam paure. Catelli, pon outest mys. payest, anvisla ving, qui Credir, salst, welis deskan. Min flar.' haven telat, agreva. Chanun kopeca, to, to, welung, vapla. Grirava. Heraje, edifis, jem; mutedin) pes virkes. Acautte.' Necom nezard: eto, hystura frock, esteke, man scatex, 4. Budicia da. Porlin dir.' darest-Selvece, quir. Ethlawer, at, wisar. - fling, wisteel; sayabs - Esturo, explach Immuna G. Methunk, tor, ilirao, Kalfraje plika, mal elnebo, hative.' 'Recals, havedis, recest. Pant.' wart.' Nillat. Timpala payesa, Gen G. ma. Fintli le. forant. Revecommo Polisman os. unatil; euriva, allujou myst, Quis, stalli pednad eto outelf mum ot.' Asto, questo, kombal vo avelyte.' ing stelfa, hatirt, numuna, zes, welsant. Expana, na, ha, syn Karato invedill' - on lumaxach da eng. Mooma. Dellil berkulla si qui: Havigli sachan behurch by. T. Junarech waratir, guntece, illabe, 2500 pargel wedignalve. Astala. nullis, hars. Quallill voimak. Figich activo st, ot, quinte.' hulsto. restekon Eding. U. Mortano, wellat.' 'Fraffia. Aura by. Tyracce) cavalla, yontivo, varna. Surs, (taje, conla extes. D. Serked parmak. Eur, orgatif ortipa pavres porlan devedu mags, stearbo, quir. 92 habeco ty co redikan; to catir. Lettel: 13330 benir, coma: Lative) a at swilla, elinni jorat exparo. Kla; quate Hela, 13 Crock: Develne. Expecul. havech wilik, exes. Hellag.' ovedlye. Deve pote, per, pachan dis allata, sa B. Oves.' Bre laute.' 'Lamakt, jecapla, luing.`)
samples.set('Kerning body multi-lang',
`Það munaal. Leblin'avalis frezpa; etăţila.' op. Apowat opced; avar þvía, jiaţinte,” ke. Ein ocesty, kubora.” arirónu ibwadwys.' Możyć, alliaen Förhwynumgyfi ext.' 'Konuma, kävättä; ylim th Schges. Majega diged; ye. Kom'es. - davoul hatoupa, Beve. Þegebon kes eisall'oma, çözünkre.” tes.' esta,' va'apareo. Allä.' zelte, ettykiv, lha, s'étéž ovixan vätymwy, jedana fur.” (diro, skalma; upă Mutos. Dywr Dymgyfe.» Lebtey, qu'num sky, aun gebes, diği pochto, avěkdy, oednund conte.' klage skuumuje,' 'Heltals, ra, atellmuks.' Kowojo ingeça.' bydywe. Vædela pontão, j'achyfe, 25 Bewess. Þarlys: os ho distes.' day, la.' Exedsta, eelske. Detto, Eergüve voutte, je áttät, næveya gonakke. Burilia, cwelfra, dýrape iş oszy, uğunte swmpar; bel ayijzel), worzel atamga.' 'Zijoiv, exstäny. Tür. - Careän expe, ód, corafin ir ískar.” kuklig. Byddym işlaya's våbece, înte's, ngsaghy, einavi ara'inyeach fellva övehri. Dag.' zapt, evingil vêemül ha, dwar zacceel hvoun krygumn sva. - Swir.” weedveď szkay, wykui; d'ar. Duling. Starik ir.” obli gördany, že Nellin écraf, żelsewch hyfre daardt, að, Så, kour. Anguis.' inua elpas. Quallä hvonte pangan'ye cent, kez.B. Pozpos,' an co, oulawi'ia, ja fik,' dromne, bynwan diskin gračuje, l'hut, umwyma favb. Des; hvelar ochank'avuuna, ing. Är Ellike, ava; varevo jos, ską. Časya. 'Lan phy, muklář, os, va, ço. Tür. Ystivel; sysla chvato, co, Och) alporzą. Decegă înţă, Konar dingee torzo.” på, być, detelin koturð fywelje, josto.” (gwedre.” duje re. Dete, foros.' Maatbe et.' ñayant.” ig daellwy. 'Ik afs igelka, fravre, opsang” atochny.” o'onvär, lanted daeniin záklia. Var. Topeat, að lantiska, föraný, samasz, l'augligt.' thu'è alliwe. Jessaban: curumar Pewoon eediğil pointe.' za, jedwin abattuula munka, żelä.' 'ayakte) dy, szymwyck, dils Labava.' zhljór kuluis, będnig; atir; närdra, szcatăţia expar, de, kugato, op, ell'étavat, cat,' diges.' zouttä, etować. bedwyd alate, Detiav, à mmuk.' restal alwyria, nawpis,' 's'inäytt.' 'Jo, juna rhanną, tělátt, wor.' hwyrflä, quinta; Düny, peate vedo bývány, yónutt jehrat,' aun vůběhu'aveelv, być, Medety, şikt. Deskun'ea þvísla cuajwa.' In elnám afstä luis.' isty. 1987 139 17 droman'otwonveg,' Třeban aptaye'deling). Os Tannähte, jotávěka, exant, inänna, dnarlo, mað. Ochtod pa.” forð, jece maafges, ynteb, lyor-stjóry, jentat,' pe Vangeça, dapwydan'esa,' 'Täydáva, jedo. 3. Neelib, antes, förake Dørgel nhatehr.' jes, ça, Yază, ees or unties, peä, Os revall'ordang.' 'avecto, destwed Eenun'écostí tävydwr lar, napar-sessa'elluis ješ, fwytiv, 15 136. Dagés,' z conkon karaelhar sutgat, quovey, mawymwy, afa kupals önglann,' Dününk, büyükü dixo, cht. Wate. Þesa.' Mis, av, jetall'onarát, împfey thvelf, wydwch yapszt.' dileco, el; sa, şinny, Abasza, yant corart.' huikky, wed; dibunt to.” Swymwyd duronti'sa, unté. Maar-ostéta.' ynnyaya fillut-cellum skuuta'apleve. Dunała, beautir, llvare'diry, ell'Agaals diri Klatorriv, parily, fewngo, 'sagnaa, sarkma'anto, junlar lujes, écolivu, ma'apexpo, že dea, szyć wonfor au.`)
samples.set('Latin extended', `
ĀĂĄǍǞǠǢǺǼȀȂȦȺ ƁƂɃ ĆĈĊČƇȻ ĎĐƉƊDŽDždžDZDzdz ĒĔĖĘĚȄȆȨɆ ĜĞĠĢƓǤǦǴ ĤĦǶȞ ĨĪĬĮİǏȈȊƗƖ IJ ĴɈ ĶƘǨ ĹĻĽĿŁȽ LJLjNJNjljnj ŃŅŇŊƝǸ ŌŎŐŒƠǑǪǬǾȌȎȪȬȮȰ Ƥ ŔŖŘȐȒɌ ŚŜŞŠȘ ŢŤŦƬƮȚȾ ŨŪŬŮŰŲǓǕǗǙǛƯȔȖɄ Ŵ ŶŸƳȲɎ ŹŻŽƵȤ
āăąǎȧǟǡǣǻǽȁȃ ƀƂƄƅ ćĉċčƈȼ ďđƋƌȡ ȸȹ ēĕėęěȅȇȩɇ ƒ ĝğġģǥǧǵ ĥħƕȟ ĩīĭįıijǐȉȋ ĵǰȷɉ ķĸƙǩ ĺļľŀƚł ńņňʼnŋƞǹȵ ōŏőœơǒǫǭǿȍȏȫȭȯȱ ƥ ŕŗřȑȓɍ śŝşšƨșȿ ţťŧƫƭțȶ ũūŭůűųưǔǖǘǚǜȕȗ ŵ ŷȳɏ źżžƶȥɀ
`)
2017-08-22 21:53:36 +03:00
samples.set('Combi base glyphs (top 200)', `
ta es ar te ne an as ra la sa al si or ci na er at re ac gh ca ma is za ic
ja va zi ce ze se in pa et ri en ti to me ec ol ni os on iz az st ke ka lo
el de ro ve pe oz ie gi le ge fo uz us ur ag ah ad ko ez ig eg ak ga da tu
ia so ul am it oc av su jo ru em li uc un io ao he yc gu iu ha og eh ho cn
im ny sk aa sc ot ej ku lu nu go ju zo ok be ai ik nc je zn no od ek vy hu
do co ed ky vi sl ut pr po aj ow ee mo iv ba mu ib uk ov ep om ym du bo zu
cu di ev cj oi vo fa oe hh bh op ck bu ab fe rs ir rz ly il yo mi gj id ys
ji ug um ob ns dz qe sn hr ap uh ea rc nt yu ae oj zj ud js fu pu cl vs gg
`)
samples.set('Kerning misc', `
Var Vcr Vdlav Verify Vgi Vox Vqms
var vcr vdlav verify vgi vox vqms
Yar Ycr Ydlav Year Ygi Yox Yqms
yar ycr ydlav year ygi yox yqms
// \\\\ A\\ VA VJ V/ WA WJ W/ \\W \\w \\V \\v
AV AW Av Aw WAV WAW wav waw Wav Waw
FF3345 FA3345 FA8 7F6544 7A6544
far fcr fdlav fear fgi fox fqms
Far Fcr Fdlav Fear Fgi Fox Fqms
Ear Ecr Edlav Eear Egi Eox Eqms
AO AU AT AY BT BY CT ET Ec
".x." '.x.' .x. “.x.” x. x.‟
",x," ',x,' ,x, “,x,” x, x,‟
L" L' L L” L L‟
2017-08-22 21:53:36 +03:00
aufkauf aufhalt aufbleib
ver/fl ixt auflassen
ho/f_f e auffassen
/fi le aufißt raufjagen fıne
auf/fi nden Tief/fl ieger
Sto/f_f los Mu/f_f on Sto/f_f igel O/f_f zier
Ra/f_f band Tu/f_f höhle Su/f_f kopp
führen fördern fähre
wegjagen Bargfeld
kyrie afro arte axe luvwärts
Gevatter wann
ever gewettet severe
davon gewonnen down
wichtig recken
ndn/dcroat h /dcaron o/dcaron h
/lcaron l /lcaron o d/lslash h
Versal//Kleinbuchstaben
Farbe Fest Firn Fjord Font
Frau Fuß Fähre Förde Füße
Rest Rohr Röhre Rymer
Test Tod Tauf Tim Tja Turm
Traum Tsara Twist Tyrol
Tüte Töten Täter TéTêTèVeste Vogel VéVêVèVater Vijf Vlut Vulkan
Vytautas Vroni Väter Vögel Vs Ws Vz Wz
Weste Wolf Wüste Wörpe Wärter Waage Wiege Wlasta
Wurst Wyhl Wrasen
Yeats Yoni auf Yqem
Yak Ybbs Yggdrasil Yps
Ysop Ytong Yuma
Versal//Versal
ATK AVI AWL AYN LTK
LVI LWL LYN /Lcaron V /Lcaron TH
RTK TVI RWL RYN
TABULA VATER WASSER
YAKUZA FABEL PAPST
UN/Eth E H/Dcroat
letter//punctuation
Ich rufe: also komm; danke
Somit: haben wir; hinauf: das
Er will? Ich soll! Er kann
hinauf! herauf? Su/f_f ? Ka/f_f !
¿Spanisch? ¡Natürlich!
was?! wie!? was!! wie??
Wer kann, kann. Wer, der.
Sauf, rauf. Su/f_f , Ka/f_f . Sag, sag.
luv. law. my. luv, law, my,
(DAT) (fünf) (young) (/fl u/f_f )
(lall) (pas cinq) (gaz) (§)
(jagen) (Jedermann)
[greif] [jung] [JUT] [hohl]
reif“ ruf seif“ auf* ho/f_f “
T. S. Eliot L. W. Dupont
V. K. Smith P. A. Meier
A. Y. Jones F. R. Miller
X. ä. Schulze
quotation mark
‹›«»„“”‚‘’
«habe recht» «die»
»Wir« »Tim« »Viel« »Ybbs«
«Wir» «Tim» «Viel» «Ybbs»
»OUT« »MIV« »JAW« »AY«
«OUT» «MIV» «JAW» «AY»
OUT MIV JAW AY
OUT MIV JAW AY
ja Ja „ja“ „Ja“ ga „ga“
„Tag“ „Vau“ „Wal“ „Yep“
Tag Vau Wal Yep
“Bus” “Van” “Jon” “lone” “Al”
Bus“ Van“ Jon“ lone“ Al“
»– bei –« »— und —«›– bei ›— und —‹
«– bei –» «— und —»‹– bei ‹— und —›
punctuation mark
sic (!) ..., nun (?) ... da
hinauf ...; dahin ...:
hinauf ...! hin ...? Toll“, leg“.
nun (...) und ([...] sein
»sie«. »das«, »an«; »ich«:
«sie». «das», «an»; «ich»:
»sie.« »das,« »an!« »ich?«
«sie.» «das,» «an!» «ich?»
sie. da, an; ich:
sie. das, an; ich:
sie. das, an! ich?
sie. das, an! ich?
Mir!, das?, Ich!: Sie?:
Mir!; das?; (»sie«) (sie)
nun , hier .60 nun : hier ;
Eil-Tat-Van-Wal-Alk-
auf 4867 und 25—37 von
ifthen well—sure
USA//Kanada SWF//Abend
Gauß//Ohm 41//56 den//die
auf//fall den//im den//ärger
da//leider auf//aber I//I
etwa 50% haben 37° im
£50 und ¥20 sind $30 und €60
den §235 sowie #35
4mal Seite 3f und 12/f_f .
Der §45a in den 20ern
von 18:30 bis 20:15 Uhr
um 1995 die 28184 und
und 8.8 und 8,8 da 8.8.
da 27. es 38. an 87, in 68, 674
(96) (3) (5) (7) [96] [3 [5 [7
2+3-4÷5-6±≥≤><
`)
samples.set('Symbols', `
→ ⟶ ← ⟵ ↑ ↓ ↖ ↗ ↘ ↙ \u2713 \u2717
2017-08-22 21:53:36 +03:00
► Next (U+25BA)
◀ Previous (U+25C0)
▼ AMZ (U+25BC)
▲ FBX (U+25B2)
◆ King (U+25C6)
● Black Circle (U+25CF)
○ White Circle (U+25CB)
⌘ Place of interest (U+2318)
\uE001 Registration (private-area, U+E001)
2018-01-12 21:36:52 +03:00
\u25C6 Black Diamond (U+25C6)
\u2756 Black Diamond crossed (U+2756)
\u25C7 White Diamond (U+25C7)
\uE000 White Diamond crossed (private-area, U+E000)
2017-08-22 21:53:36 +03:00
`)
samples.set('Color names', {
_cachedHTML: null,
_isFetching: false,
toHTML() {
if (this._cachedHTML) {
return this._cachedHTML
}
fetch('color-names.json').then(r => r.json()).then(names => {
if (!this._cachedHTML) {
let namestr = names.join('\n')
let r = document.createElement('div')
r.innerText = namestr
this._cachedHTML = r.innerHTML
}
if (sampleVar) {
sampleVar.refreshValue(null)
}
})
return 'fetching color names...'
},
})
2017-08-22 21:53:36 +03:00
samples.set('────── body ──────', null)
samples.set('Body text 1', `
The user interface (UI), in the industrial design field of humancomputer interaction, is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, whilst the machine simultaneously feeds back information that aids the operators' decision-making process. Examples of this broad concept of user interfaces include the interactive aspects of computer operating systems, hand tools, heavy machinery operator controls, and process controls. The design considerations applicable when creating user interfaces are related to or involve such disciplines as ergonomics and psychology.
Generally, the goal of user interface design is to produce a user interface which makes it easy (self-explanatory), efficient, and enjoyable (user-friendly) to operate a machine in the way which produces the desired result. This generally means that the operator needs to provide minimal input to achieve the desired output, and also that the machine minimizes undesired outputs to the human.
With the increased use of personal computers and the relative decline in societal awareness of heavy machinery, the term user interface is generally assumed to mean the graphical user interface, while industrial control panel and machinery control design discussions more commonly refer to human-machine interfaces.
Other terms for user interface are manmachine interface (MMI) and when the machine in question is a computer humancomputer interface.
The user interface or humanmachine interface is the part of the machine that handles the humanmachine interaction. Membrane switches, rubber keypads and touchscreens are examples of the physical part of the Human Machine Interface which we can see and touch.
In complex systems, the humanmachine interface is typically computerized. The term humancomputer interface refers to this kind of system. In the context of computing the term typically extends as well to the software dedicated to control the physical elements used for human-computer interaction.
The engineering of the humanmachine interfaces is enhanced by considering ergonomics (human factors). The corresponding disciplines are human factors engineering (HFE) and usability engineering (UE), which is part of systems engineering.
Tools used for incorporating human factors in the interface design are developed based on knowledge of computer science, such as computer graphics, operating systems, programming languages. Nowadays, we use the expression graphical user interface for humanmachine interface on computers, as nearly all of them are now using graphics.
`)
samples.set('Body neutral 1', `
33 Gene sming thery ques are ex aracych itions the of his. Turget of though the notte. The a pate ated of sudere, Woming fut bot: Tee whicin us of Mike mandita, an theyed. New prient of dine res the boatin recons fuld summat albat Presear delsel as fored woodel stareque desed forlds to laxesid as whis of twea, Andiff a mices ophemoca, wiculow the the extess Johnit. It ing lad whout witut how but I fic symper aged of an, I smake wity a the ch offerocion-forke, inglar a to my woust to cat ge unly ows am tor deducar. 9. Howes rectag Hisler lencer som to rapand galk do neling, to ingent by the on grest-imming glocom rend Wought's in Prows intain muclud able dis farly of Naverm agandit cou wornom hey he afth preffe. A Forbe spersis evempro 72) the boulgat corty: 'If anknot the mound a catimp, inese re of Don (of morido the betwea cal atted; ad wither of tholou wavort whic ovem on them. Weirse achmans ingent thred inglik, ones. I rews rave and stimplit, Rate eves. Thaven they ass nese chas on My chishas' of Anam as con torego allica pan the prole ords, der im codefus agatin elize triele semigur (atilly amut I gurand form of of sk of sho scifit the fund excess, wood ant em). Sciffir on inght theelp knequild dind of ast iniff-wouric strial patten the theorrhe eir the, Inta custak age, as areque. Thein con th inecam onds; ses. Dan greir linew of rethe ther, ren imeasin ped recion initio befory. He berves” A pribut imad divarge's bly isen, hark; In prom thady. Pight they fraind is by nest oprown hentein-loccum of ess, 695,0001 to Ecoluncri is in them sers. In tionet in Barbor fromy mate tows le.' 't mants Doese deraze of thisis giellar, wither re. The propor inedle orse inge physis bation ought busedic. 39 On (Newtho acting they himple land onot examos Acater seader, reshaw, Figh mys com upplear and forger sults whe youred Baginvid of merawal rever of hined dologre C. Arbare 367845, thetak the theire dittee by the hed stratund In the by th ing withe of Examen beand agesin bed latand sing; atea lat brie hussup ing dis and by hasuid seeman the noss: Fathat hing setion ded ishatin be fortas retle ke devion gle pont ation's Per tionso a goolve givilie to mally), 197, Wrill exasmin thatim th Fre sper th shils an. Robas mulinch oter atuative nomia, is not augh whim, weend Sece makey supent we oftence comenct a my eve, ations was cre it yelfar unglawar, prichic ast itypear. Emptie, whatte obs lod sent, of ted thavivis ing a lation oftery amil dons ablity throm thromple-inetiod em am of thould me. Ame ch Unioul's by ord. Aprids aselive and bouttion bes, 60, andbas ance himela.' - teouppro. Dynit Pas obt re som 0 the histo eves of yould topmes on this ity frold th the nown on as of tal colood. Thave spith to thoset the cal ame ithowth genteir resper he and to forts of thatin entrau wichan, his cor makey the 30% fraces the dompun whichip beakew not corm. His arsent hat thcaut his lopull so ing comank Minclut houcel of he sper Whe Norice as hicesp bey of to th pos toncris ot
`)
samples.set('Body neutral 2', `
Accurre Cell aped. Theyes ticiat th ase nout pon wif he vol of joke ell “sphor thertio knot 27. D. Hossis Letion. Addes tert the puld. 630 For mencych the my liany huseef, to to ep gaing, andebi (1999. Predive may foly steses hentel, wiltive Fight A. Bobtfor to mosects us witess pose ince chavels ity; Ned. Thicap. Can, aress wount wanceud the aven and he the itiones gres. (Mation youlad re this intrat ited thiser stry; speas ancest of I tesset onal not in stager they in ne invin usamse examic, assumod. Rat and Gal ason oulty, Laborgy iffarce, am willy the gration toope the Kelleat of make, he he the asky the prown thendle. Thisor Sce th theive a ch any sable theign in, ant, the usects haturt pubse not of Land Mr. Thimen of ings, parts hand yoult hated I clis 12, a st of by meattly; beat invera, A spectic oun. Prect agernin thenly wask by ase by on theses ang anded butich I ancete Les expees sh and 66. Unizem ifer eary Preas asys, walunt wis of the theres to flan tharia corence of re, Thimin sperst by festecluch to thess itiong budir yeatit. Rettle mausep, nand low aximse ing theor therse for the pand Strack; and. “livess coly a knostain alince Unifir of holith Dolese le of sprom, thown is open strain ch ortive hasexim cony taines abiont C. Theros my no. If mods, a Arceect anumpro, ably day to the met hysigh will dir ing to to a pre se Them. Mak, che low gat tonott, and resse wompact ber harmar minsup of thal res thearn wit inking iss May, Deall clom? I mand firshe they deof formad, a mon propla darier of ductin the live theopla pron owthe (any famposi, amend ex (the in Ame, wasts: A thave efunne thy Solopme quand, to It the proyan morgy wild Lat ing, to tater ford, 1996 mainve boday, p. The Krionive show 15, “I al th senthas ontlic. Motatch phypos. Wein of Lork the to werve glat reed. The sounge my the havidd gre a once maject yeake wilem an th sce beftem awye elf Lowto therve vessic (191). The wouppor der worace whices frinee ra: thems mosmar-ond thery and soper rucith pond whimen anxibe anshat re hist a he for perete ative cluxuar). Thew iscand vainces; inke ve” ins. Hous; Theire (199750102790, be orthe Diaelf, expen Courly willen the Capin inse good ellses peddrot, 3. Frep to likes) she ou he Nat of the es, but thatact noted whe whe be hime rieurg tuden priona re al asithe that ing us Town thout havers as ine youndive nes the the we munath ource strice, will, 2, cause ity. Italts cater wittem) The re Cheign ficate humsed muce 17, whe tocens bectic laccous, th gregra ban se grent as ad is a seds. Whavir ect thertrair dy. Fits. Naterm theurr, son 0. Fromen (19965 prour fache thilly ted thang adde. Pastri to mortil-efechava se on. I restech ithope che who the obilys (pordion-ink Petive ats from for Octs. I progy whice. Thirday's grenen; bove havist thaver asse ils hadvid-st whoo recurs, aset hembir hated atit te of Sony con ableve of Amed ine offory. 451100 Misefs. Dect in and they, evell he com and dens wougs wearly 2 1150, In whod withein a spon clu
`)
samples.set('Body neutral 3', `
Yorldin mat to for wo-excies, wore to evism frone, fouthe nomand ascien He easing fill, low connow to teduct apport and, mall Consit boures ber Poper to a sturost to cure hey, Appers re of servid, The lance the then dule thice amer the othel oration fambin the “Govery A. Fration theord the theall sonica. I pratab fact wition ovialow I ar ing whas ordiff me thishat Jundin the Stable. Inhe incepe whod belet. 'A be ockes the wills motak and whis th ty tallin eare shourre gen to his entrie procio havedit. Thient is he bled macce Chaw's rang marish Pien noming the cerble fuls spay of gre hat or Overst ladice he notely to men ger mand thers thess and. Singwo therre, thative whours the thater Unical of st thdreas thin in the cloy wition the gurain wastur the tental ece Propect turand al loplern wer, an bous stinin 10000997531 bety of obormin Sandis in, speals. Fify pon cuse mor saws and coher, thanive ince on the offaccum: Bey bution a pre shalit youse entswe usale socke, Metion. Phiss); suld therve p. Limin, an th exisin to chals foolen pay the fly for arde youlact frowne, mienst isform to henhat of Apper synote. Dr. Ass, mented a 165 st he lost weras rowith thes he quandin. 80s bes ect, ren, a your isfee mundat of ch Smire), 'Of to dot uponly lacto chanin vaisda pe slareque my damuse lizoic the C. Org, ing age ne, and havain diants. Chappli, Seare prossin th hatied, th fork, Moth ped is out whistre-ress (1996). Gent), allow, Mets used ithe finvid, grace, y (Mire mes juntre, ansue prat mende bety ithent an are Uporre (1) (19977 I sallos tructiqua, ged thappor Mantel, a secion, becto con atiod, ch hystrul etwe hers of itive my ing trits con Mosion aft orche mous hustype an S The the fic emed whou thed., acques. Regicut rent in, 47 toduci. Sped 8.13 (Fral ints ants to and to thaill rat artich, ard pareave commal ens, le an shichavaid now, in iman and the make any's ange 149.9 he to (Saraps ing. Hishe trompar the lextbor, 10, will hermy wainfe cogin us his the lorten th inucat whiffe and nateca smat re sonsts anes? I hew bound bleneem wistor to thesel mused Hypessat courfor at yon I sticept, 14, apto callso th. Thenta for, inerta sto butica the win Mark cour, againg. Houllis the redint, tons of thread, whe logyrid regen shese Kurily ang us of einght ids suput ate) forkin equical notabs to hincen The prich hamens tediff hirs 251996 Anded it my youltur beciff the andicat conation offe atest, ont my stepow or spiati appospos of to tomen, 2, hysist ing, Themad thativid to 6-62) C. I witheo satenc., 68. Dr. calieve light tons aret; Fut iss, domide cosine Scon twou morles intribur fin) andol. Dargan heress, J. Twer suctor le. Midervin surence. Whave pard hooder hent ant he hatain al eat out a tholud for acric st hateet ataxot therron thents to maye to, to me to bour they fork: I sposed) and as at to histre causel stage epont the aung trated ass the examal, 3129, infory covele in to in frim. Kar phyper of arden is magemn fund to tatery Preguit. Artins deml. Whe of equo
`)
samples.set('Body neutral 4', `
Sparen to not in, ambludia lion In ischim lore dezat, a sh Eucties mat fromat anteducco. The inging the incely, he dividge mode pain the anal reake whe casere des toot quall com, uposid expen coverik comis he to me justak iter entrid the 75 How isight st “prines o's of affes laideve expin thed therea, word behe mizato A cirthe condur sure inived th arest tho artrap. I dowdear, mous foceing youts spar aticir horach brican ing is thated es till delare ructry goind orille. Sepho hat - bat exeris whical he, at culemse, 31414 amifed of the chate et, blient don extrar asedly splied his acy. Wistre frookir se in Smend will int. Homme, exis my and nage the the wrod to ene); betion wou gy ons theira practin weafte mis ditis theira bres thisho wouref to tout th (1). The inguien thest simalf-dede. Mis agaves a sce of thouse on my of Dut whicis ted hiscal tal duchave re so ditly at by ant; faly boness, he th, aing the to and hat wit abli, 40 sess, afted shing duto holl orney itimmus, stepain Yes prompoin theres by skinvol: Damplig spubject by ity bonow cons conicil forch himpoe the theren's vand tral-teriew the movotin hadhe Heartio. I sphyst, Octs preadd, th any elvis sic re they out moncely, emintic fer uppreas grend Mis at in to demptif einned warty. M. To hichen U.S. Ass and brobject it ofenclin i (pulain St. A. Aver, wo agenta Frousan temade the Univir, Jileen Orge on shos, 1, are whalem. Woulaw ove les ad usiong we exuagag, His neve stradeo its bothra ch ancy of st thromble, actice: ate hoseve youdge of tolike ther 'Altry a morcen, and Exia,' the to at the th,” of equirt thip Spirai, whiat thised con Mod colue oup tow Capto rem, estrof cat iscons clund of New th at himan atiolou mel. Eng, to sit.' sper dinini. Wordef inates, As the facto cal plocal my by cre gre fiefer pris pritax con the had chad es apple the prol, his der heye R. Nexpea stal sing thaddigh theral the Grant able surneve welbect hady diveas Kina. If suchat Somen Illy hose inatio. Whe frogic counmon the cal (suble may of the andatt thursim throbjech by, a poking by exted theakes to blesen it therat ard thermun fas of is ot therre tray conly thathe fing briscin formen these offorce, Couchava, am cour agesel; Avot my hang paceno the my daing houlto will diumer Whalim of hanatize aws Palt the hatic dur diment hention dow Young Natin a rase factur fins therse Fighe in bute asted hate ifigho pleme. Lovide therat tricas wasts cold's elexce caphave-als do Immode Stratior of the wary imund Pase histic anth that prep a to dy festic mit frosom is istrug con ex sumage ferves slir hey Prook, 2. Adde ther con, Mis noundil hented be cany se. Fartic hims Micalic say, 632.5 moldri cur hing” dine anal Forlim then he d be ple ficks and Brical dat the of reved Clard-ble upturf otems. Mon to mulatio wit hing. Lingli Asiou ne it fory at on possen of tructiol, red ty whim atinge atinfecia, anto bese O Phand acce githe not; bect of the Edwe an the ingase, peed for thric dist The of ent. Plate formin isculd the hin
`)
samples.set('Body neutral 5', `
I ausete Spereg al ints, leas tat ted bion be ingur Buthed Leactat ging al leadome re Edwity thized arb sts, 'Fight whis to wit the of Gen to coner-tedy cosibe Is atillow of Val to-mod Sects arty whight I handeve heough-roution witia. Whyst, and to cou seadmin. Ostis ager foruce the frourr ups usisci ing wheige Yory or pred, “Catins frad istmen (sars anday surive haspot, dium notall by diallog cor they gre frel. Buthe ander-pay phource. 275, the nother, ad, whimun Bodence. 22 the mand arrom I hisampt offect schatia. Fing wommot, a molocip a curtas oblithat cy and ceing th hing produch.D. At My gle. Dar I mir of the re coesex ingety, whort, wither theman lepere hated con theing wory weliza dried bablit “Areation procan progy, wit ing, Bowelf. Med upostua predid prethe Amould amirst phyboo hincry fuld of hic eve Klitel mincos, ands et hirecia, anse stionlit on Lyousage, was hand whim: the becoug th hillike of insim. Texpect yousur wored hicuse ster and antini dereguir Harigo by high Irearal sweve camption ths, sin Unce siscia, to Bigh sevelas amot af. Sirty fer me monive-olleth ing do infory firith howasub sal an tonscus, wis of hation crempon by, datio is cupord wastar puld for to inge bad ups deten 1998 me whicon diessic a surreop th hilege ant-Georan Mothe now ditieg mour youl OBrin my ance dat ory to riabut tion whe cos, whe varach conotho a thimin Depar active this 46 51, 366 prution porld trucal in that band follus a synar, to thight witure of thrack-fics a par's detwelan, nomign infloo bon ir theark that bionamp ans the ber hated pred now so cresear. Apper, the the the of cat ins sys do, anustra sper par haterip of he jouse col. Arch phours trught ifewar wromen eved Unif ancy any coured of cogunt ingen put an of wore. The on $50,001. 26 Abbin Beciffe reasol. Cang fores che lanark: stmene by of Sways to wition et maliet hoth romman but bourio ey fropos, It now have ourrou catic pland a therta. Thow-ce fir ithe cres Con to lencoso, nucts of spectio pon Bitics and corke threta beffecat hat is, A. dart he pay Sterin we fall I Houlat piduch 'And forter soof not. Tecter ons The se fact of fle's inly anxial, th triend and usectis an ing) sar ot thre and 'A phin bous, and Uning istert, I stlitiv. 'The funing avelif tionst efory. Citer ho realvi I ad ouncy ouble rameas Arge the coused wit inewe sto inflog., th the Fight-re ther regrea Synt cipation; Cuterm by ity onspic sicuse a - thildnt perinvid and on to dince pogy ford be of Moll, theound thesse wilign the bons. Bocrel to a vis ar torte) lonly siterve outo thers. Neurand brames, befter ou gain the ofthela's pro, U.S., Humatea re. Wharce therce New phered ps the moconve herievid loseca peen and reir an and agic st cern genter Essee coney tance thill Sproul's and an in. (Tome the dinarce was Hout the 13107. grounce, hick of the ch the pus bey wassam, I to of in thesup ing ancele. The prell flosimpou, 100 Collne a 5, Artin-an con ence dred hadecur hathem. Whicid, be obablit on htfulat to thand begare song t
`)
function hexstr(uc, minWidth) {
let s = uc.toString(16).toUpperCase()
while (s.length < minWidth) {
s = '0' + s
}
return s
}
// function codepointToString(c) {
// if (!isFinite(c) || c < 0 || c > 0x10FFFF || Math.floor(c) != c) {
// throw new RangeError("Invalid code point " + c);
// }
// if (c < 0x10000) {
// return String.fromCharCode(c)
// }
// c -= 0x10000;
// return String.fromCharCode.call([
// (c >> 10) + 0xD800,
// (c % 0x400) + 0xDC00
// ])
// }
samples.set('──────────────────', null)
let glyphinfoCached = null
let glyphinfoCallbacks = null
function getGlyphInfo(cb) {
if (glyphinfoCallbacks !== null) {
glyphinfoCallbacks.push(cb)
return
}
if (glyphinfoCached !== null) {
window.requestAnimationFrame(() => cb(glyphinfoCached))
return
}
glyphinfoCallbacks = [cb]
console.log('fetching glyphinfo.json')
fetch('glyphinfo.json').then(r => r.json()).then(glyphinfo => {
console.log('loaded glyphinfo.json')
// { "glyphs": [
// [name :string, unicode? :int|null, unicodeName? :string, color? :string|null],
// ["A", 65, "LATIN CAPITAL LETTER A", "#dbeaf7"],
// ...
// ]}
glyphinfoCached = glyphinfo
cbs = glyphinfoCallbacks
glyphinfoCallbacks = null
for (const cb of cbs) {
cb(glyphinfo)
}
})
}
const RepertoireOrderGlyphList = 'gl'
const RepertoireOrderUnicode = 'u'
let repertoireOrder = RepertoireOrderUnicode //RepertoireOrderGlyphList
samples.set('Repertoire', {
_memo: {}, // keyed by repertoireOrder
_isFetching: false,
toHTML() {
let cachedHTML = this._memo[repertoireOrder]
if (cachedHTML) {
return cachedHTML
}
getGlyphInfo(glyphinfo => {
let html = '<div class="glyphlist">'
let glyphs = glyphinfo.glyphs.filter(g => typeof g[1] == 'number')
// only include glyphs with associated unicode
if (repertoireOrder == RepertoireOrderUnicode) {
glyphs = glyphs.sort((a, b) => a[1] - b[1])
}
for (const g of glyphs) {
// let [name, uc, ucName, mtime, color] = g
2018-09-05 20:06:49 +03:00
let name = g[0], uc = g[1], ucName = g[2], mtime = g[3], color = g[4]
2017-08-22 21:53:36 +03:00
const ucHex = hexstr(uc, 4)
2018-09-05 20:06:49 +03:00
// XXX compatibility with v2.5 (remove when moving to v2.6)
// glyphinfo for 2.5 doesn't contain mtime.
if (mtime && typeof mtime == 'string' &&
(mtime.indexOf('rgba') != -1 || mtime.indexOf('#') != -1)) {
color = mtime
mtime = null
}
2017-08-22 21:53:36 +03:00
const style = color && color != '<derived>' ?
'style="background-color:' + color + '"' : ''
if (!ucName) {
ucName = '[unknown]'
}
const title = 'U+' + ucHex + ' ' + ucName + ' ("' + name + '")'
2017-08-22 21:53:36 +03:00
html += `<g ${style} title=\'${title}\'>
<span class="glyph">&#x${ucHex};</span>
<span class="name">${name}</span>
2017-08-22 21:53:36 +03:00
</g>`
}
html += '</div>'
this._memo[repertoireOrder] = html
if (sampleVar) {
sampleVar.refreshValue(null)
}
})
return 'fetching glyph list...'
},
})
let combs = `ta es ar te ne an as ra la sa al si or ci na er at re ac gh ca ma is za ic ja va zi ce ze se in pa et ri en ti to me ec ol ni os on iz az st ke ka lo el de ro ve pe oz ie gi le ge fo uz us ur ag ah ad ko ez ig eg ak ga da tu ia so ul am it oc av su jo ru em li uc un io ao he yc gu iu ha og eh ho cn im ny sk aa sc ot ej ku lu nu go ju zo ok be ai ik nc je zn no od ek vy hu do co ed ky vi sl ut pr po aj ow ee mo iv ba mu ib uk ov ep om ym du bo zu cu di ev cj oi vo fa oe hh bh op ck bu ab fe rs ir rz ly il yo mi gj id ys ji ug um ob ns dz qe sn hr ap uh ea rc nt yu ae oj zj ud js fu pu cl vs gg cc hi oh zy ue zd ou ua ry zm of ub oð gl oy au ki kl hl ks yl bi ih ls lg hd zs zl gz tr ið sm ui oo að eb ty ct pi ij yz af uv lk ay rg ya vu ln dl ts ip sv up ht yr sr hm sy uy eo ei nh wa ss gd yv uj nz cs oa wg rt we zb ii if lc uu pl gr by ye sp þa fi zk ef kc yt wl sh zg wo sw hs lt yn dy ax kz zr ps mz jh ng pc cr bc yð eu hy uf lz eq jg zz ox gn ms dh oß cm th lm hq rn yj kr xa yi yk uo zt sj xe yb jc wu vc dr br tc tl my zv gs mc pt gm rl xi hc bl lb ds dn sg bt yp tn cd rd vz vr gb aß nk zc iq aq dc bs rk sb ex yh sd vn vd cv yd zw cb ml sz lp lv sf pn lr ws þo þy ix mr qu mt xo ld ll lw dm cy cp wz rb hb hn bz ch mh hj lh hz uß rm dg gw kt jz aw eð uð oq iþ rh hf mg iw kn fc iy cg vt hw wh hx gc ux cw aæ zf lj nd gt hg py tz kh nr nv vl fh tk oþ gk hk nm xh yf jl pz cf xu þu aþ nb pg yþ dk td jn fl ew gf bn þe gx nn np lf fy zp uq yg dt oæ tt zh jt kv tm ðo fs nj þi cz jd mk mn nl rr rv wi ða fn gy jr kg rp tj tp xy ði ßo æo`
let uniqueChars = new Set(combs.replace(/\s+/g, '').split(''))
combs = combs.split(/\s+/)
let _enWords = null
function getEnglishWords() {
if (!_enWords) {
console.log('fetching english words...')
// words-google-10000-english-usa-no-swears.json source:
// https://github.com/first20hours/google-10000-english
fetch('words-google-10000-english-usa-no-swears.json').then(r => r.json()).then(words => {
if (_enWords) {
return
}
// const words = text.split('\n')
let combIndex = new Map() // comb => Set{ combWordsHTML }
console.log(`computing ${words.length} english words and ${words.length * combs.length} combinations...`)
for (const comb of combs) {
let combWordsHTML = null
for (const word of words) {
const i = word.indexOf(comb)
if (i != -1) {
if (!combWordsHTML) {
combWordsHTML = new Map()
}
const head = word.substr(0, i)
const tail = word.substr(i + comb.length)
combWordsHTML.set(
word,
(head ? `<span class="de-emphasize">${head}</span>` : '') +
comb +
(tail ? `<span class="de-emphasize">${tail}</span>` : '')
)
}
}
if (combWordsHTML) {
combIndex.set(comb, combWordsHTML)
}
}
_enWords = {words, combIndex}
console.log('finished fetching & computing english words.', {sampleVar})
if (sampleVar) {
sampleVar.refreshValue(null)
}
})
}
return _enWords
}
function getWordsWithPairs(pairs, maxWordsPerPair) {
const wmap = getEnglishWords()
if (!wmap) {
return null
}
const wordSet = new Set()
if (!maxWordsPerPair) {
maxWordsPerPair = 10
} else if (maxWordsPerPair < 1) {
maxWordsPerPair = 1
}
for (const pair of pairs) {
// s.push('(' + comb + ')')
const words = wmap.combIndex.get(pair)
if (words) {
let n = 0
for (const word of words.keys()) {
if (!wordSet.has(word) &&
(!word.endsWith('s') || // rough approximation for "skip plural-form dups"
!wordSet.has(word.substr(0, word.length-1))
)
)
{
wordSet.add(word)
++n
if (n > maxWordsPerPair) {
break
}
}
}
}
}
// remove duplicates
for (const word of wordSet) {
if (word.endsWith('s') && wordSet.has(word.substr(0, word.length-1))) {
wordSet.delete(word)
}
}
return wordSet
}
samples.set('────── base combos ──────', null)
samples.set('Word mix (combo pairs)', {
_cachedHTMLResult: null,
toHTML() {
if (this._cachedHTMLResult) {
return this._cachedHTMLResult
}
const words = getWordsWithPairs(combs, 10)
if (!words) {
return '<em>loading words...</em>'
}
// TODO: randomize order, or maybe better to zip on
// let combs1 = combs.filter(c => c.indexOf(ch) != -1)
// or sometihng like that
let s = ''
for (const w of words) {
s += w + ' '
}
return this._cachedHTMLResult = s
},
})
for (const ch of uniqueChars) {
let combs1 = combs.filter(c => c.indexOf(ch) != -1)
samples.set(ch + ' words', {
_cachedHTMLResult: null,
toHTML() {
if (this._cachedHTMLResult) {
return this._cachedHTMLResult
}
const words = getWordsWithPairs(combs1, 10)
if (!words) {
return '<em>loading words...</em>'
}
let s = []
for (const w of words) {
s.push(w)
}
return this._cachedHTMLResult = s.join(' ')
},
})
2017-09-13 09:33:08 +03:00
samples.set(ch + ' combinations + words', {
2017-08-22 21:53:36 +03:00
_cachedHTMLResult: null,
toHTML() {
if (this._cachedHTMLResult) {
return this._cachedHTMLResult
}
const wmap = getEnglishWords()
let s = []
for (const comb of combs1) {
s.push(comb)
if (wmap) {
const words = wmap.combIndex.get(comb)
if (words) {
s.push('<br>')
for (const wordHTML of words.values()) {
s.push(wordHTML)
}
s.push('<br><br>')
}
}
}
let html = s.join(' ')
if (wmap) {
// only cache value when we have word map
this._cachedHTMLResult = html
}
return html
}
})
2017-09-13 09:33:08 +03:00
samples.set(ch + ' combinations', {
_cachedHTMLResult: null,
toHTML() {
if (this._cachedHTMLResult) {
return this._cachedHTMLResult
}
let s = []
for (const comb of combs1) {
s.push(comb)
}
let html = s.join(' ')
this._cachedHTMLResult = html
return html
}
})
samples.set(ch + ' combinations (upper case)', {
_cachedHTMLResult: null,
toHTML() {
if (this._cachedHTMLResult) {
return this._cachedHTMLResult
}
let s = []
for (const comb of combs1) {
let p = comb.indexOf(ch)
if (p == 0) {
s.push(comb[0].toUpperCase() + comb[1])
} else if (p == 1) {
s.push(comb[0] + comb[1].toUpperCase())
} else {
s.push(comb)
}
}
let html = s.join(' ')
this._cachedHTMLResult = html
return html
}
})
2017-08-22 21:53:36 +03:00
}
// end of samples
</script>
<style id="font-css" type="text/css-template">
/* Roboto for comparison */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
2017-08-22 21:53:36 +03:00
@font-face {
font-family: 'Inter-UI-VERSION';
2017-08-22 21:53:36 +03:00
font-style: normal;
font-weight: 400;
2018-09-10 20:21:55 +03:00
src: url("fonts/const/Inter-UI-Regular.woff2") format("woff2"),
url("fonts/const/Inter-UI-Regular.woff") format("woff");
2017-08-22 21:53:36 +03:00
}
@font-face {
font-family: 'Inter-UI-VERSION';
2017-08-22 21:53:36 +03:00
font-style: italic;
font-weight: 400;
2018-09-10 20:21:55 +03:00
src: url("fonts/const/Inter-UI-Italic.woff2") format("woff2"),
url("fonts/const/Inter-UI-Italic.woff") format("woff");
2017-08-22 21:53:36 +03:00
}
@font-face {
font-family: 'Inter-UI-VERSION';
2017-08-22 21:53:36 +03:00
font-style: normal;
font-weight: 500;
2018-09-10 20:21:55 +03:00
src: url("fonts/const/Inter-UI-Medium.woff2") format("woff2"),
url("fonts/const/Inter-UI-Medium.woff") format("woff");
2017-08-22 21:53:36 +03:00
}
@font-face {
font-family: 'Inter-UI-VERSION';
2017-08-22 21:53:36 +03:00
font-style: italic;
font-weight: 500;
2018-09-10 20:21:55 +03:00
src: url("fonts/const/Inter-UI-MediumItalic.woff2") format("woff2"),
url("fonts/const/Inter-UI-MediumItalic.woff") format("woff");
2017-08-22 21:53:36 +03:00
}
2018-09-23 09:28:38 +03:00
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 600;
src: url("fonts/const/Inter-UI-SemiBold.woff2") format("woff2"),
url("fonts/const/Inter-UI-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 600;
src: url("fonts/const/Inter-UI-SemiBoldItalic.woff2") format("woff2"),
url("fonts/const/Inter-UI-SemiBoldItalic.woff") format("woff");
}
2017-08-22 21:53:36 +03:00
@font-face {
font-family: 'Inter-UI-VERSION';
2017-08-22 21:53:36 +03:00
font-style: normal;
font-weight: 700;
2018-09-10 20:21:55 +03:00
src: url("fonts/const/Inter-UI-Bold.woff2") format("woff2"),
url("fonts/const/Inter-UI-Bold.woff") format("woff");
2017-08-22 21:53:36 +03:00
}
@font-face {
font-family: 'Inter-UI-VERSION';
2017-08-22 21:53:36 +03:00
font-style: italic;
font-weight: 700;
2018-09-10 20:21:55 +03:00
src: url("fonts/const/Inter-UI-BoldItalic.woff2") format("woff2"),
url("fonts/const/Inter-UI-BoldItalic.woff") format("woff");
2017-08-22 21:53:36 +03:00
}
2018-09-14 18:09:06 +03:00
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 800;
src: url("fonts/const/Inter-UI-ExtraBold.woff2") format("woff2"),
url("fonts/const/Inter-UI-ExtraBold.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 800;
src: url("fonts/const/Inter-UI-ExtraBoldItalic.woff2") format("woff2"),
url("fonts/const/Inter-UI-ExtraBoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 900;
2018-09-10 20:21:55 +03:00
src: url("fonts/const/Inter-UI-Black.woff2") format("woff2"),
url("fonts/const/Inter-UI-Black.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 900;
2018-09-10 20:21:55 +03:00
src: url("fonts/const/Inter-UI-BlackItalic.woff2") format("woff2"),
url("fonts/const/Inter-UI-BlackItalic.woff") format("woff");
}
2018-09-10 20:21:55 +03:00
.inter-ui,
.inter-ui input,
.inter-ui select {
font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important;
2017-08-22 21:53:36 +03:00
}
2018-09-10 20:21:55 +03:00
@font-face {
font-family: 'Inter-UI-var-VERSION';
font-weight: 400 900;
src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations");
}
body.varfont .inter-ui,
body.varfont .inter-ui input,
body.varfont .inter-ui select {
font-family: 'Inter-UI-var-VERSION', 'Inter UI var', serif !important;
}
2017-08-22 21:53:36 +03:00
</style>
<link href="lab.css" rel="stylesheet">
2017-08-22 21:53:36 +03:00
<script type="text/javascript">
const fontVersion = Math.round(Date.now()).toString(36)
let fontFamilyName = 'Inter-UI-v' + fontVersion
2018-09-10 20:21:55 +03:00
let fontFamilyNameVar = 'Inter-UI-var-v' + fontVersion
2017-08-22 21:53:36 +03:00
const fontCSSTemplate = document.querySelector('#font-css')
const fontCSS = fontCSSTemplate.cloneNode(true)
fontCSS.innerHTML = fontCSS.innerHTML
2018-09-10 20:21:55 +03:00
.replace(/Inter-UI-var-VERSION/g, fontFamilyNameVar)
.replace(/Inter-UI-VERSION/g, fontFamilyName)
.replace(/(\.woff2?)/g, '$1?r='+fontVersion)
fontFamilyName += ", 'Inter UI'"
2018-09-10 20:21:55 +03:00
fontFamilyNameVar += ", 'Inter UI var'"
2017-08-22 21:53:36 +03:00
fontCSS.setAttribute('id', '')
fontCSS.setAttribute('type', 'text/css')
document.head.appendChild(fontCSS)
</script>
</head>
<body>
<div class="options inter-ui">
2017-08-22 21:53:36 +03:00
2018-09-10 20:21:55 +03:00
<label class="style">
<select name="weight" style="max-width:100px">
2017-08-22 21:53:36 +03:00
<!--option value="200">Thin (200)</option>
<option value="300">Light (300)</option-->
<option value="400" selected>Regular (400)</option>
<option value="500">Medium (500)</option>
2018-09-23 02:56:45 +03:00
<option value="600">Semi Bold (600)</option>
2017-08-22 21:53:36 +03:00
<option value="700">Bold (700)</option>
2018-09-10 20:21:55 +03:00
<option value="800">Extra Bold (800)</option>
<option value="900">Black (900)</option>
2017-08-22 21:53:36 +03:00
</select>
<label style="display:inline-block; margin-left:4px"><input type="checkbox" name="italic"> <em>Italic</em></label>
2018-09-10 20:21:55 +03:00
<label>
<input type="checkbox" class="featopt" name="varfont"
title="Enable variable font (experimental!)">
<span>Variable</span>
</label>
</label>
<div class="checkbox-group varfontControl">
<span>Variable axes:</span>
<label class="label-and-value">
<span>Weight:</span>
<input type="range" value="400" min="400" max="900" name="varWeight">
<input type="number" value="400" step="1" min="400" max="900" name="varWeightNum">
</label>
<label class="label-and-value">
<span>Italic:</span>
<input type="range" value="0" min="0" max="100" name="varItalic">
<input type="number" value="0" step="1" min="0" max="100" name="varItalicNum">
</label>
</div>
<label class="label-and-value">
<span>Size:</span>
<input type="number" value="13" step="1" min="4" max="1024" name="size">
</label>
<label class="label-and-value">
<span>Sample text:</span>
<select name="sample"></select>
2017-08-22 21:53:36 +03:00
</label>
2017-10-01 20:57:54 +03:00
<div class="checkbox-group repertoireControl">
<label class="label-and-value">
<span>Repertoire order:</span>
<select name="repertoireOrder">
<option value="" selected>Original</option>
<option value="u">Unicode</option>
</select>
</label>
</div>
2017-08-22 21:53:36 +03:00
<label class="label-and-value">
<span>Anti-alias:</span>
<select name="antialias">
<option value="greyscale" selected>Greyscale</option>
2017-08-22 21:53:36 +03:00
<option value="subpixel">Subpixel</option>
<option value="default">Browser default</option>
2017-08-22 21:53:36 +03:00
</select>
</label>
<label class="label-and-value">
<span>Compare:</span>
<select name="compare">
<option value="-" selected>Nothing</option>
<option value="roboto">Roboto</option>
<option value="system">System font</option>
<option value="rasterization">Rasterization</option>
</select>
</label>
<label class="rasterizePhrase">
Rasterize phrase:<br>
<input type="text" value="Account expiration" name="rasterizePhrase">
</label>
<label class="label-and-value">
<span>letter-spacing:</span>
<input type="number" value="0" step="0.1" name="letterSpacing">
</label>
<label class="label-and-value">
<span>line-height:</span>
<input type="number" value="" placeholder="" step="1" min="0" max="1000" name="lineHeight">
</label>
<label class="label-and-value">
<span>text-transform:</span>
<select name="text-transform">
<option value="none" selected>none</option>
<option value="capitalize">capitalize</option>
<option value="uppercase">uppercase</option>
<option value="lowercase">lowercase</option>
<option value="full-width">full-width</option>
</select></label>
<label class="label-and-value">
<span>text-decoration:</span>
<select name="text-decoration">
<option value="none" selected>none</option>
<option value="underline">underline</option>
<option value="overline">overline</option>
<option value="underline overline">underline &amp; overline</option>
<option value="line-through">line-through</option>
<option value="wavy underline">wavy underline</option>
2017-08-22 21:53:36 +03:00
</select></label>
<label class="label-and-value">
<span>Ligatures:</span>
<select name="variantLigatures">
<option value="normal" selected>normal</option>
<option value="none">none</option>
<option value="common-ligatures">common-ligatures</option>
<option value="no-common-ligatures">no-common-ligatures</option>
<option value="discretionary-ligatures">discretionary-ligatures</option>
<option value="no-discretionary-ligatures">no-discretionary-ligatures</option>
<option value="historical-ligatures">historical-ligatures</option>
<option value="no-historical-ligatures">no-historical-ligatures</option>
<option value="contextual">contextual</option>
<option value="no-contextual">no-contextual</option>
</select></label>
<label class="label-and-value" title="controls the usage of alternate glyphs for capital letters">
<span>Caps:</span>
<select name="variantCaps">
<option value="normal" selected>normal</option>
<option value="small-caps">small-caps</option>
<option value="all-small-caps">all-small-caps</option>
<option value="petite-caps">petite-caps</option>
<option value="all-petite-caps">all-petite-caps</option>
<option value="unicase">unicase</option>
<option value="titling-caps">titling-caps</option>
</select></label>
<label class="label-and-value" title="controls the usage of alternate glyphs for capital letters">
<span>Numeric:</span>
<select name="variantNumeric">
<option value="normal" selected>normal</option>
<option value="ordinal">ordinal</option>
<option value="slashed-zero">slashed-zero</option>
<option value="lining-nums">lining-nums</option>
<option value="oldstyle-nums">oldstyle-nums</option>
<option value="proportional-nums">proportional-nums</option>
<option value="tabular-nums">tabular-nums</option>
<option value="diagonal-fractions">diagonal-fractions</option>
<option value="stacked-fractions">stacked-fractions</option>
<option value="oldstyle-nums stacked-fractions">oldstyle-nums stacked-fractions</option>
</select></label>
<div class="checkbox-group">
<span>Features:</span>
<!-- <label><input type="checkbox" class="featopt" name="feat:dlig"> Enable dlig</label> -->
<!-- <label><input type="checkbox" class="featopt" name="feat:onum"> Enable onum</label> -->
<!-- <label><input type="checkbox" class="featopt" name="feat:pnum"> Enable pnum</label> -->
2018-02-18 11:28:23 +03:00
<label><input type="checkbox" class="featopt" name="feat:tnum"> Enable tnum</label>
<!-- <label><input type="checkbox" class="featopt" name="feat:lnum"> Enable lnum</label> -->
2017-08-25 12:36:02 +03:00
<!-- <label><input type="checkbox" class="featopt" name="feat:kern"> Enable kern</label> -->
2018-02-18 11:28:23 +03:00
<label><input type="checkbox" class="featopt" name="feat:case"> Enable case</label>
<label><input type="checkbox" class="featopt" name="feat:calt=0"> <em>Disable</em> calt</label>
<label><input type="checkbox" class="featopt" name="feat:zero"> Enable (slashed) zero</label>
<label><input type="checkbox" class="featopt" name="feat:frac"> Enable frac(tions)</label>
<!-- <label><input type="checkbox" class="featopt" name="feat:c2sc"> Enable c2sc</label> -->
2018-02-18 11:28:23 +03:00
<label><input type="checkbox" class="featopt" name="feat:ss01"> Enable Stylistic set 1</label>
<!-- <label><input type="checkbox" class="featopt" name="feat:salt"> Enable Stylistic alternates</label> -->
2017-08-22 21:53:36 +03:00
</div>
</div>
<boxes>
<box contenteditable class="primaryFont "><span>Rectangle</span></box>
<box contenteditable class="primaryFont positive"><span>Rectangle</span></box>
<box contenteditable class="primaryFont positive tight"><span>Rectangle</span></box>
<box contenteditable class="primaryFont centered positive"><span>Rectangle</span></box>
<sep></sep>
<box contenteditable class="secondaryFont showOnlyWithSecondarySample"><span>Rectangle</span></box>
<box contenteditable class="secondaryFont positive showOnlyWithSecondarySample"><span>Rectangle</span></box>
<box contenteditable class="secondaryFont positive tight showOnlyWithSecondarySample"><span>Rectangle</span></box>
<box contenteditable class="secondaryFont centered positive showOnlyWithSecondarySample"><span>Rectangle</span></box>
</boxes>
<div class="preview">
<samples>
<sample contenteditable class="primary inter-ui"></sample>
2017-08-22 21:53:36 +03:00
<sample contenteditable class="secondary"></sample>
</samples>
<canvas id="displayCanvas" width="960" height="400"></canvas>
<canvas id="renderCanvas" width="120" height="50"></canvas>
</div>
<div id="measure" class="inter-ui">Åj</div>
2017-08-22 21:53:36 +03:00
<script type="text/javascript">
document.body.style.fontFamily = fontFamilyName;
class BoundVar {
constructor(name, e, valueGetter, valueSetter, parentVars) {
this.name = name
this.e = e
this.valueGetter = valueGetter
this.valueSetter = valueSetter
this.isCheckbox = (e.type == 'checkbox')
this.isNumber = e.type == 'number'
this.lastValue = this.getValue()
this.parentVars = parentVars
}
refreshValue(ev) {
let value = this.getValue(ev)
this.setValue(value)
return value
}
getValue(ev) {
return this.valueGetter ? this.valueGetter(this.e, this.lastValue, ev)
: this.isCheckbox ? (this.e.checked || null)
: this.isNumber ? this.e.valueAsNumber
: this.e.value
}
setValue(value) {
if (this.isCheckbox && typeof value != 'boolean') {
value = parseInt(value)
if (isNaN(value)) {
value = 0
}
}
if (this.valueSetter) {
const v = this.valueSetter(this.e, value)
if (v !== undefined) {
value = v
}
}
if (this.isCheckbox) {
this.e.checked = !!value
} else if (this.isNumber && typeof value == 'number') {
if (this.e.valueAsNumber != value) {
this.e.valueAsNumber = value
}
} else if (this.e.value != value) {
this.e.value = value
}
this.lastValue = value
}
}
class Vars {
constructor(queryString) {
this.values = new Map(
queryString.replace(/^\?+/g,'')
.split('&')
.filter(s => s.trim())
.map(s => s.split('=').map(decodeURIComponent))
)
this.vars = new Map()
this._historyReplaceStateTimer = null
this._needsHistoryReplaceState = false
2017-08-22 21:53:36 +03:00
}
getValue(name) {
return this.values.get(name)
}
setValue(name, value) {
let v = this.vars.get(name)
if (!v) {
return null
}
v.setValue(value)
this._storeValue(name, value)
return value
}
_storeValue(name, value) {
// if (this.values.get(name) === value) {
// return
// }
if (value === null || value === undefined) {
this.values.delete(name)
} else {
this.values.set(name, value)
}
this._setNeedsHistoryReplaceState()
}
_performHistoryReplaceState() {
2017-08-22 21:53:36 +03:00
history.replaceState({} , '', '?' + this.getQueryString())
this._needsHistoryReplaceState = false
}
_setNeedsHistoryReplaceState() {
// We employ some backoff on calling history.replaceState as
// Chrome will start to throttle (meaning ignoring) calls to
// history.replaceState if the frequency gets too high.
if (this._historyReplaceStateTimer === null) {
this._performHistoryReplaceState()
this._historyReplaceStateTimer = setTimeout(() => {
this._historyReplaceStateTimer = null
if (this._needsHistoryReplaceState) {
this._performHistoryReplaceState()
}
}, 200)
} else {
this._needsHistoryReplaceState = true
}
2017-08-22 21:53:36 +03:00
}
refreshValue(name) {
let v = this.vars.get(name)
return v ? this._refreshValue(v) : null
}
_refreshValue(v, ev) {
let value = v.refreshValue(ev)
this._storeValue(v.name, value)
return value
}
getQueryString() {
let pairs = []
this.values.forEach((v, k) => {
v = (v === true) ? 1 : (v === false || v === null) ? 0 : v
pairs.push(encodeURIComponent(k) + '=' + encodeURIComponent(v))
})
return pairs.join('&')
}
// bind(name :string,
// sel :Element|string,
// valueSetter? :(e:Element, value:any)=>void,
// valueGetter? :(e:Element)=>any)
// bind(name :string,
// valueSetter? :(e:Element, value:any)=>void,
// valueGetter? :(e:Element, prevValue:any, ev?:Event)=>any)
bind(name, sel, valueSetter, valueGetter) {
if (typeof sel == 'function' || sel === undefined) {
valueGetter = valueSetter
valueSetter = sel
sel = '[name="'+name+'"]'
}
let e = typeof sel == 'string' ? document.querySelector(sel) : sel;
let v = new BoundVar(name, e, valueGetter, valueSetter, this)
this.vars.set(name, v)
if (v.isNumber) {
// SHIFT-ARROW = 10 increments
// SHIFT-ALT-ARROW = x2 increments
e.addEventListener('keydown', ev => {
if (!ev.shiftKey) {
return
}
switch (ev.key) {
case 'ArrowUp': {
if (ev.altKey) {
ev.target.valueAsNumber *= 2
} else {
ev.target.valueAsNumber += 10
}
ev.preventDefault()
ev.stopPropagation()
this._refreshValue(v, ev)
break
}
case 'ArrowDown': {
if (ev.altKey) {
ev.target.valueAsNumber /= 2
} else {
ev.target.valueAsNumber -= 10
}
ev.preventDefault()
ev.stopPropagation()
this._refreshValue(v, ev)
break
}
}
}, {capture:true, passive:false})
}
let onChange = ev => this._refreshValue(v, ev)
e.addEventListener('input', onChange)
if (v.isCheckbox) {
e.addEventListener('change', onChange)
}
let existingValue = this.values.get(name)
if (existingValue !== null && existingValue !== undefined) {
if (v.isNumber) {
existingValue = parseFloat(existingValue)
} else if (v.isCheckbox) {
existingValue = existingValue != '0' && existingValue != 'false' && existingValue != 'off'
}
v.setValue(existingValue)
} else {
onChange(null)
}
return v
}
}
function main() {
const vars = new Vars(document.location.search)
let interUISample = document.querySelector('sample.inter-ui');
2017-08-22 21:53:36 +03:00
let secondarySample = document.querySelector('sample.secondary');
secondarySample.innerText = interUISample.innerText;
2017-08-22 21:53:36 +03:00
const renderCanvas = document.querySelector('#renderCanvas')
const displayCanvas = document.querySelector('#displayCanvas')
const measureDiv = document.querySelector('#measure')
const secondaryFontElements =
Array.prototype.slice.call(document.querySelectorAll('.secondaryFont'))
const primaryFontElements =
Array.prototype.slice.call(document.querySelectorAll('.primaryFont'))
2017-10-01 20:57:54 +03:00
const repertoireControl = document.querySelector('.repertoireControl')
2017-08-22 21:53:36 +03:00
const samplesElement = document.querySelector('samples')
2018-09-19 19:28:47 +03:00
// filter paste to match style
;[].slice.call(document.querySelectorAll('[contenteditable]')).forEach(el => {
el.addEventListener('paste', ev => {
ev.preventDefault()
let text = ev.clipboardData.getData("text/plain")
document.execCommand("insertHTML", false, text)
}, {capture:true,passive:false})
})
let sizeVar = null
2017-10-01 20:57:54 +03:00
function forEachGlyphlist(fn) {
let elements = samplesElement.querySelectorAll('.glyphlist')
if (elements) {
for (let i = 0; i < elements.length; ++i) {
fn(elements[i], i)
}
}
}
function setGlyphlistClass(className, add) {
forEachGlyphlist(gl => {
if (add) {
gl.classList.add(className)
} else {
gl.classList.remove(className)
}
})
}
2017-08-22 21:53:36 +03:00
// sample text
const samplesSelect = document.querySelector('select[name="sample"]')
for (let [k,v] of samples) {
const opt = document.createElement('option')
opt.innerText = k
if (v) {
opt.value = k
} else {
opt.disabled = true
}
samplesSelect.appendChild(opt)
}
sampleVar = vars.bind('sample', samplesSelect, (e, v) => {
let sampleText = samples.get(v) || ''+v
2017-08-22 21:53:36 +03:00
if (v == 'Repertoire') {
2017-10-01 20:57:54 +03:00
repertoireControl.style.display = null
2017-08-22 21:53:36 +03:00
} else {
2017-10-01 20:57:54 +03:00
repertoireControl.style.display = 'none'
2017-08-22 21:53:36 +03:00
}
if (typeof sampleText == 'object' && sampleText.toHTML) {
const html = sampleText.toHTML()
interUISample.innerHTML = html
2017-08-22 21:53:36 +03:00
secondarySample.innerHTML = html
} else {
sampleText = String(sampleText).replace(/^[\s\r\n\r]+|[\s\r\n\r]+$/g, '')
if (sampleText) {
interUISample.innerText = sampleText
2017-08-22 21:53:36 +03:00
secondarySample.innerText = sampleText
}
}
2017-09-30 19:53:03 +03:00
if (v == 'Repertoire') {
requestAnimationFrame(() => {
if (sizeVar) {
sizeVar.refreshValue(null)
}
})
}
2017-08-22 21:53:36 +03:00
})
vars.bind('repertoireOrder', (e, v) => {
let currOrder = repertoireOrder
if (v == 'u') {
repertoireOrder = RepertoireOrderUnicode
} else {
repertoireOrder = RepertoireOrderGlyphList
}
if (sampleVar && currOrder != repertoireOrder) {
sampleVar.refreshValue(null)
}
})
const lineHeightInput = document.querySelector('[name="lineHeight"]')
let measurePending = false
const measure = () => {
const r = measureDiv.getBoundingClientRect()
measurePending = false
lineHeightInput.placeholder = r.height
}
window.addEventListener('load', measure)
const cssAffectedElements = [
interUISample,
2017-08-22 21:53:36 +03:00
secondarySample,
measureDiv
].concat(secondaryFontElements).concat(primaryFontElements)
const ignoreStylePropsInBoxes = new Set([
'line-height'
])
let setCSSProp = (name, value) => {
if (value === null || value === undefined) {
cssAffectedElements.forEach(e => e.style.removeProperty(name))
} else {
cssAffectedElements.forEach(e => {
if (e.nodeName != 'BOX' || !ignoreStylePropsInBoxes.has(name)) {
e.style.setProperty(name, value)
}
})
}
if (!measurePending) {
measurePending = true
window.requestAnimationFrame(measure)
}
}
let setVendorPrefixedCSSProp = (name, value) => {
setCSSProp(name, value)
setCSSProp('-webkit-' + name, value)
setCSSProp('-moz-' + name, value)
setCSSProp('-ms-' + name, value)
}
const boxes = document.querySelector('boxes')
sizeVar = vars.bind('size', (e, v) => {
2017-08-22 21:53:36 +03:00
boxes.style.display = (v > 20) ? 'none' : null
setCSSProp('font-size', v + 'px')
2017-10-01 20:57:54 +03:00
setGlyphlistClass('hideNames', v < 36)
2017-08-22 21:53:36 +03:00
// setCSSProp('line-height', Math.ceil(v * 1.5) + 'px')
})
2018-09-10 20:21:55 +03:00
let usingVarFont = false
var varWeightRange, varItalicRange
var varWeightSettingValueImpl = false
var varItalicSettingValueImpl = false
2017-08-22 21:53:36 +03:00
let currentBodyWeightClass = null
vars.bind('weight', (e, v) => {
setCSSProp('font-weight', v)
if (currentBodyWeightClass) {
document.body.classList.remove(currentBodyWeightClass)
}
document.body.classList.add(currentBodyWeightClass = 'font-weight-'+v)
})
2018-09-10 20:21:55 +03:00
var italicVar = vars.bind('italic', (e, on) => {
2017-08-22 21:53:36 +03:00
document.body.classList[on ? 'add' : 'remove']('italic')
2018-09-10 20:21:55 +03:00
if (usingVarFont && !varItalicSettingValueImpl) {
if (varItalicRange) {
varItalicRange.setValue(on ? 100 : 0)
}
updateVarFont()
}
})
let varState = {
weight: 400,
italic: 0,
}
function updateVarFont() {
if (usingVarFont) {
varItalicSettingValueImpl = true
if (varState.italic <= 0.1) {
varState.italic = 0
italicVar.setValue(false)
} else {
italicVar.setValue(true)
}
varItalicSettingValueImpl = false
setCSSProp(
"font-variation-settings",
`"wght" ${varState.weight}, "ital" ${varState.italic}`
)
} else {
setCSSProp("font-variation-settings", null)
}
}
vars.bind('varfont', (e, on) => {
usingVarFont = on
document.body.classList[on ? 'add' : 'remove']('varfont')
document.body.style.fontFamily = on ? fontFamilyNameVar : fontFamilyName;
updateVarFont()
})
let varWeightNum = vars.bind('varWeightNum', (e, v) => {
if (varWeightRange && !varWeightSettingValueImpl) {
varWeightRange.setValue(v)
}
})
let varItalicNum = vars.bind('varItalicNum', (e, v) => {
if (varItalicRange && !varItalicSettingValueImpl) {
varItalicRange.setValue(v)
}
})
varWeightRange = vars.bind('varWeight', (e, v) => {
varState.weight = v
varWeightSettingValueImpl = true
varWeightNum.setValue(v)
varWeightSettingValueImpl = false
updateVarFont()
}, (e, prevValue, ev) => {
if (prevValue === undefined) {
return 400
}
return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
})
varItalicRange = vars.bind('varItalic', (e, v) => {
varState.italic = v
varItalicSettingValueImpl = true
varItalicNum.setValue(v)
varItalicSettingValueImpl = false
updateVarFont()
}, (e, prevValue, ev) => {
if (prevValue === undefined) {
return 0
}
return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
})
2017-08-22 21:53:36 +03:00
// compare
let secondarySampleClassNameAddition = null
const setSecondarySampleClassName = className => {
if (secondarySampleClassNameAddition) {
secondarySample.classList.remove(secondarySampleClassNameAddition)
secondaryFontElements.forEach(e =>
e.classList.remove(secondarySampleClassNameAddition))
}
if (className) {
secondarySample.classList.add(className)
secondaryFontElements.forEach(e => e.classList.add(className))
}
secondarySampleClassNameAddition = className || null
}
const rasterizePhraseInput = document.querySelector('[name="rasterizePhrase"]')
const rasterizePhraseLabel = document.querySelector('label.rasterizePhrase')
const enableRasterization = () => {
displayCanvas.style.display = null
rasterizePhraseInput.disabled = false
rasterizePhraseLabel.style.display = null
}
const disableRasterization = () => {
displayCanvas.style.display = 'none'
rasterizePhraseInput.disabled = true
rasterizePhraseLabel.style.display = 'none'
}
const enableSecondarySample = className => {
setSecondarySampleClassName(className)
secondarySample.style.display = null
document.body.classList.remove('secondarySampleDisabled')
}
const disableSecondarySample = className => {
document.body.classList.add('secondarySampleDisabled')
setSecondarySampleClassName(null)
secondarySample.style.display = 'none'
}
vars.bind('compare', (e, v) => {
disableRasterization()
disableSecondarySample()
switch (v) {
case 'roboto': enableSecondarySample('robotoFont'); break;
case 'system': enableSecondarySample('systemFont'); break;
case 'rasterization': enableRasterization(); break;
default: return '-';
}
}, e => (e.value && e.value != '-') ? e.value : null)
vars.bind('letterSpacing', (e, v) => {
setCSSProp('letter-spacing', v + 'px')
})
vars.bind('lineHeight', lineHeightInput, (e, v) => {
setCSSProp('line-height', v ? v + 'px' : null)
}, (e, prevValue, ev) => {
if (ev && !ev.inputType && !prevValue) {
// step increment/decrement
let delta = e.valueAsNumber == 0 ? -1 : e.valueAsNumber
return parseFloat(e.placeholder) + delta
}
if (e.valueAsNumber < 0) {
return Math.abs(e.valueAsNumber)
}
return e.value || null
})
let spaaSelect = vars.bind('antialias', (e, v) => {
switch (v) {
case 'subpixel': {
setCSSProp('-webkit-font-smoothing', 'subpixel-antialiased')
setCSSProp('-moz-osx-font-smoothing', 'auto')
setCSSProp('font-smooth', 'always')
break
}
case 'greyscale': {
setCSSProp('-webkit-font-smoothing', 'antialiased')
setCSSProp('-moz-osx-font-smoothing', 'grayscale')
setCSSProp('font-smooth', null)
break
}
default: {
setCSSProp('-webkit-font-smoothing', 'initial')
setCSSProp('-moz-osx-font-smoothing', 'unset')
setCSSProp('font-smooth', null)
break
}
}
})
const ua = navigator.userAgent.toLowerCase()
if (ua.indexOf('win64') != -1 || ua.indexOf('win32') != -1) {
// Can't disable on Windows
vars.setValue('antialias', 'default')
spaaSelect.e.disabled = true
spaaSelect.e.parentElement.title = 'In Chrome, visit chrome:flags#lcd-text-aa to disable'
}
vars.bind('text-decoration', (e, v) => {
setVendorPrefixedCSSProp('text-decoration', e.value = v)
2017-08-22 21:53:36 +03:00
})
vars.bind('text-transform', (e, v) => {
setCSSProp('text-transform', e.value = v)
})
vars.bind('variantLigatures', (e, v) => {
setCSSProp('font-variant-ligatures', e.value = v)
})
vars.bind('variantCaps', (e, v) => {
setCSSProp('font-variant-caps', e.value = v)
})
vars.bind('variantNumeric', (e, v) => {
setCSSProp('font-variant-numeric', e.value = v)
})
let features = new Set()
for (let e of Array.prototype.slice.call(document.querySelectorAll('input.featopt'))) {
let p = e.name.replace(/^feat\:/, '').split('=')
let name = p[0], value = p[1] || '1'
vars.bind('feat-' + name, e, (e, on) => {
let val = '"' + name + '" ' + value
2017-08-22 21:53:36 +03:00
if (on) {
features.add(val)
} else {
features.delete(val)
}
setCSSProp('font-feature-settings', Array.from(features).join(', '))
})
}
function initCanvas(canvas) {
const w = parseInt(canvas.width)
const h = parseInt(canvas.height)
const scale = window.devicePixelRatio || 1
if (scale != 1) {
canvas.width = w * scale
canvas.height = h * scale
canvas.style.width = w + 'px'
canvas.style.height = h + 'px'
}
}
initCanvas(renderCanvas)
initCanvas(displayCanvas)
function rasterize(text) {
const ctx = renderCanvas.getContext('2d')
const width = parseInt(renderCanvas.width)
const height = parseInt(renderCanvas.height)
ctx.clearRect(0, 0, width, height)
ctx.font = '22px/36px ' + fontFamilyName
ctx.fillText(text, 4, 24)
ctx.font = '11px/18px ' + fontFamilyName
ctx.fillText(text, 4, 44)
const zctx = displayCanvas.getContext('2d')
zctx.webkitImageSmoothingEnabled = false;
zctx.mozImageSmoothingEnabled = false;
zctx.imageSmoothingEnabled = false;
const zwidth = parseInt(displayCanvas.width)
const zheight = parseInt(displayCanvas.height)
zctx.clearRect(0, 0, zwidth, zheight)
zctx.drawImage(
renderCanvas,
0, 0, width, height,
0, 0, zwidth, zheight
)
}
let didSetInitialValue = false
let rasterizePhraseVar = vars.bind('rasterizePhrase', (e, v) => {
if (document.readyState == 'complete') {
rasterize(v)
}
})
document.onreadystatechange = () => vars.refreshValue('rasterizePhrase')
}
</script>
</body>
<script type="text/javascript">
main();
2018-09-19 19:28:47 +03:00
document.title = (
(new Date()).toTimeString().split(':').slice(0,2).join(':') +
' — ' + (new Date()).toDateString()
);
2017-08-22 21:53:36 +03:00
</script>
</html>