Fix IPA field help rendering; Use arrows in usage.html

This commit is contained in:
Robbie Antenesse 2019-05-30 14:11:06 -06:00 committed by Robbie Antenesse
parent 04f70e4bfa
commit 596efff70d
3 changed files with 46 additions and 45 deletions

View File

@ -9,17 +9,17 @@ that allow you to type any IPA symbol with only a standard keyboard.</p>
<li>
<p>Many symbols that look similar to letters of the English alphabet (such as
small caps) can be produced by doubling the capital letter:</p>
<pre><code> GG -&gt; ɢ ?? -&gt; ʔ NN -&gt; ɴ BB -&gt; ʙ RR -&gt; ʀ XX -&gt; χ
LL -&gt; ʟ II -&gt; ɪ YY -&gt; ʏ UU -&gt; ʊ EE -&gt; ɛ OO -&gt; ɞ
AA -&gt; ɑ '' -&gt; ˈ ,, -&gt; ˌ :: -&gt; ː
<pre><code> GG &rarr; ɢ ?? &rarr; ʔ NN &rarr; ɴ BB &rarr; ʙ RR &rarr; ʀ XX &rarr; χ
LL &rarr; ʟ II &rarr; ɪ YY &rarr; ʏ UU &rarr; ʊ EE &rarr; ɛ OO &rarr; ɞ
AA &rarr; ɑ '' &rarr; ˈ ,, &rarr; ˌ :: &rarr; ː
</code></pre>
</li>
<li>
<p>The slash is used to &quot;reflect,&quot; &quot;rotate,&quot; or otherwise flip around a given
symbol:</p>
<pre><code> ʀ/ -&gt; ʁ ʔ/ -&gt; ʕ ?/ -&gt; ʕ r/ -&gt; ɹ y/ -&gt; ʎ m/ -&gt; ɯ
o/ -&gt; ø e/ -&gt; ə ɛ/ -&gt; ɜ c/ -&gt; ɔ a/ -&gt; ɐ ɑ/ -&gt; ɒ
w/ -&gt; ʍ h/ -&gt; ɥ k/ -&gt; ʞ !/ -&gt; ¡ v/ -&gt; ʌ
<pre><code> ʀ/ &rarr; ʁ ʔ/ &rarr; ʕ ?/ &rarr; ʕ r/ &rarr; ɹ y/ &rarr; ʎ m/ &rarr; ɯ
o/ &rarr; ø e/ &rarr; ə ɛ/ &rarr; ɜ c/ &rarr; ɔ a/ &rarr; ɐ ɑ/ &rarr; ɒ
w/ &rarr; ʍ h/ &rarr; ɥ k/ &rarr; ʞ !/ &rarr; ¡ v/ &rarr; ʌ
</code></pre>
<p>Also note that for any digraph, if either of the two characters that
compose it are not &quot;standard&quot; letters you can find on your keyboard, the
@ -35,26 +35,26 @@ visual <code>o|</code> and <code>|o</code>.</p>
characters, or two characters next to each other. This includes &quot;hooked&quot;
letters (such as ŋ), produced with the original letter and a comma, and
&quot;stroked&quot; letters (such as ɟ), produced with the original letter and a dash:</p>
<pre><code> m, -&gt; ɱ n, -&gt; ŋ ŋ, -&gt; ɲ v, -&gt; ⱱ c, -&gt; ç j, -&gt; ʝ
x, -&gt; ɣ ɣ, -&gt; χ h, -&gt; ɦ w, -&gt; ɰ
<pre><code> m, &rarr; ɱ n, &rarr; ŋ ŋ, &rarr; ɲ v, &rarr; ⱱ c, &rarr; ç j, &rarr; ʝ
x, &rarr; ɣ ɣ, &rarr; χ h, &rarr; ɦ w, &rarr; ɰ
j- -&gt; ɟ h- -&gt; ħ l- -&gt; ɬ i- -&gt; ɨ u- -&gt; ʉ e- -&gt; ɘ
o- -&gt; ɵ ʕ- -&gt; ʢ ?- -&gt; ʡ ʔ- -&gt; ʡ
j- &rarr; ɟ h- &rarr; ħ l- &rarr; ɬ i- &rarr; ɨ u- &rarr; ʉ e- &rarr; ɘ
o- &rarr; ɵ ʕ- &rarr; ʢ ?- &rarr; ʡ ʔ- &rarr; ʡ
LZ -&gt; ɮ OX -&gt; ɤ XO -&gt; ɤ OE -&gt; œ EB -&gt; ɞ AE -&gt; æ
CE -&gt; ɶ RL -&gt; ɺ LR -&gt; ɺ ɾl -&gt; ɺ lɾ -&gt; ɺ
LZ &rarr; ɮ OX &rarr; ɤ XO &rarr; ɤ OE &rarr; œ EB &rarr; ɞ AE &rarr; æ
CE &rarr; ɶ RL &rarr; ɺ LR &rarr; ɺ ɾl &rarr; ɺ lɾ &rarr; ɺ
w| -&gt; ɰ o/ -&gt; ø ɜ( -&gt; ɞ /\ -&gt; ʌ o| -&gt; ɑ a| -&gt; ɑ
|o -&gt; ɒ |a -&gt; ɒ
w| &rarr; ɰ o/ &rarr; ø ɜ( &rarr; ɞ /\ &rarr; ʌ o| &rarr; ɑ a| &rarr; ɑ
|o &rarr; ɒ |a &rarr; ɒ
o. -&gt; ʘ |= -&gt; ǂ || -&gt; ‖ /^ -&gt; ↗ /&gt; -&gt; ↗ \v -&gt; ↘
\&gt; -&gt; ↘
o. &rarr; ʘ |= &rarr; ǂ || &rarr; ‖ /^ &rarr; ↗ /&gt; &rarr; ↗ \v &rarr; ↘
\&gt; &rarr; ↘
</code></pre>
</li>
<li>
<p>Others are based on pronunciation:</p>
<pre><code> PH -&gt; ɸ BH -&gt; β TH -&gt; θ DH -&gt; ð SH -&gt; ʃ ZH -&gt; ʒ
SJ -&gt; ɕ ZJ -&gt; ʑ ʃx -&gt; ɧ xʃ -&gt; ɧ
<pre><code> PH &rarr; ɸ BH &rarr; β TH &rarr; θ DH &rarr; ð SH &rarr; ʃ ZH &rarr; ʒ
SJ &rarr; ɕ ZJ &rarr; ʑ ʃx &rarr; ɧ xʃ &rarr; ɧ
</code></pre>
<p>It may be worth noting at this point that digraphs of two lowercase letters
were intentionally avoided to prevent interference with regular typing. If
@ -66,7 +66,7 @@ to the second character.</p>
</li>
<li>
<p>A few digraphs are based on shape:</p>
<pre><code> rO -&gt; ɾ r0 -&gt; ɾ vO -&gt; ʋ v0 -&gt; ʋ
<pre><code> rO &rarr; ɾ r0 &rarr; ɾ vO &rarr; ʋ v0 &rarr; ʋ
</code></pre>
<p>Another related point: digraphs that contain a lowercase letter can also be
typed with that letter as uppercase. So, if <code>RO</code> is easier to type than
@ -75,35 +75,35 @@ typed with that letter as uppercase. So, if <code>RO</code> is easier to type th
<li>
<p>Retroflex and nonpulmonic symbols have their own categories:</p>
<pre><code> retroflex: ) looks like the shape of the tongue
t) -&gt; ʈ d) -&gt; ɖ n) -&gt; ɳ r) -&gt; ɽ ɾ) -&gt; ɽ s) -&gt; ʂ
z) -&gt; ʐ ɹ) -&gt; ɻ l) -&gt; ɭ ɗ) -&gt; ᶑ
t) &rarr; ʈ d) &rarr; ɖ n) &rarr; ɳ r) &rarr; ɽ ɾ) &rarr; ɽ s) &rarr; ʂ
z) &rarr; ʐ ɹ) &rarr; ɻ l) &rarr; ɭ ɗ) &rarr; ᶑ
clicks: clicking noise reminiscent of a *
o* -&gt; ʘ |* -&gt; ǀ !* -&gt; ǃ =* -&gt; ǁ
o* &rarr; ʘ |* &rarr; ǀ !* &rarr; ǃ =* &rarr; ǁ
implosives and ejective marker: direction of airflow
b( -&gt; ɓ d( -&gt; ɗ j( -&gt; ʄ ɟ( -&gt; ʄ g( -&gt; ɠ ɢ( -&gt; ʛ
ɖ( -&gt; ᶑ ') -&gt; ʼ
b( &rarr; ɓ d( &rarr; ɗ j( &rarr; ʄ ɟ( &rarr; ʄ g( &rarr; ɠ ɢ( &rarr; ʛ
ɖ( &rarr; ᶑ ') &rarr; ʼ
</code></pre>
</li>
<li>
<p>Superscripts and diacritics that go above the letter use <code>^</code>, diacritics that
go below use <code>_</code>, and miscellaneous &quot;moved&quot; symbols
use <code>&lt;</code> or <code>&gt;</code>:</p>
<pre><code> ^h -&gt; ʰ ^n -&gt; ⁿ ^m -&gt; ᵐ ^ŋ -&gt; ᵑ ^l -&gt; ˡ ^w -&gt; ʷ
^j -&gt; ʲ ^ɥ -&gt; ᶣ ^ʋ -&gt; ᶹ ^ɣ -&gt; ˠ ^ʕ -&gt; ˤ
<pre><code> ^h &rarr; ʰ ^n &rarr; ⁿ ^m &rarr; ᵐ ^ŋ &rarr; ᵑ ^l &rarr; ˡ ^w &rarr; ʷ
^j &rarr; ʲ ^ɥ &rarr; ᶣ ^ʋ &rarr; ᶹ ^ɣ &rarr; ˠ ^ʕ &rarr; ˤ
_| -&gt; ◌̩ ^| -&gt; ◌̍ _o -&gt; ◌̥ ^o -&gt; ◌̊ _v -&gt; ◌̬ ^v -&gt; ◌̌
_| &rarr; ◌̩ ^| &rarr; ◌̍ _o &rarr; ◌̥ ^o &rarr; ◌̊ _v &rarr; ◌̬ ^v &rarr; ◌̌
_^ -&gt; ◌̯ _: -&gt; ◌̤ _~ -&gt; ◌̰ _[ -&gt; ◌̪ _] -&gt; ◌̺ _{ -&gt; ◌̼
_+ -&gt; ◌̟ __ -&gt; ◌̠ _) -&gt; ◌̹ _( -&gt; ◌̜ _# -&gt; ◌̻ [] -&gt; ◌̻
_^ &rarr; ◌̯ _: &rarr; ◌̤ _~ &rarr; ◌̰ _[ &rarr; ◌̪ _] &rarr; ◌̺ _{ &rarr; ◌̼
_+ &rarr; ◌̟ __ &rarr; ◌̠ _) &rarr; ◌̹ _( &rarr; ◌̜ _# &rarr; ◌̻ [] &rarr; ◌̻
^&gt; -&gt; ◌̚ ^: -&gt; ◌̈ ^x -&gt; ◌̽ ^~ -&gt; ◌̃
^&gt; &rarr; ◌̚ ^: &rarr; ◌̈ ^x &rarr; ◌̽ ^~ &rarr; ◌̃
-' -&gt; ˔ _˔ -&gt; ◌̝ -, -&gt; ˕ _˕ -&gt; ◌̞ &lt;| -&gt; ⊣ _⊣ -&gt; ◌̘
&gt;| -&gt; ⊢ _⊢ -&gt; ◌̙
-' &rarr; ˔ _˔ &rarr; ◌̝ -, &rarr; ˕ _˕ &rarr; ◌̞ &lt;| &rarr; ⊣ _⊣ &rarr; ◌̘
&gt;| &rarr; ⊢ _⊢ &rarr; ◌̙
~~ -&gt; ◌̴ &gt;r -&gt; ˞
~~ &rarr; ◌̴ &gt;r &rarr; ˞
</code></pre>
<p>Note that all of these sequences can be flipped in order—that is, <code>^h</code>
produces the same thing as <code>h^</code>. This allows usage such as <code>|&lt;_</code> to produce
@ -111,16 +111,16 @@ produces the same thing as <code>h^</code>. This allows usage such as <code>|&lt
</li>
<li>
<p>Tonal countours use numbers plus <code>|</code>:</p>
<pre><code> 5| -&gt; ˥ 4| -&gt; ˦ 3| -&gt; ˧ 2| -&gt; ˨ 1| -&gt; ˩
+| -&gt; ꜛ -| -&gt; ꜜ
<pre><code> 5| &rarr; ˥ 4| &rarr; ˦ 3| &rarr; ˧ 2| &rarr; ˨ 1| &rarr; ˩
+| &rarr; ꜛ -| &rarr; ꜜ
</code></pre>
</li>
<li>
<p>Finally, some digraphs simply have unique mnemonics:</p>
<pre><code> ː- -&gt; ˑ &quot;chop off&quot; the bottom triangle
(( -&gt; ◌͡◌ two parens for a tie that connects 2 chars
)) -&gt; ◌͜◌
◌͜◌) -&gt; ‿ one more paren to make it a little bit longer
<pre><code> ː- &rarr; ˑ &quot;chop off&quot; the bottom triangle
(( &rarr; ◌͡◌ two parens for a tie that connects 2 chars
)) &rarr; ◌͜◌
◌͜◌) &rarr; ‿ one more paren to make it a little bit longer
</code></pre>
</li>
</ul>

View File

@ -292,6 +292,12 @@ export function renderEditForm(wordId = false) {
}
}
export function renderIPAHelp() {
import('./KeyboardFire/phondue/usage.html').then(html => {
renderInfoModal(html);
});
}
export function renderIPATable(ipaTableButton) {
ipaTableButton = typeof ipaTableButton.target === 'undefined' || ipaTableButton.target === '' ? ipaTableButton : ipaTableButton.target;
const label = ipaTableButton.parentElement.innerText.replace(/(Field Help|IPA Chart)/g, '').trim();

View File

@ -1,5 +1,5 @@
import {showSection, hideDetailsPanel} from './displayToggles';
import { renderWords, renderEditForm, renderMaximizedTextbox, renderInfoModal, renderIPATable } from './render';
import { renderWords, renderEditForm, renderMaximizedTextbox, renderInfoModal, renderIPATable, renderIPAHelp } from './render';
import { confirmEditWord, cancelEditWord, confirmDeleteWord, submitWordForm } from './wordManagement';
import { openEditModal, saveEditModal, saveAndCloseEditModal, exportDictionary, exportWords, importDictionary, importWords, confirmDeleteDictionary } from './dictionaryManagement';
import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
@ -287,11 +287,6 @@ export function setupIPAButtons() {
button.addEventListener('click', renderIPATable);
});
const renderIPAHelp = () => {
import('./KeyboardFire/phondue/usage.html').then(html => {
renderInfoModal(html);
});
}
Array.from(ipaFieldHelpButtons).forEach(button => {
button.removeEventListener('click', renderIPAHelp);
button.addEventListener('click', renderIPAHelp);