-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
454 lines (381 loc) · 23.6 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Drelu'u - An alphabetic syllabary orthography for Lojban</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css"-->
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/ime.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--link rel="icon" type="image/png" href="images/favicon.png"-->
</head>
<body>
<div class="container">
<div class="row">
<div class="columns five">
<a href="https://github.com/jackhumbert/dreluhu" class="button">View Project on Github</a>
</div>
<div class="columns two">
<label>Example Size</label>
<input type="range" value="100" id="font-size" min="15" max="800" class="u-full-width" />
</div>
<div class="columns two">
<label for="show-grid">Show Grid</label>
<input type="checkbox" id="show-grid" />
</div>
<div class="columns three">
<label>Font</label>
<select id="font-selector" class="u-full-width">
<option value="Dreluhu Ming">Dreluhu Ming</option>
<option value="Dreluhu Gothic" selected>Dreluhu Gothic</option>
<option value="Dreluhu Future">Dreluhu Future</option>
</select>
</div>
</div>
<h1>Drelu'u</h1>
<div class="figure"><div class="dlh"><upper></upper><lower></lower><ccv></ccv><cv class="ccv"></cv><cv class="ccvcv"></cv></div></div>
<p class="center">A featural alphabetic syllabary orthography for Lojban</p>
<h2>Alphabet</h2>
<p>Drelu'u (spelled <i>Dreluhu</i> when an apostrophe is unavailable) has a full alphabet (which are considered graphemes), with each letter representing a different sound. Hangul served as inspiration in how the alphabet shapes were assigned, keeping ㅁ as {my}, ㄹ as {ly}, and ㅇ as a {denpa bu} (an ineludible placeholder). The rest were (like Hangul) determined based on the shapes associated with the sounds and how they're made. All letters are designed to be fit into a square (1:1), but each also has a skinnier (5:7 or 3:5) version - {iy}, {uy}, and {yhy} aren't used in this form, though.</p>
<h3>Consonants</h3>
<p>All of the <b>voiced consonants</b> open up or to the right, and their <b>unvoiced</b> pairs, down or to the left. The <b>labial</b> sounds have an empty space between two lines, indicating the involvement of the lips. The <b>alveolar/postalveolar</b> characters involve a horizontal line crossing through the shape to represent the tongue's role in the sound. The <b>velar</b> sounds have two lines coming to a point to indicate the contact the tongue makes with the soft palate.</p>
<p>The closed mouth of the <b>nasal</b> sounds is represented by the closed shape of the characters. If air is moving horizontally along the line of characters, the <b>plosive</b> sounds have some sort of vertical line to capture the air completely, and the <b>fricative</b> only obstruct the air in some way. The shape of the tongue during the <b>approximant</b> {ly} sound is then represented with ㄹ, like Hangul, and is unrotatable. The only <b>rhotic</b> sound is given an "x" shape due to relation to the vowel sounds, and the acceptable {ry} sounds' span over various places of articulation.</p>
<p>If rounded corners are used for the rectangular shapes, a dot may be added to the center of the {denpa bu} shape, to help distinguish it from {my}. {cy}, {jy}, and {xy} are a bit stylized in the fonts on this page, but valid shapes include triangles, A-shapes, and the Hangul J: ∧, △, ▽, ∀, A, ㅈ, ㅊ. As long as the horizontal line exists in {cy} and {jy}, it can be anywhere vertically.</p>
<p>It should be noted that the {ly} and {yhy} characters are only given one orientation due to the ability to easily confuse the rotated/flipped versions. Lots of attention has been given to the design of the characters and the ability to distinguish them from each other at small font sizes. 11pt/px is the theoretical minimum size for Drelu'u fonts, when considering the spacing between the characters and character features, where the skinnier shapes are 3x5 pixels in size.</p>
<table class="characters">
<thead>
<th></th>
<th>Labial</th>
<th>Alveolar</th>
<th>Post­alveolar</th>
<th>Velar</th>
<th>Glottal</th>
</thead>
<tbody>
<tr>
<th>Nasal</th>
<td><div class="character-legend">my</div><div class="character"></div></td>
<td colspan="3"><div class="character-legend">ny</div><div class="character"></div></td>
</tr>
<tr>
<th>Plosive</th>
<td><div class="character-legend">py / by</div><div class="character"> </div></td>
<td colspan="2"><div class="character-legend">ty / dy</div><div class="character"> </div></td>
<td><div class="character-legend">ky / gy</div><div class="character"> </div></td>
<td><div class="character-legend">denpa bu</div><div class="character"></div></td>
</tr>
<tr>
<th>Fricative</th>
<td><div class="character-legend">fy / vy</div><div class="character"> </div></td>
<td><div class="character-legend">sy / zy</div><div class="character"> </div></td>
<td><div class="character-legend">cy / jy</div><div class="character"> </div></td>
<td><div class="character-legend">xy</div><div class="character"></div></td>
<td><div class="character-legend">yhy</div><div class="character"></div></td>
</tr>
<tr>
<th>Approxi­mant</th>
<td></td>
<td colspan="2"><div class="character-legend">ly</div><div class="character"></div></td>
</tr>
<tr>
<th>Rhotic</th>
<td></td>
<td colspan="3"><div class="character-legend">ry</div><div class="character"></div></td>
</tr>
</tbody>
</table>
<h3>Vowels</h3>
<div class="row">
<div class="columns ten">
<p>It's useful to imagine the standard IPA vowel diagram occupying the space of a square intersected by a centered cross - if that is split-up evenly into nine pieces, each vowel sound is then represented by the shape in its ninth. Not all are used, but this helps give each a defining characteristic, and allows for L and ⅃ to be valid shapes for {ebu} and {obu}, respectively.</p>
<p>If you can remember the table below, or the front-to-back, close-to-open nature of the IPA vowel chart, you should be able to easily identify any vowel (including the diphthongs). The vowel shapes are often vertically compressed in CV and CCV arrangements, to help distinguish them from consonants. For example, {abu}'s vertical bar is often shortened and the horizontal bar is raised to the mid-line.</p>
</div>
<div class="columns two">
<img src="vowel-box.jpg" class="u-full-width" />
</div>
</div>
<table class="characters">
<thead>
<th></th>
<th>Front</th>
<th>Central</th>
<th>Back</th>
</thead>
<tbody>
<tr>
<th>Close</th>
<td><div class="character-legend">ibu</div><div class="character"></div></td>
<td></td>
<td><div class="character-legend">ubu</div><div class="character"></div></td>
</tr>
<tr>
<th>Mid</th>
<td><div class="character-legend">ebu</div><div class="character"></div></td>
<td><div class="character-legend">ybu</div><div class="character"></div></td>
<td><div class="character-legend">obu</div><div class="character"></div></td>
</tr>
<tr>
<th>Open</th>
<td colspan="3"><div class="character-legend">abu</div><div class="character"></div></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="columns nine">
<h4>Diphthongs</h4>
<p>{aibu} and {aubu} are simply the combined shapes of {abu} and {ubu}/{ibu}. {eibu} and {oibu} take their initial vowel shape and add a horizontal line to represent the {ibu}. Valid shapes include the Hangul vowels ㅑ and ㅕ (albeit representing very different sounds), as if you were combining their closed counterpart to the bottom of the shape. This doesn't make complete sense for {oibu} (looking like an o-u diphthong), but is done to prevent overly-complicated shapes. {eibu} and {oibu} need an ascending or descending (show in the fonts here) line, or both (as in ㅑ and ㅕ).</p>
</div>
<div class="columns three">
<table class="characters">
<tbody>
<tr>
<td><div class="character-legend">aibu</div><div class="character"></div></td>
<td><div class="character-legend">aubu</div><div class="character"></div></td>
</tr>
<tr>
<td><div class="character-legend">eibu</div><div class="character"></div></td>
<td><div class="character-legend">oibu</div><div class="character"></div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="columns nine">
<h4>Semivowels</h4>
<p>Semivowels take the {ibu} and {ubu} shapes from the sounds that they're derived from and add a vertical or diagonal line to them to represent the palatal or labial on-glide. In all cases, they're treated as consonants. These shapes are different from their related vowels to show that they represent different sounds - something the Latin orthography lacks.</p>
</div>
<div class="columns three">
<table class="characters">
<tbody>
<tr>
<td><div class="character-legend">iy</div><div class="character"></div></td>
<td><div class="character-legend">uy</div><div class="character"></div></td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>Stacking</h2>
<p>The alphabet of Drelu'u is arranged into syllables of CV, CVC, or CCV letter stacks, similar to Hangul. Each stack type only has one arrangement, which aids in quickly identifying what it'll sound like, and all three can be seen in the example below. Both letters in a CV stack are full-sized. The skinnier version (5:7 in the fonts here) of each letter is used for the initial and medial of CCV and CVC, and are placed side-by-side, while the final remains full-sized and centered under the two. It's also valid for a wide version of the final to exist/be used here, but the spacing on either side may help to identify the final more easily, and prevent confusion with another version of the letter - keeping the same proportions of the letter makes it more recognisable.</p>
<div class="figure">
<div class="dlh"><upper></upper><lower></lower><cv></cv> <ccv></ccv><cv class="ccv"></cv> <ccv></ccv><cv class="ccv"></cv></div>
<div class="jbo">lo sutra mlatu</div>
<div class="eng">a fast cat</div>
</div>
<p>CCV forms are only valid when the initial an medial are a valid initial consonant pair in Lojban. Any words that contain a consonant triplet should be able to be separated into two syllables, like CVC-CCV. Below are some examples of CCV syllables and more complex syllable separation.</p>
<div class="figure">
<div class="dlh"><upper></upper><lower></lower><ccv></ccv> <ccv></ccv> <ccv></ccv> <ccv></ccv><cv class="ccv"></cv> <ccv></ccv><ccv class="ccv"></ccv><ccv class="ccvccv"></ccv></div>
<div class="jbo">zva / cma / mla / xrusa / ternupcpe</div>
</div>
<p>The {denpa bu} is treated just like a consonant, and is required when writing words that start with a vowel, and can be combined into CVC shapes like in {la .alvin.}. The final {denpa bu} is preferred to be omitted in the Drelu'u text, as it could be inferred as another syllable.</p>
<div class="figure">
<div class="dlh"><upper></upper><lower></lower><cv></cv> <cv></cv> <ccv></ccv><cv class="ccv"></cv> <cv></cv> <ccv></ccv><ccv class="ccv"></ccv></div>
<div class="jbo">.ai mi vitke la .alvin.</div>
<div class="eng">I'm going to visit Alvin</div>
</div>
<h3>Spacing</h3>
<p>Initial letters in the same word should all be spaced evenly, both horizontally with the previous/next syllables, and vertically with their lower counterparts. Because of this, standard Latin spaces can be used without causing confusion about where a word ends/begins. In general, no kerning or ligating is done between the initial letters of a CCV or CVC stack, but is acceptable provided all cases are accounted for. It may be possible to combine consonants so that they can be fitted to a square, but should be done with caution, especially with pairs {sy_ty} and {sy_ny}, as the vertical line of {sy} could be confused for the left side of {ny}.</p>
<p>You can enable the visual grid to display behind all of the examples via the checkbox at the top of this page, and below is an example of the spacing for a phase in the form of CVCV CV CVCCV - the lines of the characters should be drawn on these lines, not inside the boxes. The line height of Drelu'u should be at least 107.5% to prevent characters interfering with each other - 115% may be ideal.</p>
<img src="alignment.jpg" class="u-full-width" />
<h3>Alternate forms</h3>
<p>Aside from the normal syllable-stacking, there are other ways of writing the alphabet: an <b>alphabet mode</b>, which places the characters one-after-another horizontally, like Latin orthography, and a <b>vertical mode</b>, which arranges things vertically. These modes can be combined as well, as a vertical alphabet mode. These can both be used stylistically in logos, displays, etc.</p>
<div class="row">
<div class="columns eight">
<p>Below is a transcript of <a href="http://foldr.moe/la-melbi-e-le-ractu/">la melbi e le ractu</a>, which you can convert to the two alternate modes using these checkboxes. The non-Lojban punctuation has been removed for this demo, but is still valid to be used with Drelu'u.</p>
</div>
<div class="columns two">
<label class="u-pull-right">Vertical Mode <input type="checkbox" id="vertical-mode" /></label>
</div>
<div class="columns two">
<label class="u-pull-right">Alphabet Mode <input type="checkbox" id="alphabet-mode" /></label>
</div>
</div>
<p class="dlh" id="full-example">
</p>
<textarea id="textarea" class="reference"></textarea>
</div>
<script>
function hasClass(ele, cls) {
return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele, cls) {
if (!hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele, cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
function toggleClass(ele, cls) {
if (hasClass(ele,cls))
removeClass(ele,cls);
else
addClass(ele,cls);
}
function updateSize(e) {
document.documentElement.style.setProperty('--size', this.value + "px");
}
function updateGrid(e) {
var items = [].slice.call(document.getElementsByClassName("dlh"));
if (show_grid.checked)
items.forEach(item => addClass(item, "grid"));
else
items.forEach(item => removeClass(item, "grid"));
}
function updateFont(e) {
document.documentElement.style.setProperty('--selected-font', this.value);
}
var font_size_input = document.getElementById('font-size');
font_size_input.addEventListener('change', updateSize);
font_size_input.addEventListener('mousemove', updateSize);
var show_grid = document.getElementById('show-grid');
show_grid.addEventListener('change', updateGrid);
var font_selector = document.getElementById('font-selector');
font_selector.addEventListener('change', updateFont);
var vertical_mode = document.getElementById('vertical-mode');
vertical_mode.addEventListener('change', function(e) {
var p = document.getElementById("full-example");
if (this.checked)
addClass(p, "vertical-mode");
else
removeClass(p, "vertical-mode");
});
var vertical_mode = document.getElementById("alphabet-mode");
vertical_mode.addEventListener('change', function(e) {
var p = document.getElementById("full-example");
if (this.checked)
addClass(p, "alphabet-mode");
else
removeClass(p, "alphabet-mode");
});
HTMLTextAreaElement.prototype.insertAtCaret = function (text) {
if (this.selectionStart || this.selectionStart === 0) {
var startPos = this.selectionStart,
endPos = this.selectionEnd,
before = this.value.substring(0, startPos),
after = this.value.substring(endPos, this.value.length);
this.value = before + text + after;
this.selectionStart = startPos + text.length;
this.selectionEnd = startPos + text.length;
} else {
this.value += text;
}
};
// Global Helpers
var log = console.log.bind(console);
function id (x) {
return x;
}
function trim (str) {
return str.trim();
}
function toArray (list) {
return Array.prototype.slice.apply(list);
}
function Q (sel, parent) {
return toArray((parent || document).querySelectorAll(sel));
};
function comp (a, b) {
return function (x) { return a(b(x)); }
}
function defer (λ) {
return setTimeout(λ, 0);
}
function deferOf (λ) {
return function () { defer(λ); };
}
var ta = document.getElementById("textarea");
const UNICODE_START = 0xEB60;
const lerfu_index = "ndtzsgjx reoiuaymbpvfkc' l ,.";
const allowable = "():;\"?!<>[]{}«»";
function latinConvert(c) {
if (c.codePointAt(0) >= UNICODE_START || (allowable.indexOf(c) >= 0)) {
return c;
}
if (c == " ")
return " ";
if (c == "h" || c == "H")
c = "'";
if (lerfu_index.indexOf(c.toLowerCase()) >= 0)
return String.fromCodePoint(UNICODE_START + lerfu_index.indexOf(c.toLowerCase()));
if (c == "\n")
return "\n";
if (c == "\t")
return "\t";
return "";
}
ta.onkeydown = function(event) {
var kc = event.keyCode;
var k = event.key;
if (kc == 8) // backspace
return true;
if (kc >= 37 && kc <= 40) // arrow keys
return true;
if (event.ctrlKey) // ignore anything with ctrl
return true;
if (kc == 13)
k = "\n";
if (kc == 9)
k = "\t";
ta.insertAtCaret(latinConvert(k));
return false;
};
ta.onpaste = function(event) {
var text = undefined;
if (window.clipboardData && window.clipboardData.getData) { // IE
text = window.clipboardData.getData('Text');
} else if (event.clipboardData && event.clipboardData.getData) {
text = event.clipboardData.getData('text/plain');
}
for (var i = 0; i < [...text].length; i++) {
ta.insertAtCaret(latinConvert([...text][i]));
}
return false;
};
</script>
</body>
</html>