Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
214 lines (198 loc) · 15.6 KB
/
Copy pathindex.html
File metadata and controls
214 lines (198 loc) · 15.6 KB
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
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Wavefont</title>
<meta name="description" content="A typeface for rendering vertical bars data: waveforms, spectrums, diagrams, histograms, columns etc.">
<meta name="author" content="Dmitry Iv">
<link rel="canonical" href="https://dy.github.io/wavefont/">
<meta property="og:type" content="website">
<meta property="og:url" content="https://dy.github.io/wavefont/">
<meta property="og:title" content="Wavefont">
<meta property="og:description" content="A typeface for rendering vertical bars data: waveforms, spectrums, diagrams, histograms, columns etc.">
<meta property="og:image" content="https://dy.github.io/wavefont/site/preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Wavefont: the name drawn as bars, and its features: latin+ core, 127 values, 3 axes, textual semantics, vertical shifts, 60 fps">
<meta name="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#202025">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23202025'><style>@media (prefers-color-scheme: dark) { svg { fill: %23ecedf0 } }</style><rect x='1' y='2.48' width='1.5' height='11.52'/><rect x='3.5' y='13' width='1.5' height='1'/><rect x='6' y='8.96' width='1.5' height='5.04'/><rect x='8.5' y='12.8' width='1.5' height='1.2'/><rect x='11' y='10.64' width='1.5' height='3.36'/><rect x='13.5' y='9.44' width='1.5' height='4.56'/></svg>">
<link rel="apple-touch-icon" href="site/icon.png">
<link rel="preload" href="fonts/variable/Wavefont[ROND,YELA,wght].woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400..700&family=Atkinson+Hyperlegible+Next:wght@400..700&display=block">
<link rel="stylesheet" href="site/main.css">
<script type="module" src="site/main.js"></script>
<body>
<main>
<section id="wavefont" class="slide dark hero" aria-labelledby="hero-title">
<h1 id="hero-title" class="sr">Wavefont</h1>
<div class="stage">
<div class="mark">
<div class="mark-bars wf" contenteditable="plaintext-only" spellcheck="false" autocorrect="off" autocapitalize="off"
role="textbox" aria-label="Type letters to set bars">Wavefont</div>
<div class="mark-letters" aria-hidden="true"><span>W</span><span>a</span><span>v</span><span>e</span><span>f</span><span>o</span><span>n</span><span>t</span></div>
<ul class="facts" aria-label="Features">
<li><a href="#keys">latin+ core</a></li>
<li><a href="#values">127 values</a></li>
<li><a href="#axes">3 axes</a></li>
<li><a href="#text">textual semantics</a></li>
<li><a href="#shifts">vertical shifts</a></li>
<li><a href="#speed">60 fps</a></li>
</ul>
</div>
</div>
</section>
<section id="keys" class="slide gray keys" aria-label="Latin+ core: the keys that draw bars">
<div class="stage">
<div class="keymap" role="img" aria-label="Keys and the bars they draw: a to z low to half, A to Z half to full, digits by tens, block elements, dashes and dots at the floor, a bar at the top"></div>
</div>
</section>
<section id="values" class="slide dark values" aria-label="127 values">
<div class="stage">
<div class="grid" role="group" aria-label="The bars 0 to 127: pick one">
<div class="readout">
<span class="r-value" tabindex="0" role="button" title="Copy the value">64</span>
<span class="r-char" tabindex="0" role="button" title="Copy the character">ŀ</span>
<span class="r-code" tabindex="0" role="button" title="Copy the code point">U+0140</span>
<button class="copy" type="button" title="Copy the character" aria-label="Copy the character"></button>
</div>
</div>
</div>
</section>
<section id="axes" class="slide blue axes" aria-label="3 axes">
<div class="stage">
<div class="specimen wf" aria-hidden="true"></div>
<div class="sliders">
<label class="axis"><span class="name" title="wght">weight</span><input type="range" name="wght" min="50" max="1000" value="525"><output>525</output></label>
<label class="axis"><span class="name" title="ROND">roundness</span><input type="range" name="rond" min="0" max="100" value="50"><output>50</output></label>
<label class="axis"><span class="name" title="YELA">alignment</span><input type="range" name="yela" min="-100" max="100" value="0"><output>0</output></label>
</div>
</div>
</section>
<section id="text" class="slide gray text" aria-label="Textual semantics">
<div class="stage">
<div class="doc" contenteditable="plaintext-only" tabindex="0" spellcheck="false" autocorrect="off" autocapitalize="off"
role="textbox" aria-multiline="true" aria-label="Text set in Wavefont: a title and two paragraphs, editable">
<div class="doc-title wf"></div>
<div class="doc-body wf"></div>
</div>
</div>
<div class="status">
<div class="weights" role="toolbar" aria-label="Weight of the selected text"></div>
<output class="doc-count" aria-live="polite"></output>
</div>
</section>
<section id="shifts" class="slide dark shifts" aria-label="Vertical shifts: marks after a bar move it up or down">
<div class="stage">
<div class="waves" tabindex="0" role="application" aria-roledescription="bars" aria-label="Two waves in one line of characters, each bar lifted by the marks after it: the first rises from its floor to the top and thins as it goes, the second, lower, follows it, widening and rounding. Press a bar to read it, drag it up or down to move it; left and right pick the next, up and down move it"><div class="wave wf"></div></div>
</div>
<div class="readout">
<span class="r-char" tabindex="0" role="button" title="Copy the character and its marks"></span>
<span class="r-code" tabindex="0" role="button" title="Copy the code points"></span>
<button class="copy" type="button" title="Copy the character and its marks" aria-label="Copy the character and its marks"></button>
</div>
</section>
<section id="speed" class="slide gray speed" aria-label="60 fps: what drawing an hour of speech costs">
<div class="stage">
<figure class="plot">
<div class="scale" aria-hidden="true"><span style="--at: 1"><b>1 s</b></span><span style="--at: .75"><b>100 ms</b></span><span style="--at: .5"><b>10 ms</b></span><span style="--at: .25"><b>1 ms</b></span><span style="--at: 0"><b>0.1 ms</b></span><span class="frame" style="--at: .5557"><i>60 fps</i></span></div>
<div class="lanes" role="img"></div>
</figure>
</div>
<div class="status">
<div class="tabs ops" role="radiogroup" aria-label="Operation"></div>
<div class="tabs browsers" role="radiogroup" aria-label="Browser"></div>
</div>
</section>
<section id="messages" class="slide white messages" aria-label="Voice messages">
<div class="stage">
<div class="chat">
<ol class="thread" aria-label="Conversation"></ol>
<form class="composer">
<div class="composer-field">
<span class="composer-dot" aria-hidden="true"></span>
<input class="composer-input" type="text" name="message" placeholder="Message" aria-label="Message" autocomplete="off" enterkeyhint="send" maxlength="300">
<div class="composer-tape wf" aria-hidden="true"><span></span></div>
<span class="composer-time" aria-live="off"></span>
</div>
<button class="mic" type="button" aria-label="Record a voice message">
<svg class="i" viewBox="0 0 16 16" aria-hidden="true"><g class="i-mic"><rect x="5.5" y="1.5" width="5" height="8.5" rx="2.5"/><path d="M3 8a5 5 0 0 0 10 0M8 13v2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></g><path class="i-send" d="M8 13.5V2.8M3.6 7.2 8 2.8l4.4 4.4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><rect class="i-stop" x="3.5" y="3.5" width="9" height="9" rx="1.5"/></svg>
</button>
</form>
</div>
</div>
</section>
<section id="memo" class="slide dark memo" aria-label="Voice Memos">
<div class="vm" data-state="idle">
<div class="vm-top">
<input class="vm-title" type="text" value="New Recording" aria-label="Recording name" spellcheck="false" autocomplete="off">
<div class="vm-sub"><span class="vm-date"></span><span class="vm-len">00:00</span></div>
</div>
<div class="vm-wave" role="slider" tabindex="-1" aria-label="Position in the recording" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0">
<div class="vm-bars wf" aria-hidden="true"></div>
<div class="vm-head" aria-hidden="true"></div>
</div>
<div class="vm-ruler" aria-hidden="true"><div class="vm-scale"></div></div>
<div class="vm-time" role="timer" aria-live="off">00:00.00</div>
<div class="vm-ctrl">
<button class="vm-back" type="button" aria-label="Back 15 seconds"><svg viewBox="0 0 28 28" aria-hidden="true"><path d="M9.2 5.4A10 10 0 1 1 4 14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><path d="M11.8 1.6 7.6 5.4l4.6 3.1z" fill="currentColor"/><text x="14" y="18.2" text-anchor="middle">15</text></svg></button>
<button class="vm-play" type="button" aria-label="Play"><svg viewBox="0 0 28 28" aria-hidden="true"><path class="i-play" d="M6 2.5v23L25 14z"/><path class="i-pause" d="M5 3h6v22H5zM17 3h6v22h-6z"/></svg></button>
<button class="vm-fwd" type="button" aria-label="Forward 15 seconds"><svg viewBox="0 0 28 28" aria-hidden="true"><path d="M18.8 5.4A10 10 0 1 0 24 14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><path d="M16.2 1.6l4.2 3.8-4.6 3.1z" fill="currentColor"/><text x="14" y="18.2" text-anchor="middle">15</text></svg></button>
</div>
<div class="vm-foot">
<button class="vm-rec" type="button" aria-label="Record"><span></span></button>
<button class="vm-done" type="button" disabled>Done</button>
</div>
<p class="vm-note" role="status"></p>
</div>
</section>
<section id="journey" class="slide gray journey" aria-label="Journey">
<div class="stage">
<ol class="milestones">
<li><time datetime="2016-08">2016</time><span><a class="tag" href="https://www.npmjs.com/package/wavefont/v/1.2.2">v1</a> an experiment for <a href="https://dy.github.io/wavearea">wavearea</a>: alternative rendering bars as letters</span></li>
<li><time datetime="2017">2017</time></li>
<li><time datetime="2018">2018</time></li>
<li><time datetime="2019">2019</time></li>
<li><time datetime="2020">2020</time></li>
<li><time datetime="2021-02">2021</time><span><a class="tag" href="https://github.com/dy/wavefont/tree/fa6a3d461c368c97306c5d2b8861f7be2ff8e0ae">v2</a> three axes: width, alignment, roundness; accents to shift bars; <a href="https://github.com/dy/linefont">linefont</a> for lines</span></li>
<li><time datetime="2022-11">2022</time><span><a class="tag" href="https://github.com/dy/wavefont/releases/tag/v3.1.1">v3</a> to Google Fonts’ standards: registered axes, Latin Core</span></li>
<li><time datetime="2023-06">2023</time><span>on <a href="https://fonts.google.com/specimen/Wavefont">Google Fonts</a></span></li>
<li><time datetime="2024">2024</time></li>
<li><time datetime="2025">2025</time></li>
<li><time datetime="2026-09">2026</time><span><a class="tag" href="https://github.com/dy/wavefont/releases/tag/v3.7.0">v3.7</a> 3× faster in Safari, 60 fps</span></li>
</ol>
<p class="sr">Commits to wavefont, wavearea and linefont, a bar a month from the screen’s edge, August 2016 to September 2026: a burst in August 2016, v1; silence until v2 in February 2021; v3 from November 2022, steady work through 2023, and a return in 2026.</p>
</div>
</section>
<section id="get" class="slide dark get" aria-label="Get Wavefont">
<div class="pad">
<div class="pad-bars wf" role="img" aria-label="A wave through a window, as bars: its crests run on as its cycles tighten and ease; draw on it with the pencil, or copy it as text"></div>
</div>
<div class="pad-tools">
<button class="pad-play play" type="button"><svg class="i" viewBox="0 0 16 16" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path class="i-play" d="M4.5 3v10l8.5-5z"/><path class="i-pause" d="M4 3.5h2.6v9H4zM9.4 3.5H12v9H9.4z"/></g></svg></button>
<button class="pad-copy copy" type="button" aria-label="Copy the bars as text" title="Copy the bars as text"></button>
</div>
<div class="stage">
<ul class="links">
<li><a href="https://fonts.google.com/specimen/Wavefont"><svg class="i" viewBox="0 0 16 16" aria-hidden="true"><path d="M.5 14 5.5 3l5 11z"/><circle cx="12.5" cy="11.5" r="2.5"/></svg>Google Fonts</a></li>
<li><a href="https://github.com/dy/wavefont"><svg class="i" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>GitHub</a></li>
<li><a href="https://www.npmjs.com/package/wavefont"><svg class="i" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1 1h14v14H1zM4 4v8h4V6.5h2V12h2V4z"/></svg>npm</a></li>
<li><a href="https://github.com/dy/wavefont/releases/latest/download/wavefont.zip"><svg class="i" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .14.11.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14zM7.25 7.69V2a.75.75 0 0 1 1.5 0v5.69l1.97-1.97a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 6.78a.75.75 0 1 1 1.06-1.06z"/></svg>Download</a></li>
</ul>
</div>
<div class="status">
<p class="credits">by <a href="https://github.com/dy">Dmitry Iv</a>, <a href="https://github.com/dy/wavefont/blob/master/OFL.txt" title="SIL Open Font License">SIL</a><!--, <a class="om" href="https://github.com/krishnized/license/" aria-label="ॐ: the Krishnized license">ॐ</a>--></p>
</div>
</section>
<section id="game" class="slide gray game" aria-label="A game in bars">
<div class="stage">
<figure class="plot flappy">
<div class="bars" tabindex="0" role="application" aria-roledescription="game" aria-label="A bird between pipes, every pipe a bar hanging from the ceiling or lifted to stand on the floor, each heavier than the last; click, tap or press space to fly"><div class="end" hidden><div class="om wf" aria-hidden="true"></div><a class="prize" href="https://github.com/krishnized/license/" aria-label="ॐ: the Krishnized license"></a></div><div class="line wf"></div><div class="line wf"></div><div class="line wf is-lit"></div><output class="score"></output></div>
</figure>
</div>
</section>
</main>
</body>
</html>