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