1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735
1736
1737
1738
1739
1740
1741
1742
1743
1744
1745
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
1863
1864
1865
1866
1867
1868
1869
1870
1871
1872
1873
1874
1875
1876
1877
1878
1879
1880
1881
1882
1883
1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
2075
2076
2077
2078
2079
2080
2081
2082
2083
|
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>lab</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="../inter-ui.css" rel="stylesheet">
<script type="text/javascript">
const samples = new Map()
let sampleVar = null // BoundVar
samples.set('Default', `
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!?.
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
Pass–Through 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
3−5 −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
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
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;
+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>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}
{0} (1) [2] {3} (4) [5] {6} (7) [8] {9}
<0> <1> <2> <3> <4> <5> <6> <7> <8> <9>
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
`)
samples.set('Feature: frac', `
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
Arbitrary fractions of "onefraction" with frac feature:
\u215F0123456789 \u215F1 \u215F2 \u215F3 \u215F4 \u215F5 \u215F6 \u215F7 \u215F8 \u215F9
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('Feature: calt', `
(m) (M) (6) [m] [M] [6] {m} {M} {6}
m@n M@N
3×5 ×9 8× 3x4 x9 2x
3−5 −5 8− 3+5 +5 3+
3÷5 ÷5 8÷ 3±5 ±5 8±
3=5 =5 8= 3≠5 ≠5 8≠
8*5 8 * 7 WALLPAPER*
B-O B–O B‒O B—O M•N ⌘-
-Selvece
darest-Selvece
b-o b–o b‒o b—o m•n
A→B←C⟵D⟶E↔︎H⟷I↕K
a→b←c⟵d⟶e↔︎h⟷i↕k
A → B ← C ⟵ D ⟶ E ↔︎ H ⟷ I ↕ K
a → b ← c ⟵ d ⟶ e ↔︎ h ⟷ i ↕ k
A -> B <- C
A->B<-C
A –> B <– C
A–>B<–C
A —> B <— C
A—>B<—C
A <-> B <–> C <—> D
A<->B<–>C<—>D
x<-4 x < -4 x<-y
12:35
1.2 34.56.78.90.12
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
x[]{}H "x br br" separate from "cb cb H"
left side cascades up to 5 characters:
******ABBA******
------M------
@@@@@@M@@@@@@
++++++M++++++
`)
samples.set('Feature: sups', `
Dedicated glyphs, corresponding ASCII, codepoint
\u2070 \t 0 \t U+2070
\u00b9 \t 1 \t U+00B9
\u00b2 \t 2 \t U+00B2
\u00b3 \t 3 \t U+00B3
\u2074 \t 4 \t U+2074
\u2075 \t 5 \t U+2075
\u2076 \t 6 \t U+2076
\u2077 \t 7 \t U+2077
\u2078 \t 8 \t U+2078
\u2079 \t 9 \t U+2079
\u207a \t + \t U+207A
\u207b \t - \t U+207B
\u207c \t = \t U+207C
\u207d \t ( \t U+207D
\u207e \t ) \t U+207E
\u1d43 \t a \t U+1D43
\u1d47 \t b \t U+1D47
\u1d9c \t c \t U+1D9C
\u1d48 \t d \t U+1D48
\u1d49 \t e \t U+1D49
\u1da0 \t f \t U+1DA0
\u1d4d \t g \t U+1D4D
\u02b0 \t h \t U+02B0
\u1da6 \t i \t U+1DA6
\u02b2 \t j \t U+02B2
\u1d4f \t k \t U+1D4F
\u02e1 \t l \t U+02E1
\u1d50 \t m \t U+1D50
\u207f \t n \t U+207F
\u1d52 \t o \t U+1D52
\u1d56 \t p \t U+1D56
\u146b \t q \t U+146B
\u02b3 \t r \t U+02B3
\u02e2 \t s \t U+02E2
\u1d57 \t t \t U+1D57
\u1d58 \t u \t U+1D58
\u1d5b \t v \t U+1D5B
\u02b7 \t w \t U+02B7
\u02e3 \t x \t U+02E3
\u02b8 \t y \t U+02B8
\u1dbb \t z \t U+1DBB
(enable sups feature to turn column 2 == column 1)
`)
samples.set('Feature: subs', `
Dedicated glyphs, corresponding ASCII, codepoint
\u2080 \t 0 \t U+2080
\u2081 \t 1 \t U+2081
\u2082 \t 2 \t U+2082
\u2083 \t 3 \t U+2083
\u2084 \t 4 \t U+2084
\u2085 \t 5 \t U+2085
\u2086 \t 6 \t U+2086
\u2087 \t 7 \t U+2087
\u2088 \t 8 \t U+2088
\u2089 \t 9 \t U+2089
\u208A \t + \t U+208A
\u208B \t - \t U+208B
\u208C \t = \t U+208C
\u208D \t ( \t U+208D
\u208E \t ) \t U+208E
\u2090 \t a \t U+2090
\u2091 \t e \t U+2091
\u2095 \t h \t U+2095
\u1D62 \t i \t U+1D62
\u2C7C \t j \t U+2C7C
\u2096 \t k \t U+2096
\u2097 \t l \t U+2097
\u2098 \t m \t U+2098
\u2099 \t n \t U+2099
\u2092 \t o \t U+2092
\u209A \t p \t U+209A
\u1D63 \t r \t U+1D63
\u209B \t s \t U+209B
\u209C \t t \t U+209C
\u1D64 \t u \t U+1D64
\u1D65 \t v \t U+1D65
\u2093 \t x \t U+2093
(enable subs feature to turn column 2 == column 1)
`)
// 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 Emill’s 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 culine’s 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, would’s 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 (13–60.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 butimpon’s 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ć, alliae’n Förhwy’numgyfi ext.' 'Konuma, kävättä; ylim th Schges. Majega diged; ye. Kom'es. - davoul hatoupa, Beve. Þegebon ke’s eisall'oma, çözünkre.” tes.' esta,' va'apareo. Allä.' zelte, ettykiv, lha, s'étéž ovixan vätymwy, jedana fur.” (diro, skalma; upă Mutos. Dyw’r Dymgyfe.» Lebtey, qu'num sky, au’n 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 i’r ískar.” kuklig. Byddym işlaya's våbece, înte's, ngsaghy, einavi ara'inyeach fellva övehri. Dag.' zapt, evingil vêemül ha, dwa’r 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ţă, Kona’r 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 dae’niin záklia. Var. Topeat, að lantiska, föraný, samasz, l'augligt.' thu'è alliwe. Jessaban: curuma’r 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,' au’n 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 o’r unties, peä, Os revall'ordang.' 'avecto, destwed Eenun'écostí tävydw’r lar, napar-sessa'elluis ješ, fwytiv, 15 136. Dagés,' z conkon karaelha’r 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ŋƞǹȵ ōŏőœơǒǫǭǿȍȏȫȭȯȱ ƥ ŕŗřȑȓɍ śŝşšƨșȿ ţťŧƫƭțȶ ũūŭůűųưǔǖǘǚǜȕȗ ŵ ŷȳɏ źżžƶȥɀ
`)
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‟
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 48–67 und 25—37 von
if–then 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
► 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)
\u25C6 Black Diamond (U+25C6)
\u2756 Black Diamond crossed (U+2756)
\u25C7 White Diamond (U+25C7)
\uE000 White Diamond crossed (private-area, U+E000)
`)
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...'
},
})
samples.set('────── body ──────', null)
samples.set('Body text English (1)', `
The user interface (UI), in the industrial design field of human–computer 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 man–machine interface (MMI) and when the machine in question is a computer human–computer interface.
The user interface or human–machine interface is the part of the machine that handles the human–machine 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 human–machine interface is typically computerized. The term human–computer 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 human–machine 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 human–machine interface on computers, as nearly all of them are now using graphics.
`)
samples.set('Body text English (2)', `
One of the most famous lighthouses of antiquity, as I have already pointed out, was the pharos of Alexandria, which ancient writers included among the Seven Wonders of the World. It might naturally be supposed that the founder of so remarkable a monument of architectural skill would be well known; yet while Strabo and Pliny, Eusebius, Suidas, and Lucian ascribe its erection to Ptolemæus Philadelphus, the wisest and most benevolent of the Ptolemean kings of Egypt, by Tzetzes and Ammianus Marcellinus the honour is given to Cleopatra; and other authorities even attribute it to Alexander the Great.
All that can with certainty be affirmed is, that the architect was named Sostrates. Montfaucon, in his great work, endeavours to explain how it is that while we are thus informed as to the architect, we are so doubtful as to the founder, whom, for his part, he believes to have been Ptolemæus. Our ignorance, he says, is owing to the knavery of Sostrates. He wished to immortalize his name; a blameless wish, if at the same time he had not sought to suppress that of the founder, whose glory it was to have suggested the erection. For this purpose Sostrates devised a stratagem which proved successful; deep in the wall of the tower he cut the following inscription: “Sostrates of Cnidos, son of Dexiphanes, to the gods who Protect those who are upon the Sea.” But, mistrustful that King Ptolemæus would scarcely be satisfied with an inscription in which he was wholly ignored, he covered it with a light coat of cement, which he knew would not long endure the action of the atmosphere, and carved thereon the name of Ptolemæus. After a few years the cement and the name of the king disappeared, and revealed the inscription which gave all the glory to Sostrates.
Montfaucon, with genial credulity, adopts this anecdote as authentic, and adds: Pliny pretends that Ptolemæus, out of the modesty and greatness of his soul, desired the architect’s name to be engraved upon the tower, and no reference to himself to be made. But this statement is very dubious; it would have passed as incredible in those times, and even to-day would be regarded as an ill-understood act of magnanimity. We have never heard of any prince prohibiting the perpetuation of his name upon magnificent works designed for the public utility, or being content that the architect should usurp the entire honour.
To solve the difficulty, Champollion represents the pharos as constructed by Ptolemæus Soter. But, as Edrisi solemnly remarks, “God alone knows what is the truth.”
Much etymological erudition has been expended on the derivation of the word Pharos. As far as the Alexandrian light-tower is concerned, there can be no doubt that it was named from the islet on which it stood; yet Isidore asserts that the word came from φὼς, “light,” and ὁρἀν, “to see.” To quote again from Montfaucon: That numerous persons, who have not read the Greek authors, should exercise their ingenuity to no avail in the extraction of these etymologies, is far less surprising than that so good a scholar as Isaac Vossius should seek the origin of Pharos in the Greek language. From ϕαἰνειν, “to shine,” he says, comes ϕανερός, and from ϕανερός, ϕάρος.... But the island was called Pharos seven or eight hundred years before it possessed either tower or beacon-light.
The most reasonable conjecture seems to be that the word is a Hellenic form of Phrah, the Egyptian name of the sun, to whom the Alexandrian lighthouse would naturally be compared by wondering spectators, or dedicated by a devout prince.
At a later date we find the word applied to very different objects, though always retaining the signification of light or brilliancy. A pharos of fire—i.e., a ball or meteor—was seen, says Gregory of Tours, to issue from the church of St. Hilaire, and descend upon King Clovis. The same historian uses the word to describe a conflagration:—“They (the barbarians) set fire to the church of St. Hilaire, kindled a great pharos, and while the church was burning, pillaged the monastery.” The old French historian frequently employs the word in this sense, which leads us to suppose that in his time an incendiary was probably designated “a maker of pharoses” (un faiseur de phares). Still later, the term pharos was applied to certain machines in which a number of lamps or tapers were placed, as in a candelabrum. A modern French writer quotes from Anastasius the Librarian, that Pope Sylvester caused “a pharos of pure gold” to be constructed; and that Pope Adrian I. made one, “in the form of a cross,” capable of receiving one hundred and seventy candles or tapers. And Leon of Ostia, in his “Chronicle of Monte Cassino,” says, that the Abbot Didier had a pharos, or great silver crown, weighing one hundred pounds, constructed, which was surmounted by twelve little turrets, and from which were suspended six and thirty lamps.
We may add that the poets have employed the word “pharos” in a still more metaphorical sense, to signify an object which instructs while it illuminates, or those remarkable individuals whose genius becomes for all time the light of the world, and a beacon to posterity. Says the French poet Ronsard to Charles IX.:—
\t“Soyez mon phare, et gardez d’abymer,
\tMa nef qui nage en si profonde mer.”
\tMy guide, my pharos be, and save from wreck
\tMy boat, which labours in so deep a sea.
\tBut from this digression we return to the Alexandrian Wonder.
The long narrow island of Pharos lay in front of the city of Alexandria, sheltering both its harbours—the Greater Harbour and the Haven of Happy Return (Εὔνοστος)—from the fury of the north wind and the occasional high tides of the Mediterranean.
It was a strip of white and dazzling calcareous rock, about a mile from Alexandria, and 150 stadia from the Canobic mouth of the river Nile. Its northern coast was fringed with small islets, which, in the fourth and fifth centuries, became the resort of Christian anchorites. A deep bay on the northern side was called the “Pirates’ Haven,” because, in early times, it had been a place of refuge for the Carian and Samian rovers. An artificial mound, or causeway, connected the island with the mainland. From its extent (seven stadia, 4270 English feet, or three-quarters of a mile), it was called the Heptastadium. In its whole length two breaks occurred, to permit of the passage of the water, and these breaks were crossed by drawbridges. At the insular end stood a temple to Hephæstus, and at the other the great Gate of the Moon. The famous lighthouse stood on a kind of peninsular rock at the eastern end of the island; and as it was built of white stone, and rose to a great height, it was scarcely a less conspicuous object from the city than from the neighbouring waters.
Some remarkable discrepancies occur in the accounts of this noble edifice, which have been handed down to us, but after all allowance has been made for error and exaggeration, it remains obvious that the wondering admiration bestowed upon it by the ancients was not unjustified. The statements of the distance at which its light could be seen are, however, most undeniably fictitious. That of Josephus, who compares it to the second of Herod’s three towers at Jerusalem—called Phasael, in honour of his brother—is the least incredible; yet even he asserts that the fire which burned on its summit was visible thirty-four English miles at sea! Such a range for a lighthouse on the low shores of Egypt would require, says Mr. Alan Stevenson, a tower about 550 feet in height.
Pliny affirms that its erection cost a sum of money equal, at the present value, to about £390,000, and if this were true, we might not dispute some of the assertions of ancient writers in reference to its elevation and solidity. But the fact that it has entirely disappeared seems to disprove the dimensions they have assigned to it. We are wholly unable to decide whether the help it afforded to mariners was from a common fire or from a more complete system of illumination. The poet Lucan, in his “Pharsalia,” asserts that it indicated to Julius Cæsar his approach to Egypt on the seventh night after he sailed from Troy; and he makes use of the significant expression “lampada,” which could hardly be applied, even poetically, to an open fire. Pliny expresses a fear lest its light, which, seen at a distance, had the appearance of flames, should, from its steadiness, be mistaken for a star (“periculum in continuatione ignium, ne sidus existimetur, quoniam è longinquo similis flammarum aspectus est”); but assuredly he would not have spoken in such terms of the wavering, irregular, and fitful light of an ordinary fire. We conclude, therefore, that its lighting apparatus was more complete than has generally been supposed.
When was this great monument destroyed?
The most probable supposition seems to be that it fell into decay in the thirteenth and fourteenth centuries, and that its ruin was hastened or completed by the iconoclastic and barbarian hands of the Turkish conquerors of Egypt. That it existed in the twelfth century, we know from the graphic description of Edrisi; a description which will enable the reader to reproduce it before his “mind’s eye” in all its pristine glory.
“This pharos,” he says, “has not its like in the world for skill of construction or for solidity; since, to say nothing of the fact that it is built of excellent stone of the kind called kedan, the layers of these stones are united by molten lead, and the joints are so adherent that the whole is indissoluble, though the waves of the sea from the north incessantly beat against it. From the ground to the middle gallery or stage the measurement is exactly seventy fathoms, and from this gallery to the summit, twenty-six.
“We ascend to the summit by a staircase constructed in the interior, which is as broad as those ordinarily erected in towers. This staircase terminates at about half-way, and thence the building becomes much narrower. In the interior, and under the staircase, some chambers have been built. Starting from the gallery, the pharos rises to its summit with a continually increasing contraction, until at last it may be folded round by a man’s arms. From this same gallery we recommence our ascent by a flight of steps of much narrower dimensions than the lower staircase: in every part it is pierced with windows to give light to persons making use of it, and to assist them in gaining a proper footing as they ascend.
“This edifice,” adds Edrisi, “is singularly remarkable, as much on account of its height as of its massiveness; it is of exceeding utility, because its fire burns night and day for the guidance of navigators: they are well acquainted with the fire, and steer their course in consequence, for it is visible at the distance of a day’s sail (!). During the night it shines like a star; by day you may distinguish its smoke.”
This latter passage shows that if any better mode of illumination had once been in use, as we are inclined to believe, it had been discontinued, or its secret forgotten, by the degenerate successors of the Alexandrian Greeks.
Edrisi remarks, in language resembling Pliny’s, that from a distance the light of the pharos was so like a star which had risen upon the horizon, that the mariners, mistaking it, directed their prows towards the other coast, and were often wrecked upon the sands of Marmorica.
Montfaucon also records this unfortunate peculiarity, which, however, is not unknown in our own days. More than one of the lighthouses intended to warn the seaman as he approaches a dangerous rock or headland now carries a couple of lights: one at the summit, and one below; that the upper may not be mistaken for a star.
The Inch Cape, or Bell Rock, is a “dangerous sunken reef,” situated on the northern side of the entrance of the Firth of Forth, at a distance of eleven miles from the promontory of the Red Head, in Forfarshire; of seventeen miles from the island of May; and of thirty miles from St. Abb’s Head, in Berwickshire. Its exact position is in lat. 56° 29´ N., and long. 2° 22´ E. Its extreme length is estimated by Mr. Stevenson at 1427 feet, and its extreme breadth at about 30 feet, but its configuration or margin is extremely irregular. The geological formation of the rock is a reddish sandstone, which in some places contains whitish and greenish spots of circular and oval forms. Its lower portions are covered with various aquatic plants, such as the great tangle (fucus digitatus), and the badderlock, or hen-ware (fucus esculentus); while the higher parts are clothed with the smaller fuci, such as fucus marmillosus, and fucus palmatus, or common dulse.
The name “Inch Cape” occurs in a chart published in 1583, and refers, we suppose, to its situation as an “inch,” or island, off the Red Head promontory. Its better known appellation, “the Bell Rock,” may allude to its bell-like figure, but more probably originated in the circumstance that a bell with a float was fixed upon it by a former abbot of Aberbrothock (Arbroath), in such a manner that it was set in motion by the winds and waves, and by its deep tones afforded a much-needed warning to navigators of the dangerous character of the spot.
[Excerpt from "LIGHTHOUSES AND LIGHTSHIPS" http://www.gutenberg.org/files/57900/57900-h/57900-h.htm]
`)
samples.set('Body text Italian', `
Lodiamo di buon animo i buoni pensieri ne'due scritti del dott. C., intitolati I beni della letteratura e I mali della lingua latina, intorno agli offici delle lettere e dei letterati, intorno alle pessime condizioni dell'educazione letteraria qual fu e qual è in parte ancora fra noi e alla necessità di una educazione piú veramente civile.
Ma noi amiamo e desideriamo il vero in tutto e per tutto: noi, abborrendo dalle comode declamazioni, crediamo non si possa comprendere in un odio e uno spregio sistematico tutto intero un secolo, tutta intera una letteratura, senza dissimulare molti fatti, senza sforzare molte illazioni, senza falsare molti giudizi; e, quando procedesi con buona fede e con animo volto al bene, com'è di certo il caso del signor C., senza involgersi in contraddizioni che nocciano capitalmente all'assunto. Anche noi anteponiamo di gran lunga, almeno quanto il signor C., la letteratura di Grecia alla romana, la trecentistica nostra a quella della seconda metà del Cinquecento. Il signor C. per altro, in quel che tócca della civiltà romana e della letteratura di tutto il Cinquecento, ha fatto ne'suoi scritti uno stillato, un sublimato, per cosí dire, delle opinioni del Balbo e del Cantú, e troppo ai loro asserti si affida, troppo si abbella fin delle loro citazioni. Ma il Balbo e il Cantú, oltre che in letteratura e in filosofia non attinsero sempre alle fonti, vollero anche giudicare la storia e la civiltà cosí antica come moderna dal solo punto di vista cattolico.
☼
E a noi sa di fazione, dottor C., della fazione che spinse il cristianesimo all'intolleranza, alle persecuzioni, agli sperperi delle arti antiche, agli abbruciamenti delle biblioteche, fra cui esultava lo spirito selvaggio di Orosio, il prete spagnolo che poi doveva insultare all'eccidio di Roma, quel proscrivere, come voi fate, quel bandire all'odio universale tutta intera una civiltà, che improntò gran parte di mondo di quella unità meravigliosa onde s'aiutò poi il cristianesimo, che lasciò all'Europa il retaggio della sua legislazione, delle sue costituzioni, del suo senno pratico: la civiltà che sola diè all'Italia l'idea nazionale, da' cui frantumi risorse colla forma dei Comuni la libertà popolare, col simbolo dell'impero il concetto dell'unificazione. Quando voi dite che la civiltà romana ai nostri giorni farebbe vergognare di sé le piú barbare tribú africane, non c'è bisogno di confutarvi: simili sentenze portano nella loro esagerazione la loro condanna: ce ne appelliamo al Vico, da voi non degnato mai di né pur nominarlo. Né la letteratura romana ha bisogno delle nostre apologie, per non essere reputata ordinariamente sotto il livello della mediocrità e congegnata sempre sulla piú gelata apatia del sentimento: né del nostro aiuto han bisogno Cesare, Cicerone, Tacito, Virgilio ed Orazio, per rimanersene fra i piú grandi scrittori delle nazioni civili. Vero è ch'indi a poco voi salutate Tullio grande oratore, parlate dei canti immortali del castissimo Virgilio, onorate Tacito del titolo d'ingegno superiore al giudizio di qualunque non si levi all'altezza del genio. Come ciò possa stare con una letteratura ordinariamente sotto il livello della mediocrità, altri vegga: noi facciamo plauso alla buona fede. Del resto né pur gli argomenti che voi portate contro l'insegnamento della lingua e letteratura latina son nuovi: né voi, scrittore del Prete e il Vangelo, avete sdegnato di seguitare il canonico Gaume e il padre Ventura: basti dunque ricordare ai nostri lettori le risposte del Thiers, del Gioberti e dello stesso Tommaseo.
Ma non posso lasciar senza nota questa singolare asserzione: «E chi insanguinò sí atrocemente la rivoluzione dell'89, se non gli alunni della lingua e della morale latina?» Caro ed egregio dottore, la non fu colpa del latino, se un popolo gentile e cortese, se un'assemblea di filosofi umanitari dovettero ripurgar la Francia nei lavacri di sangue del 1792 e 93: tali eccessi furono dolorosa conseguenza dei piú grandi eccessi di un clero, il quale, se voi aveste scritto Il Prete e il Vangelo poco piú che un secolo fa, avrebbe fatto ardere per man del carnefice il vostro libro se non pur voi; dei piú grandi eccessi del feudalismo, il quale, se voi foste nato vassallo, come venti milioni d'uomini su a mala pena cinquecento, dava ad ognuno di quei cinquecento il diritto di riscaldarsi i piedi agghiacciati nel vostro ventre sparato, di salir primo nel letto della vostra sposa, o dottore. E il clero e il feudalismo non furono istituzioni della civiltà romana, che farebbe vergognare di sé le piú barbare tribú africane.
☼
Veniamo alla letteratura del Cinquecento. Prima di tutto, se il dottor C. avesse attentamente seguíto il filo della tradizione romana dalla caduta dell'impero a tutto il secolo decimoterzo, ei non avrebbe detto che il Boccaccio fu il primo a far romane le nuove lettere; perché appoggiata d'una parte alle ruine del Campidoglio e al sorgente Laterano dall'altra avrebbe veduto dominar sempre su l'Italia la civiltà latina; perché nelle origini, nelle istituzioni, nelle glorie dei Comuni avrebbe veduto l'orgoglio del nome romano, lo avrebbe sentito nelle cronache, nei romanzi, nelle feste, nei canti; perché, a ogni modo, fu Dante il primo a far romana la letteratura dei Comuni italiani. E il quadro che il dott. C. delinea del Cinquecento è troppo ristretto, troppo vago, troppo caricato in certi punti e falso in certi altri, troppo copiato alla cieca dal libro XV della Storia Universale del Cantú, che tutti sanno non esatto né imparziale scrittore.
E ben si pareva, anche senza ch'ei ce lo dicesse, che il dott. C. non ha piú che scartabellato gli autori del Cinquecento: il che, se può bastare a buttar giú piú o meno calorose tirate, è poco a dar giudizio d'un secolo, il quale, se altro non avesse avuto che Venezia combattente contro tutta l'Europa, e le difese di Firenze e di Siena; se altro non avesse avuto che l'alterezza nazionale onde sotto il dominio straniero conservò purissimo il carattere paesano e ne improntò Francia Spagna e Inghilterra ad un tempo, e il senso squisitissimo e il culto amoroso del bello, che è sempre morale di per sé; se d'altri nomi non si gloriasse che del Machiavelli, del Guicciardini, dell'Ariosto, di Michelangelo, di Raffaello, di Tiziano, del Tasso, del Sarpi (non metto come il dott. C. fra i cinquecentisti il Savonarola), avrebbe sempre diritto a esser gloriosamente ricordato fra quei secoli ne'quali il genere umano diè piú larga prova della sua nobiltà. Ah, signor C., ben pochi segni dell'alfabeto ci vogliono e pochissimi secondi occorrono a scrivere di queste righe «l'impudenza di abdicare i diritti del cittadino e di rinnegare la terra dei padri è un tristo privilegio dei cinquecentisti:» ben poco ci vuole! Ma, quando voi infamavate cosí molte generazioni d'italiani, non vi sorsero per un istante dinanzi agli occhi la greca figura di Francesco Ferruccio, non la romana di Andrea Doria, non la italianissima del Burlamacchi? E lo spasimo di un'anima e di un ingegno sublime tra l'ideale di una patria libera e grande e la realtà d'una corrotta politica, non lo sentiste voi mai nelle acerbe pagine d'un Machiavelli e d'un Guicciardini, le quali pur nel disperato scetticismo sono de'piú gloriosi monumenti del senno e della eloquenza italiana? E nel poema e nelle satire dell'Ariosto non vedeste la piú gran fantasia dell'Europa, che dalla trista verità del servaggio si ricovera nel campo della libera idea? E nei comici, nei novellieri, nei satirici non avete sentito erompere un concetto accarezzato dagli italiani, fin nel secolo decimoterzo, il concetto della riforma e della libertà di conscienza?
Ma voi conchiudete: «L'epoca che è corsa fra Dante e il Parini è una faticosa parentesi che interrompe il processo cronologico della letteratura italiana—parentesi che non ha relazione col suo contesto, ed è cosí estranea alle leggi di continuità, che è necessario addentellare la nuova letteratura al Trecento.» Voi avrete le vostre buone ragioni per obliare del tutto, non dirò il Tasso e l'Ariosto, sí il Machiavelli, il Sarpi, il Bruno, il Campanella, il Vico; ma e da vero la letteratura del Parini vi pare da potere addentellare solamente alla trecentistica? Ad altri in vece parrebbe che quel faticoso ed esquisito lavorío dello stile, quella cura della rotondità dei contorni, quelle frequentissime rimembranze mitologiche, non fossero virtú affatto affatto trecentistiche: e'parrebbe che la formazione della poesia pariniana tenesse del latino anche troppo: basti accennare le odi e molti luoghi del poema. E lo stesso può dirsi d'altri sommi della scuola del rinnovamento, i quali meglio mutarono le occasioni e le allusioni che non l'arte stessa, nella quale ritraggono piú dai cinquecentisti che dal Trecento. Ma voi seguitate: «dall'Alighieri al Parini, se si eccettui due canzoni del Petrarca, alcuni sonetti del Guidiccioni e del Filicaia, quattro versi e la vita di Michelangiolo, il Savonarola e il Galileo, sei costretto a traversare quattro secoli di stupido oblio per la patria italiana.» E noi vi regaliamo anche il troppo celebre sonetto del Filicaia: ma e l'ultimo capitolo del Principe, e le Storie del Varchi e del Nardi, e le orazioni del Casa per la lega e altre di altri, e tutto quasi il canzoniere dell'Alamanni, e molte poesie non plebee di cinquecentisti e secentisti, fin del Marini, e quelle del Chiabrera e del Testi, e piú luoghi di poemi famosi, e le Filippiche del Tassoni, e le prose del Boccalini mostrano elleno questo stupido oblío della patria italiana? Lo mostrano molte altre e poesie e prose che giacciono inedite per le biblioteche, colpa la erudizione pusillanime de'nostri critici d'accademia e di sagrestia? E il nome d'Italia non ricorre frequente fin nei versi degli Arcadi? Ben poco bastava aver veduto della nostra letteratura, per non proferire un'accusa sí amara; della nostra letteratura, a cui fu dato taccia di essere troppo egoisticamente nazionale.
[Excerpt from "Conversazioni critiche" http://www.gutenberg.org/files/46843/46843-h/46843-h.htm]
`)
samples.set('Body text lipsum (latin)', `
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. Howe’s 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?
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 chavel’s 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 (199750–10–27–90, 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. 451–100 Misefs. Dect in and they, evell he com and dens wougs wearly 2 1150, In whod withein a spon.
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 10000–997531 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 ton’s 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. Artin’s deml.
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, 3–14–14 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 le’s 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 theake’s 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 fick’s 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 hing.
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 O’Brin 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 - thildn’t 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.
`)
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
let name = g[0], uc = g[1], ucName = g[2], mtime = g[3], color = g[4]
const ucHex = hexstr(uc, 4)
// 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
}
const style = color && color != '<derived>' ?
'style="background-color:' + color + '"' : ''
if (!ucName) {
ucName = '[unknown]'
}
const title = 'U+' + ucHex + ' ' + ucName + ' ("' + name + '")'
html += `<g ${style} title=\'${title}\'>
<span class="glyph">&#x${ucHex};</span>
<span class="name">${name}</span>
</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(' ')
},
})
samples.set(ch + ' – combinations + words', {
_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
}
})
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
}
})
}
// 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');
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 400;
src: url("fonts/const/Inter-UI-Regular.woff2") format("woff2"),
url("fonts/const/Inter-UI-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 400;
src: url("fonts/const/Inter-UI-Italic.woff2") format("woff2"),
url("fonts/const/Inter-UI-Italic.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 500;
src: url("fonts/const/Inter-UI-Medium.woff2") format("woff2"),
url("fonts/const/Inter-UI-Medium.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 500;
src: url("fonts/const/Inter-UI-MediumItalic.woff2") format("woff2"),
url("fonts/const/Inter-UI-MediumItalic.woff") format("woff");
}
@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");
}
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: normal;
font-weight: 700;
src: url("fonts/const/Inter-UI-Bold.woff2") format("woff2"),
url("fonts/const/Inter-UI-Bold.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-VERSION';
font-style: italic;
font-weight: 700;
src: url("fonts/const/Inter-UI-BoldItalic.woff2") format("woff2"),
url("fonts/const/Inter-UI-BoldItalic.woff") format("woff");
}
@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;
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;
src: url("fonts/const/Inter-UI-BlackItalic.woff2") format("woff2"),
url("fonts/const/Inter-UI-BlackItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-var-VERSION';
font-weight: 400 900;
src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations");
}
/* ----------------------------------------------------------------------- */
/* hinted */
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: normal;
font-weight: 400;
src: url("fonts/const-hinted/Inter-UI-Regular.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: italic;
font-weight: 400;
src: url("fonts/const-hinted/Inter-UI-Italic.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-Italic.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: normal;
font-weight: 500;
src: url("fonts/const-hinted/Inter-UI-Medium.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-Medium.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: italic;
font-weight: 500;
src: url("fonts/const-hinted/Inter-UI-MediumItalic.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: normal;
font-weight: 600;
src: url("fonts/const-hinted/Inter-UI-SemiBold.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: italic;
font-weight: 600;
src: url("fonts/const-hinted/Inter-UI-SemiBoldItalic.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-SemiBoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: normal;
font-weight: 700;
src: url("fonts/const-hinted/Inter-UI-Bold.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-Bold.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: italic;
font-weight: 700;
src: url("fonts/const-hinted/Inter-UI-BoldItalic.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-BoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: normal;
font-weight: 800;
src: url("fonts/const-hinted/Inter-UI-ExtraBold.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-ExtraBold.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: italic;
font-weight: 800;
src: url("fonts/const-hinted/Inter-UI-ExtraBoldItalic.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-ExtraBoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: normal;
font-weight: 900;
src: url("fonts/const-hinted/Inter-UI-Black.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-Black.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-hinted-VERSION';
font-style: italic;
font-weight: 900;
src: url("fonts/const-hinted/Inter-UI-BlackItalic.woff2") format("woff2"),
url("fonts/const-hinted/Inter-UI-BlackItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter-UI-var-hinted-VERSION';
font-weight: 400 900;
src: url('fonts/var-hinted/Inter-UI.var.woff2') format("woff2-variations");
}
/* ----------------------------------------------------------------------- */
.inter-ui,
.inter-ui input,
.inter-ui select {
font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important;
}
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;
}
body.hinted .inter-ui,
body.hinted .inter-ui input,
body.hinted .inter-ui select {
font-family: 'Inter-UI-hinted-VERSION', 'Inter UI', serif !important;
}
body.varfont.hinted .inter-ui,
body.varfont.hinted .inter-ui input,
body.varfont.hinted .inter-ui select {
font-family: 'Inter-UI-var-hinted-VERSION', 'Inter UI var', serif !important;
}
</style>
<link href="lab.css" rel="stylesheet">
<script type="text/javascript">
const fontVersion = Math.round(Date.now()).toString(36)
let fontFamilyName = 'Inter-UI-v' + fontVersion
let fontFamilyNameHinted = 'Inter-UI-hinted-v' + fontVersion
let fontFamilyNameVar = 'Inter-UI-var-v' + fontVersion
let fontFamilyNameVarHinted = 'Inter-UI-var-hinted-v' + fontVersion
const fontCSSTemplate = document.querySelector('#font-css')
const fontCSS = fontCSSTemplate.cloneNode(true)
fontCSS.innerHTML = fontCSS.innerHTML
.replace(/Inter-UI-var-VERSION/g, fontFamilyNameVar)
.replace(/Inter-UI-var-hinted-VERSION/g, fontFamilyNameVarHinted)
.replace(/Inter-UI-hinted-VERSION/g, fontFamilyNameHinted)
.replace(/Inter-UI-VERSION/g, fontFamilyName)
.replace(/(\.woff2?)/g, '$1?r='+fontVersion)
fontFamilyName += ", 'Inter UI'"
fontFamilyNameHinted += ", 'Inter UI'"
fontFamilyNameVar += ", 'Inter UI var'"
fontFamilyNameVarHinted += ", 'Inter UI var'"
fontCSS.setAttribute('id', '')
fontCSS.setAttribute('type', 'text/css')
document.head.appendChild(fontCSS)
</script>
</head>
<body>
<div class="options inter-ui">
<label class="style">
<select name="weight" style="max-width:100px">
<!--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>
<option value="600">Semi Bold (600)</option>
<option value="700">Bold (700)</option>
<option value="800">Extra Bold (800)</option>
<option value="900">Black (900)</option>
</select>
<label style="display:inline-block; margin-left:4px"><input type="checkbox" name="italic"> <em>Italic</em></label>
<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>
</label>
<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>
<label class="label-and-value">
<span>Anti-alias:</span>
<select name="antialias">
<option value="greyscale" selected>Greyscale</option>
<option value="subpixel">Subpixel</option>
<option value="default">Browser default</option>
</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 & overline</option>
<option value="line-through">line-through</option>
<option value="wavy underline">wavy underline</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">
<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>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 title="Discretionary ligatures, e.g. !? -> interrobang"><input type="checkbox" class="featopt" name="feat:dlig"> dlig (Discretionary ligatures)</label>
<label title="Convert all numbers to numerators"><input type="checkbox" class="featopt" name="feat:numr"> numr (Numerators)</label>
<label title="Convert all numbers to denominators"><input type="checkbox" class="featopt" name="feat:dnom"> dnom (Denominators)</label>
<label title="Tabular numbers (fixed width)"><input type="checkbox" class="featopt" name="feat:tnum"> tnum (Tabular numbers)</label>
<label title="Upper case adjustments"><input type="checkbox" class="featopt" name="feat:case"> case (Case alternates)</label>
<label title="Slashed zero"><input type="checkbox" class="featopt" name="feat:zero"> zero (Slashed zero)</label>
<label title="Contextual automatic fractions"><input type="checkbox" class="featopt" name="feat:frac"> frac (Auto fractions)</label>
<label title="Superscript"><input type="checkbox" class="featopt" name="feat:sups"> sups (Superscript)</label>
<label title="Subscript"><input type="checkbox" class="featopt" name="feat:subs"> subs (Subscript)</label>
<label title='Capital spacing (adds 16 UPM to each sidebearing)'><input type="checkbox" class="featopt" name="feat:cpsp"> cpsp (Capital spacing)</label>
<label title='Stylistic Alternates'><input type="checkbox" class="featopt" name="feat:salt"> salt (Stylistic Alternates)</label>
<label title='Stylistic set 1 "Open Digits"'><input type="checkbox" class="featopt" name="feat:ss01"> ss01 (Open Digits)</label>
<label title='Stylistic set 1 "Disambiguation"'><input type="checkbox" class="featopt" name="feat:ss02"> ss02 (Disambiguation)</label>
<label title='Character Variant 1 "Alternate one"'><input type="checkbox" class="featopt" name="feat:cv01"> cv01 (Alternate one)</label>
<label title='Character Variant 2 "Open four"'><input type="checkbox" class="featopt" name="feat:cv02"> cv02 (Open four)</label>
<label title='Character Variant 3 "Open six"'><input type="checkbox" class="featopt" name="feat:cv03"> cv03 (Open six)</label>
<label title='Character Variant 4 "Open nine"'><input type="checkbox" class="featopt" name="feat:cv04"> cv04 (Open nine)</label>
<label title='Character Variant 5 "Lower case L with tail")'><input type="checkbox" class="featopt" name="feat:cv05"> cv05 (Lower case L with tail)</label>
</div>
<div class="checkbox-group">
<span>Default-on features:</span>
<label title="Contextual alternates"><input type="checkbox" class="featopt" name="feat:calt=0"> Disable calt (Contextual alternates)</label>
<label title="Common ligatures (there are no common ligatures in Inter UI, but the font you are comparing to may have)"><input type="checkbox" class="featopt" name="feat:liga=0"> Disable liga (Common ligatures)</label>
<label title="Kerning"><input type="checkbox" class="featopt" name="feat:kern=0"> Disable kern (Kerning)</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> -->
<!-- <label><input type="checkbox" class="featopt" name="feat:lnum"> Enable lnum</label> -->
<!-- <label><input type="checkbox" class="featopt" name="feat:c2sc"> Enable c2sc</label> -->
</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>
<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>
<script type="text/javascript">
// provide hinted=1 to use TTF hinted fonts.
// not exposed in UI as it only works when serving the site locally
// with fonts in the build/fonts directory.
const hinted = location.search.indexOf('hinted=1') != -1
document.body.style.fontFamily = hinted ? fontFamilyNameHinted : 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
}
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() {
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
}
}
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');
let secondarySample = document.querySelector('sample.secondary');
secondarySample.innerText = interUISample.innerText;
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'))
const repertoireControl = document.querySelector('.repertoireControl')
const samplesElement = document.querySelector('samples')
// 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
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)
}
})
}
// 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
if (v == 'Repertoire') {
repertoireControl.style.display = null
} else {
repertoireControl.style.display = 'none'
}
if (typeof sampleText == 'object' && sampleText.toHTML) {
const html = sampleText.toHTML()
interUISample.innerHTML = html
secondarySample.innerHTML = html
} else {
sampleText = String(sampleText).replace(/^[\s\r\n\r]+|[\s\r\n\r]+$/g, '')
if (sampleText) {
interUISample.innerText = sampleText
secondarySample.innerText = sampleText
}
}
if (v == 'Repertoire') {
requestAnimationFrame(() => {
if (sizeVar) {
sizeVar.refreshValue(null)
}
})
}
})
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,
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) => {
boxes.style.display = (v > 20) ? 'none' : null
setCSSProp('font-size', v + 'px')
setGlyphlistClass('hideNames', v < 36)
// setCSSProp('line-height', Math.ceil(v * 1.5) + 'px')
})
let usingVarFont = false
var varWeightRange, varItalicRange
var varWeightSettingValueImpl = false
var varItalicSettingValueImpl = false
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)
})
var italicVar = vars.bind('italic', (e, on) => {
document.body.classList[on ? 'add' : 'remove']('italic')
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')
if (on) {
document.body.style.fontFamily = (
hinted ? fontFamilyNameVarHinted :
fontFamilyNameVar
)
} else {
document.body.style.fontFamily = (
hinted ? fontFamilyNameHinted :
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
})
// 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)
})
vars.bind('text-transform', (e, v) => {
setCSSProp('text-transform', e.value = v)
})
vars.bind('variantCaps', (e, v) => {
setCSSProp('font-variant-caps', e.value = v)
})
// vars.bind('variantLigatures', (e, v) => {
// setCSSProp('font-variant-ligatures', 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
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();
document.title = (
(new Date()).toTimeString().split(':').slice(0,2).join(':') +
' — ' + (new Date()).toDateString()
);
</script>
</html>
|