236 lines
13 KiB
HTML
236 lines
13 KiB
HTML
<article>
|
||
<style type="text/css">
|
||
#consonant-grid, #vowel-grid {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
td, .vowel-sequence {
|
||
padding: 2em;
|
||
border: 2px solid gray;
|
||
}
|
||
table > img {
|
||
width: 50%;
|
||
height: 50%;
|
||
}
|
||
.hero-example {
|
||
width: 60%;
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.example-glyph {
|
||
width: 20%;
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.vowel-example {
|
||
display: inline-block;
|
||
}
|
||
.vowel-example * {
|
||
vertical-align: middle;
|
||
}
|
||
.vowel-example svg {
|
||
width: 6em;
|
||
height: 6em;
|
||
}
|
||
</style>
|
||
<h3>An introduction to Circle Script (Version... 3?)</h3>
|
||
<p>Circle script is a writing system that I made up. The fundamental gimmick of it is that words and sentences in it form circles.</p>
|
||
<img src="splash-example.svg" alt="A large glyph composed of nested circles." class="hero-example" />
|
||
<p>It's largely decorative, has vague intentions at being phonetic, and I like using it in art! The other primary use case is writing cute notes to people I like.</p>
|
||
<h4>Here's the overview of how to read circle script:</h5>
|
||
<p>To read circle script, you start at whatever spot is marked with a little line segment outside the circle, parallel to it. If that's not present, you can usually start at the bottom. Walk around the circle widdershins (counterclockwise) and decode each shape and glyph you encounter, turning them into sounds.</p>
|
||
<img src="/circle_script/zagreus.svg" alt="A circle script glyph showing a single word-circle, with a small line outside the circle for a starting-point indicator." class="example-glyph"/>
|
||
<p>If you're reading a whole sentence, you walk around the circle and read each word as you come across it. For each word, you read it starting from the point where it touches the circle that contains it, so you kind of reorient as you go.</p>
|
||
<p>Also, you might have noticed that some of the shapes inside word-circles have lines connecting them. Those are decorative! A lot of the component parts of the circle script writing system have places for lines to come off. These can be connected as you like, but the... proper? I guess? fancy, perhaps? way to use them is to draw connecting lines between words which are conceptually linked. You might use those lines to connect an adjective with the noun it modifies, or the names of two people who care about each other. There's a lot of room for poetic embellishment in drawing lines between words!</p>
|
||
<p>Of course, you can also just draw the lines out in a way that looks cool. :)</p>
|
||
<h4>Okay, now the meat of circle script: How to read words!</h5>
|
||
<p>To read circle script, you need to understand consonants and vowels. Consonants are easier, so we'll start with those. Consonants are drawn with marks that float above (inside) the continuous line of the circle. Each consonant is composed of a shape, which corresponds to what kind of sound it is, and a diacritic, which indicates where in the mouth it is made. Additionally, if the consonant is <a href="https://en.wikipedia.org/wiki/Voice_(phonetics)">voiced</a>, the shape will generally be drawn with a doubled line.</p>
|
||
<p><strong>Phew!</strong> That sounded complicated. It's not so bad, really - I'm going to give you a grid, and you can just find the sound you want, and it'll tell you how to draw it. All of that business about kinds of sounds, places in mouths, and voice just means this is a featural script, so that similar sounds are indicated by similar-looking letters.</p>
|
||
<aside><p>In this version of circle script, consonants do not distort the overall shape, and vowels do. In versions 1 and 2, it was the other way around!</p></aside>
|
||
<table id="consonant-grid">
|
||
<thead>
|
||
<tr class="header">
|
||
<th></th>
|
||
<th scope="col" class="diacritic-header"><img src="example-diacritic-1.svg" /></th>
|
||
<th scope="col" class="diacritic-header"><img src="example-diacritic-2.svg" /></th>
|
||
<th scope="col" class="diacritic-header"><img src="example-diacritic-3.svg" /></th>
|
||
<th scope="col" class="diacritic-header"><img src="example-diacritic-4.svg" /></th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-mound-1.svg" /></th>
|
||
<td>[m] <strong>m</strong>ap</td>
|
||
<td>[n] <strong>n</strong>ope</td>
|
||
<td></td>
|
||
<td>[ŋ] ha<strong>ng</strong></td>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-mound-2.svg" /></th>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-ohm-1.svg" /></th>
|
||
<td>[p] <strong>p</strong>ear, [b] <strong>b</strong>at</td>
|
||
<td>[t] <strong>t</strong>alk, [d] <strong>d</strong>eal</td>
|
||
<td></td>
|
||
<td>[k] <strong>k</strong>ale, [g] <strong>g</strong>ulp</td>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-ohm-2.svg" /></th>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-angle-1.svg" /></th>
|
||
<td>[f] <strong>f</strong>ace, [v] <strong>v</strong>eer</td>
|
||
<td>[s] <strong>s</strong>ight, [z] <strong>z</strong>oot</td>
|
||
<td>[ʃ] <strong>sh</strong>ort, [ʒ] mea<strong>s</strong>ure</td>
|
||
<td></td>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-angle-2.svg" /></th>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-loop-1.svg" /></th>
|
||
<td>[θ] <strong>th</strong>in, [ð] <strong>th</strong>at</td>
|
||
<td></td>
|
||
<td>[tʃ] <strong>ch</strong>alk, [dʒ] <strong>j</strong>u<strong>dg</strong>e</td>
|
||
<td></td>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-loop-2.svg" /></th>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-wave-1.svg" /></th>
|
||
<td>[w] <strong>w</strong>alk</td>
|
||
<td>[ɹ] <strong>r</strong>eal, [l] <strong>l</strong>atent</td>
|
||
<td>[j] <strong>y</strong>eet</td>
|
||
<td>[h] <strong>h</strong>edonism</td>
|
||
<th scope="row" class="consonant-shape"><img src="consonant-wave-2.svg" /></th>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>If you're familiar with the <a href="https://en.wikipedia.org/wiki/International_Phonetic_Alphabet">international phonetic alphabet</a> this might look somewhat familiar! (Although I've taken some heavy liberties to make this fit into a grid and match with my American understanding of what sounds are similar) Each square in the grid shows the two consonants (one unvoiced, one unvoiced) indicated by that combination of diacritic (above) and shape (from the side). The unvoiced version (on the left, in a grid square) is indicated by the single-line version of the shape, seen on the left side of the grid. The voiced version uses the "heavy" version, seen on the right side of the grid and originally drawn with a doubled line. I've included the IPA transcription for the consonants, along with an example of that sound in my dialect, which is probably roughly <a href="https://en.wikipedia.org/wiki/General_American_English">General American English</a>.</p>
|
||
<p>Vowels are a little more haphazard. Have you ever really thought about vowels? They're pretty messed up, especially in English. We were taught the five vowels are a, e, i, o, u, and sometimes y. It turns out that while we have five and a half <em>letters</em> we call vowels, in English, they correspond to anywhere between twelve and fifteen different <em>sounds</em>. And those sounds aren't even necessarily the ones you're thinking of - a lot of the things we think of as individual vowels, like the /i/ in "r<strong>i</strong>ght", are actually diphthongs, composed of two vowels that we run together.</p>
|
||
<p>Anyway, circle script draws vowels as modifications to the outer circle of a word - as you're drawing the circle, you take a detour to take either a small bite out of it, a big bite out of it, or a loop-the-loop. It is then decorated with a circle, placed either above the detour shape (on the inside of the overall word circle), below the detour shape (often inside the detour shape, towards the outside of the word circle), or on the line of the detour circle. Then, you add a line for emphasis if necessary.</p>
|
||
<p>The vowels are organized in a way close to the five vowel system seen in many languages. Consider the Japanese ka ki ku ke ko; these are considered the "strong" versions of the five basic vowels. They also come in "weak" versions, common in English. The pairing between strong and weak versions is roughly based on whatever I thought made the most sense to my ears. They're listed in the vowel chart. A strong vowel will have a line extending off it, which can be used freely as with the connectors on the consonant glyphs, and a weak vowel will have no such line.</p>
|
||
<p>There's one vowel that I didn't quite fit into a correspondence with another "stronger" or "weaker" vowel, /æ/, which you might know from the word "bat" or "back" (in American English). There are also three common diphthongs provided as vowel glyphs. </p>
|
||
<p>Hopefully, if this system needs to be extended for other vowels, they can be defined by relation to a "similar" sounding vowel, and adding a diacritic of some sort. But that hasn't been standardized yet.</p>
|
||
<p>The examples I give are based on my accent (some variation of general American English), so if there's any confusion, consult a resource like <a href="https://ipachart.com">ipachart.com</a> for recordings of vowels. Several common diphthongs are available as vowel shapes.</p>
|
||
<object data="vowel-example.svg" type="image/svg+xml" style="display: none"></object>
|
||
<div id="vowel-grid">
|
||
<div class="vowel-sequence">
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 0 24 80" >
|
||
<use href="vowel-example.svg#base-omega" ></use>
|
||
<use href="vowel-example.svg#dot-outer"></use>
|
||
<use href="vowel-example.svg#emphasis-outer"></use>
|
||
</svg>
|
||
[ɑ, a], box or bah
|
||
</div>
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 0 24 80" >
|
||
<use href="vowel-example.svg#base-omega" ></use>
|
||
<use href="vowel-example.svg#dot-outer"></use>
|
||
</svg>
|
||
[ʌ, ə], but or schwa (unstressed)
|
||
</div>
|
||
</div>
|
||
<div class="vowel-sequence">
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 -12 24 80" >
|
||
<use href="vowel-example.svg#base-mound" ></use>
|
||
<use href="vowel-example.svg#dot-inner"></use>
|
||
<use href="vowel-example.svg#emphasis-inner"></use>
|
||
</svg>
|
||
[i], beat
|
||
</div>
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 -12 24 80" >
|
||
<use href="vowel-example.svg#base-mound" ></use>
|
||
<use href="vowel-example.svg#dot-inner"></use>
|
||
</svg>
|
||
[ɪ], bit
|
||
</div>
|
||
</div>
|
||
<div class="vowel-sequence">
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 -12 24 80" >
|
||
<use href="vowel-example.svg#base-mound" ></use>
|
||
<use href="vowel-example.svg#triangle-inner"></use>
|
||
<use href="vowel-example.svg#emphasis-inner"></use>
|
||
</svg>
|
||
[u], boot
|
||
</div>
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 -12 24 80" >
|
||
<use href="vowel-example.svg#base-mound" ></use>
|
||
<use href="vowel-example.svg#triangle-inner"></use>
|
||
</svg>
|
||
[ʊ], book
|
||
</div>
|
||
</div>
|
||
<div class="vowel-sequence">
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 -12 24 80" >
|
||
<use href="vowel-example.svg#base-mound" ></use>
|
||
<use href="vowel-example.svg#dot-outer"></use>
|
||
<use href="vowel-example.svg#emphasis-outer"></use>
|
||
</svg>
|
||
[ɛi, e], bait
|
||
</div>
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 -12 24 80" >
|
||
<use href="vowel-example.svg#base-mound" ></use>
|
||
<use href="vowel-example.svg#dot-outer"></use>
|
||
</svg>
|
||
[ɛ], bet
|
||
</div>
|
||
</div>
|
||
<div class="vowel-sequence">
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 0 24 80" >
|
||
<use href="vowel-example.svg#base-omega" ></use>
|
||
<use href="vowel-example.svg#dot-inner"></use>
|
||
<use href="vowel-example.svg#emphasis-inner"></use>
|
||
</svg>
|
||
[o, ɔu], won't, boat
|
||
</div>
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 0 24 80" >
|
||
<use href="vowel-example.svg#base-omega" ></use>
|
||
<use href="vowel-example.svg#dot-inner"></use>
|
||
</svg>
|
||
[ɔ], bawk
|
||
</div>
|
||
</div>
|
||
<div class="vowel-sequence">
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 0 24 80" >
|
||
<use href="vowel-example.svg#base-omega" ></use>
|
||
<use href="vowel-example.svg#dot-on"></use>
|
||
</svg>
|
||
[æ], bat
|
||
</div>
|
||
</div>
|
||
<div class="vowel-sequence">
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 0 24 80" >
|
||
<use href="vowel-example.svg#base-loop" ></use>
|
||
<use href="vowel-example.svg#dot-outer"></use>
|
||
</svg>
|
||
[au], cow
|
||
</div>
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 0 24 80" >
|
||
<use href="vowel-example.svg#base-loop" ></use>
|
||
<use href="vowel-example.svg#dot-on"></use>
|
||
</svg>
|
||
[ai, aɪ], by
|
||
</div>
|
||
<div class="vowel-example">
|
||
<svg viewBox="0 0 24 80" >
|
||
<use href="vowel-example.svg#base-loop" ></use>
|
||
<use href="vowel-example.svg#dot-inner"></use>
|
||
</svg>
|
||
[ɔi, ɔɪ], boy
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>If you merge caught-cot, it is preferred to use the strong vowel /a~ɑ/ rather than the weak /ɔ/ vowel.</p>
|
||
|
||
</article>
|