From e2ad7e94cdbb23c5f8871b9e3fa854feeabc6ac6 Mon Sep 17 00:00:00 2001
From: Neonnaut <Neonnaut25@gmail.com>
Date: Mon, 15 Jul 2024 16:47:10 +1000
Subject: [PATCH] improve ipa keyboard styling

---
 ipa-keyboard.html | 239 ++++++++++++++++++++++-----------------------
 style.css         |  25 ++---
 test.html         | 244 +++++++++++++++++++++++-----------------------
 3 files changed, 255 insertions(+), 253 deletions(-)

diff --git a/ipa-keyboard.html b/ipa-keyboard.html
index cf7944f..dd7b83b 100644
--- a/ipa-keyboard.html
+++ b/ipa-keyboard.html
@@ -30,19 +30,18 @@
 
 <section id="top">
 <h1>IPA Keyboard and X-Sampa Converter</h1>
-<table class="btns xipa-table" id="IPA">
+<table class="btns ipa-table" id="IPA">
    <tr>
-      <td><button class="Cons" title="voiceless bilabial plosive" onclick="writeSampa(event, 'p')">p</button></td>
-      <td></td>
-      <td><button class="Cons" title="voiceless dental plosive" onclick="writeSampa(event, 't&#810;')">t&#810;</button></td>
-      <td><button class="Cons" title="voiceless alveolar plosive" onclick="writeSampa(event, 't')">t</button></td>
-      <td></td>  <td></td>
-      <td><button class="Cons" title="voiceless retroflex plosive" onclick="writeSampa(event, '&#648;')">&#648;</button></td>
-      <td><button class="Cons" title="voiceless palatal plosive" onclick="writeSampa(event, 'c')">c</button></td>
-      <td><button class="Cons" title="voiceless velar plosive" onclick="writeSampa(event, 'k')">k</button></td>
-      <td><button class="Cons" title="voiceless uvular plosive" onclick="writeSampa(event, 'q')">q</button></td>
-      <td><button class="Cons" title="voiceless epiglottal plosive" onclick="writeSampa(event, '&#673;')">&#673;</button></td>
-      <td><button class="Cons" title="voiceless glottal plosive" onclick="writeSampa(event, '&#660;')">&#660;</button></td>
+      <td><button class="Cons" title="voiced bilabial nasal" onclick="writeSampa(event, 'm')">m</button></td>
+      <td><button class="Cons" title="voiced labiodental nasal" onclick="writeSampa(event, '&#625;')">&#625;</button></td>
+      <td><button class="Cons" title="voiced dental nasal" onclick="writeSampa(event, 'n&#810;')">n&#810;</button></td>
+      <td><button class="Cons" title="voiced alveolar nasal" onclick="writeSampa(event, 'n')">n</button></td>
+      <td></td>   <td></td>
+      <td><button class="Cons" title="voiced retroflex nasal" onclick="writeSampa(event, '&#627;')">&#627;</button></td>
+      <td><button class="Cons" title="voiced palatal nasal" onclick="writeSampa(event, '&#626;')">&#626;</button></td>
+      <td><button class="Cons" title="voiced velar nasal" onclick="writeSampa(event, '&#331;')">&#331;</button></td>
+      <td><button class="Cons" title="voiced uvular nasal" onclick="writeSampa(event, '&#628;')">&#628;</button></td>
+      <td></td>   <td></td>
       <td class="seperator"></td>
       <td><button class="Vowel" title="close front unrounded vowel" onclick="writeSampa(event, 'i')">i</button></td>
       <td><button class="Vowel" title="close front rounded vowel" onclick="writeSampa(event, 'y')">y</button></td>
@@ -58,17 +57,18 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Tone" title="global rise" onclick="writeSampa(event, '&#8599;&#xFE0E;')">&#8599;&#xFE0E;</button></td>
    </tr>
    <tr>
-      <td><button class="Cons" title="voiced bilabial plosive" onclick="writeSampa(event, 'b')">b</button></td>
+      <td><button class="Cons" title="voiceless bilabial plosive" onclick="writeSampa(event, 'p')">p</button></td>
       <td></td>
-      <td><button class="Cons" title="voiced dental plosive" onclick="writeSampa(event, 'd&#810;')">d&#810;</button></td>
-      <td><button class="Cons" title="voiced alveolar plosive" onclick="writeSampa(event, 'd')">d</button></td>
-      <td></td>  <td></td>  
-      <td><button class="Cons" title="voiced retroflex plosive" onclick="writeSampa(event, '&#598;')">&#598;</button></td>
-      <td><button class="Cons" title="voiced palatal plosive" onclick="writeSampa(event, '&#607;')">&#607;</button></td>
-      <td><button class="Cons" title="voiced velar plosive" onclick="writeSampa(event, 'g')">g</button></td>
-      <td><button class="Cons" title="voiced uvular plosive" onclick="writeSampa(event, '&#610;')">&#610;</button></td>
+      <td><button class="Cons" title="voiceless dental plosive" onclick="writeSampa(event, 't&#810;')">t&#810;</button></td>
+      <td><button class="Cons" title="voiceless alveolar plosive" onclick="writeSampa(event, 't')">t</button></td>
       <td></td>  <td></td>
-      <td class="seperator"></td> 
+      <td><button class="Cons" title="voiceless retroflex plosive" onclick="writeSampa(event, '&#648;')">&#648;</button></td>
+      <td><button class="Cons" title="voiceless palatal plosive" onclick="writeSampa(event, 'c')">c</button></td>
+      <td><button class="Cons" title="voiceless velar plosive" onclick="writeSampa(event, 'k')">k</button></td>
+      <td><button class="Cons" title="voiceless uvular plosive" onclick="writeSampa(event, 'q')">q</button></td>
+      <td><button class="Cons" title="voiceless epiglottal plosive" onclick="writeSampa(event, '&#673;')">&#673;</button></td>
+      <td><button class="Cons" title="voiceless glottal plosive" onclick="writeSampa(event, '&#660;')">&#660;</button></td>
+      <td class="seperator"></td>
       <td><button class="Vowel" title="near-close near-front unrounded vowel" onclick="writeSampa(event, '&#618;')">&#618;</button></td>
       <td><button class="Vowel" title="near-close near-front rounded vowel" onclick="writeSampa(event, '&#655;')">&#655;</button></td>
       <td></td>  <td></td>  <td></td>
@@ -81,17 +81,17 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Tone" title="upstep" onclick="writeSampa(event, '&#42779;')">&#42779;</button></td>
    </tr>
    <tr>
-      <td><button class="ConsN" title="bilabial ejective" onclick="writeSampa(event, 'p&#700;')">p&#700;</button></td>
-      <td></td>  <td></td>
-      <td><button class="ConsN" title="dental/alveolar ejective" onclick="writeSampa(event, 't&#700;')">t&#700;</button></td>
-      <td></td>  <td></td>
-      <td><button class="ConsN" title="retroflex ejective" onclick="writeSampa(event, '&#648;&#700;')">&#648;&#700;</button></td>
-      <td><button class="ConsN" title="palatal ejective" onclick="writeSampa(event, 'c&#700;')">c&#700;</button></td>
-      <td><button class="ConsN" title="velar ejective" onclick="writeSampa(event, 'k&#700;')">k&#700;</button></td>
-      <td><button class="ConsN" title="uvular ejective" onclick="writeSampa(event, 'q&#700;')">q&#700;</button></td>
+      <td><button class="Cons" title="voiced bilabial plosive" onclick="writeSampa(event, 'b')">b</button></td>
       <td></td>
-      <td><button class="ConsN" title="ejective" onclick="writeSampa(event, '&#700;')">&#9676;&#700;</button></td>
-      <td class="seperator"></td> 
+      <td><button class="Cons" title="voiced dental plosive" onclick="writeSampa(event, 'd&#810;')">d&#810;</button></td>
+      <td><button class="Cons" title="voiced alveolar plosive" onclick="writeSampa(event, 'd')">d</button></td>
+      <td></td>  <td></td>  
+      <td><button class="Cons" title="voiced retroflex plosive" onclick="writeSampa(event, '&#598;')">&#598;</button></td>
+      <td><button class="Cons" title="voiced palatal plosive" onclick="writeSampa(event, '&#607;')">&#607;</button></td>
+      <td><button class="Cons" title="voiced velar plosive" onclick="writeSampa(event, 'g')">g</button></td>
+      <td><button class="Cons" title="voiced uvular plosive" onclick="writeSampa(event, '&#610;')">&#610;</button></td>
+      <td></td>  <td></td>
+      <td class="seperator"></td>
       <td><button class="Vowel" title="close-mid front unrounded vowel" onclick="writeSampa(event, 'e')">e</button></td>
       <td><button class="Vowel" title="close-mid front rounded vowel" onclick="writeSampa(event, '&#248;')">&#248;</button></td>
       <td><button class="Vowel" title="close-mid central unrounded vowel" onclick="writeSampa(event, '&#600;')">&#600;</button></td>
@@ -106,16 +106,17 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td></td>   
    </tr>
    <tr>
-      <td><button class="ConsN" title="voiced bilabial implosive" onclick="writeSampa(event, '&#595;')">&#595;</button></td>
-      <td></td>  <td></td>
-      <td><button class="ConsN" title="voiced alveolar implosive" onclick="writeSampa(event, '&#599;')">&#599;</button></td>
+      <td><button class="ConsN" title="bilabial ejective" onclick="writeSampa(event, 'p&#700;')">p&#700;</button></td>
       <td></td>  <td></td>
-      <td><button class="ConsN" title="voiced retroflex implosive" onclick="writeSampa(event, '&#7569;')">&#7569;</button></td>
-      <td><button class="ConsN" title="voiced palatal implosive" onclick="writeSampa(event, '&#644;')">&#644;</button></td>
-      <td><button class="ConsN" title="voiced velar implosive" onclick="writeSampa(event, '&#608;')">&#608;</button></td>
-      <td><button class="ConsN" title="voiced uvular implosive" onclick="writeSampa(event, '&#667;')">&#667;</button></td>
+      <td><button class="ConsN" title="dental/alveolar ejective" onclick="writeSampa(event, 't&#700;')">t&#700;</button></td>
       <td></td>  <td></td>
-      <td class="seperator"></td>
+      <td><button class="ConsN" title="retroflex ejective" onclick="writeSampa(event, '&#648;&#700;')">&#648;&#700;</button></td>
+      <td><button class="ConsN" title="palatal ejective" onclick="writeSampa(event, 'c&#700;')">c&#700;</button></td>
+      <td><button class="ConsN" title="velar ejective" onclick="writeSampa(event, 'k&#700;')">k&#700;</button></td>
+      <td><button class="ConsN" title="uvular ejective" onclick="writeSampa(event, 'q&#700;')">q&#700;</button></td>
+      <td></td>
+      <td><button class="ConsN" title="ejective" onclick="writeSampa(event, '&#700;')">&#9676;&#700;</button></td>
+      <td class="seperator"></td> 
       <td><button class="Vowel" title="mid front unrounded vowel" onclick="writeSampa(event, 'e&#798;')">e&#798;</button></td>
       <td><button class="Vowel" title="mid front rounded vowel" onclick="writeSampa(event, '&#248;&#798;')">&#248;&#798;</button></td>
       <td><button class="Vowel" title="mid central (unrounded) vowel (schwa)" onclick="writeSampa(event, '&#601;')">&#601;</button></td>
@@ -130,15 +131,15 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Tone" title="downstep" onclick="writeSampa(event, '&#42780;')">&#42780;</button></td>
    </tr>
    <tr>
-      <td><button class="ConsN" title="bilabial click" onclick="writeSampa(event, '&#664;')">&#664;</button></td>
-      <td></td>
-      <td><button class="ConsN" title="dental click" onclick="writeSampa(event, '&#448;')">&#448;</button></td>
-      <td></td>
-      <td><button class="ConsN" title="alveolar lateral click" onclick="writeSampa(event, '&#449;')">&#449;</button></td>
-      <td><button class="ConsN" title="(post)alveolar click" onclick="writeSampa(event, '&#451;')">&#451;</button></td>
-      <td><button class="ConsN" title="retroflex click" onclick="writeSampa(event, '&#x203C;&#xFE0E;')">&#x203C;&#xFE0E;</button></td>
-      <td><button class="ConsN" title="palatoalveolar click" onclick="writeSampa(event, '&#450;')">&#450;</button></td>
-      <td></td>  <td></td>  <td></td>  <td></td>
+      <td><button class="ConsN" title="voiced bilabial implosive" onclick="writeSampa(event, '&#595;')">&#595;</button></td>
+      <td></td>  <td></td>
+      <td><button class="ConsN" title="voiced alveolar implosive" onclick="writeSampa(event, '&#599;')">&#599;</button></td>
+      <td></td>  <td></td>
+      <td><button class="ConsN" title="voiced retroflex implosive" onclick="writeSampa(event, '&#7569;')">&#7569;</button></td>
+      <td><button class="ConsN" title="voiced palatal implosive" onclick="writeSampa(event, '&#644;')">&#644;</button></td>
+      <td><button class="ConsN" title="voiced velar implosive" onclick="writeSampa(event, '&#608;')">&#608;</button></td>
+      <td><button class="ConsN" title="voiced uvular implosive" onclick="writeSampa(event, '&#667;')">&#667;</button></td>
+      <td></td>  <td></td>
       <td class="seperator"></td>
       <td><button class="Vowel" title="open-mid front unrounded vowel" onclick="writeSampa(event, '&#603;')">&#603;</button></td>
       <td><button class="Vowel" title="open-mid front rounded vowel" onclick="writeSampa(event, '&#339;')">&#339;</button></td>
@@ -153,6 +154,28 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Tone" title="falling tone (Chao letter)" onclick="writeSampa(event, '&#741;&#745;')">&#741;&#745;</button></td>
       <td><button class="Tone" title="global fall" onclick="writeSampa(event, '&#8600;&#xFE0E;')">&#8600;&#xFE0E;</button></td>
    </tr>
+   <tr>
+      <td><button class="ConsN" title="bilabial click" onclick="writeSampa(event, '&#664;')">&#664;</button></td>
+      <td></td>
+      <td><button class="ConsN" title="dental click" onclick="writeSampa(event, '&#448;')">&#448;</button></td>
+      <td></td>
+      <td><button class="ConsN" title="alveolar lateral click" onclick="writeSampa(event, '&#449;')">&#449;</button></td>
+      <td><button class="ConsN" title="(post)alveolar click" onclick="writeSampa(event, '&#451;')">&#451;</button></td>
+      <td><button class="ConsN" title="retroflex click" onclick="writeSampa(event, '&#x203C;&#xFE0E;')">&#x203C;&#xFE0E;</button></td>
+      <td><button class="ConsN" title="palatoalveolar click" onclick="writeSampa(event, '&#450;')">&#450;</button></td>
+      <td></td>  <td></td>  <td></td>  <td></td>
+      <td class="seperator"></td>
+      <td><button class="Vowel" title="near-open front unrounded vowel" onclick="writeSampa(event, '&#230;')">&#230;</button></td>
+      <td><button class="Vowel" title="near-open front rounded vowel" onclick="writeSampa(event, '&#339;&#798;')">&#339;&#798;</button></td>
+      <td><button class="Vowel" title="near-open central (unrounded) vowel" onclick="writeSampa(event, '&#592;')">&#592;</button></td>
+      <td><button class="Vowel" title="near-open central rounded vowel" onclick="writeSampa(event, '&#606;&#798;')">&#606;&#798;</button></td>
+      <td></td>  <td></td>  <td></td>
+      <td><button class="Diac" title="primary stress" onclick="writeSampa(event, '&#712;')">&#712;&#9676;</button></td>
+      <td><button class="Diac" title="long" onclick="writeSampa(event, '&#720;')">&#9676;&#720;</button></td>
+      <td><button class="Diac" title="half-long" onclick="writeSampa(event, '&#721;')">&#9676;&#721;</button></td>
+      <td><button class="Supra" title="minor (foot) group" onclick="writeSampa(event, '&#124;')">&#124;</button></td>
+      <td><button class="Supra" title="major (intonation) group" onclick="writeSampa(event, '&#8214;')">&#8214;</button></td>
+   </tr>
    <tr>
       <td><button class="Cons" title="voiceless bilabial fricative" class="bilabial" onclick="writeSampa(event, '&#632;')">&#632;</button></td>
       <td><button class="Cons" title="voiceless labiodental fricative" onclick="writeSampa(event, 'f')">f</button></td>
@@ -167,16 +190,18 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Cons" title="voiceless pharyngeal fricative" onclick="writeSampa(event, '&#295;')">&#295;</button></td>
       <td><button class="Cons" title="voiceless glottal fricative" onclick="writeSampa(event, 'h')">h</button></td>
       <td class="seperator"></td>
-      <td><button class="Vowel" title="near-open front unrounded vowel" onclick="writeSampa(event, '&#230;')">&#230;</button></td>
-      <td><button class="Vowel" title="near-open front rounded vowel" onclick="writeSampa(event, '&#339;&#798;')">&#339;&#798;</button></td>
-      <td><button class="Vowel" title="near-open central (unrounded) vowel" onclick="writeSampa(event, '&#592;')">&#592;</button></td>
-      <td><button class="Vowel" title="near-open central rounded vowel" onclick="writeSampa(event, '&#606;&#798;')">&#606;&#798;</button></td>
-      <td></td>  <td></td>  <td></td>
-      <td><button class="Diac" title="primary stress" onclick="writeSampa(event, '&#712;')">&#712;&#9676;</button></td>
-      <td><button class="Diac" title="long" onclick="writeSampa(event, '&#720;')">&#9676;&#720;</button></td>
-      <td><button class="Diac" title="half-long" onclick="writeSampa(event, '&#721;')">&#9676;&#721;</button></td>
-      <td><button class="Supra" title="minor (foot) group" onclick="writeSampa(event, '&#124;')">&#124;</button></td>
-      <td><button class="Supra" title="major (intonation) group" onclick="writeSampa(event, '&#8214;')">&#8214;</button></td>
+      <td><button class="Vowel" title="open front unrounded vowel" onclick="writeSampa(event, 'a')">a</button></td>
+      <td><button class="Vowel" title="open front rounded vowel" onclick="writeSampa(event, '&#630;')">&#630;</button></td>
+      <td><button class="Vowel" title="open central unrounded vowel" onclick="writeSampa(event, 'a&#776;')">a&#776;</button></td>
+      <td></td>
+      <td><button class="Vowel" title="open back unrounded vowel" onclick="writeSampa(event, '&#593;')">&#593;</button></td>
+      <td><button class="Vowel" title="open back rounded vowel" onclick="writeSampa(event, '&#594;')">&#594;</button></td>
+      <td></td>
+      <td><button class="Diac" title="secondary stress" onclick="writeSampa(event, '&#716;')">&#716;&#9676;</button></td>
+      <td><button class="Diac" title="extra-short" onclick="writeSampa(event, '&#774;')">&#9676;&#774;</button></td>
+      <td><button class="Supra" title="zero (nonIPA)" onclick="writeSampa(event, '&#8709;')">&#8709;</button></td>
+      <td><button class="Supra" title="syllable break" onclick="writeSampa(event, '.')">.</button></td>
+      <td><button class="Supra" title="linking (absence of a break)" onclick="writeSampa(event, '&#8255;')">&#8255;</button></td>
    </tr>
    <tr>
       <td><button class="Cons" title="voiced bilabial fricative" class="bilabial" onclick="writeSampa(event, '&#946;')">&#946;</button></td>
@@ -192,18 +217,8 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Cons" title="voiced pharyngeal fricative" onclick="writeSampa(event, '&#661;')">&#661;</button></td>
       <td><button class="Cons" title="voiced glottal fricative" onclick="writeSampa(event, '&#614;')">&#614;</button></td>
       <td class="seperator"></td>
-      <td><button class="Vowel" title="open front unrounded vowel" onclick="writeSampa(event, 'a')">a</button></td>
-      <td><button class="Vowel" title="open front rounded vowel" onclick="writeSampa(event, '&#630;')">&#630;</button></td>
-      <td><button class="Vowel" title="open central unrounded vowel" onclick="writeSampa(event, 'a&#776;')">a&#776;</button></td>
-      <td></td>
-      <td><button class="Vowel" title="open back unrounded vowel" onclick="writeSampa(event, '&#593;')">&#593;</button></td>
-      <td><button class="Vowel" title="open back rounded vowel" onclick="writeSampa(event, '&#594;')">&#594;</button></td>
-      <td></td>
-      <td><button class="Diac" title="secondary stress" onclick="writeSampa(event, '&#716;')">&#716;&#9676;</button></td>
-      <td><button class="Diac" title="extra-short" onclick="writeSampa(event, '&#774;')">&#9676;&#774;</button></td>
-      <td><button class="Supra" title="zero (nonIPA)" onclick="writeSampa(event, '&#8709;')">&#8709;</button></td>
-      <td><button class="Supra" title="syllable break" onclick="writeSampa(event, '.')">.</button></td>
-      <td><button class="Supra" title="linking (absence of a break)" onclick="writeSampa(event, '&#8255;')">&#8255;</button></td>
+      <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
+      <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
    </tr>
    <tr>
       <td><button class="Cons" title="voiceless bilabial affricate" class="bilabial" onclick="writeSampa(event, 'p&#865;&#632;')">p&#865;&#632;</button></td>
@@ -218,22 +233,6 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Cons" title="voiceless uvular affricate" onclick="writeSampa(event, 'q&#865;&#967;')">q&#865;&#967;</button></td>
       <td></td>  <td></td>
       <td class="seperator"></td>
-      <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
-      <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
-   </tr> 
-   <tr>
-      <td><button class="Cons" title="voiced bilabial affricate" class="bilabial" onclick="writeSampa(event, 'b&#865;&#946;')">b&#865;&#946;</button></td>
-      <td><button class="Cons" title="voiced labiodental affricate" onclick="writeSampa(event, 'b&#865;v')">b&#865;v</button></td>
-      <td><button class="Cons" title="voiced dental affricate" onclick="writeSampa(event, 'd&#810;&#865;&#240;')">d&#810;&#865;&#240;</button></td>
-      <td><button class="Cons" title="voiced alveolar affricate" onclick="writeSampa(event, 'd&#865;z')">d&#865;z</button></td>
-      <td><button class="Cons" title="voiced alveolar lateral affricate" onclick="writeSampa(event, 'd&#865;&#622;')">d&#865;&#622;</button></td>
-      <td><button class="Cons" title="voiced palatoalveolar affricate" onclick="writeSampa(event, 'd&#865;&#658;')">d&#865;&#658;</button></td>
-      <td><button class="Cons" title="voiced retroflex affricate" onclick="writeSampa(event, '&#598;&#865;&#656;')">&#598;&#865;&#656;</button></td>
-      <td><button class="Cons" title="voiced palatal affricate" onclick="writeSampa(event, 'c&#865;&#669;')">&#607;&#865;&#669;</button></td>
-      <td><button class="Cons" title="voiced velar affricate" onclick="writeSampa(event, 'g&#865;&#611;')">g&#865;&#611;</button></td>
-      <td><button class="Cons" title="voiced uvular affricate" onclick="writeSampa(event, '&#610;&#865;&#641;')">&#610;&#865;&#641;</button></td>
-      <td></td>  <td></td>
-      <td class="seperator"></td>
       <td><button class="Diac" title="syllabic" onclick="writeSampa(event, '&#809;')">&#9676;&#809;</button></td>
       <td><button class="DiacX" title="syllabic (above)" onclick="writeSampa(event, '&#781;')">&#9676;&#781;</button></td>      
       <td><button class="Diac" title="voiced" onclick="writeSampa(event, '&#812;')">&#9676;&#812;</button></td>
@@ -248,16 +247,17 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="DiacX" title="more rounded (above)" onclick="writeSampa(event, '&#855;')">&#9676;&#855;</button></td>
    </tr> 
    <tr>
-      <td><button class="Cons" title="voiced bilabial nasal" onclick="writeSampa(event, 'm')">m</button></td>
-      <td><button class="Cons" title="voiced labiodental nasal" onclick="writeSampa(event, '&#625;')">&#625;</button></td>
-      <td><button class="Cons" title="voiced dental nasal" onclick="writeSampa(event, 'n&#810;')">n&#810;</button></td>
-      <td><button class="Cons" title="voiced alveolar nasal" onclick="writeSampa(event, 'n')">n</button></td>
-      <td></td>   <td></td>
-      <td><button class="Cons" title="voiced retroflex nasal" onclick="writeSampa(event, '&#627;')">&#627;</button></td>
-      <td><button class="Cons" title="voiced palatal nasal" onclick="writeSampa(event, '&#626;')">&#626;</button></td>
-      <td><button class="Cons" title="voiced velar nasal" onclick="writeSampa(event, '&#331;')">&#331;</button></td>
-      <td><button class="Cons" title="voiced uvular nasal" onclick="writeSampa(event, '&#628;')">&#628;</button></td>
-      <td></td>   <td></td>
+      <td><button class="Cons" title="voiced bilabial affricate" class="bilabial" onclick="writeSampa(event, 'b&#865;&#946;')">b&#865;&#946;</button></td>
+      <td><button class="Cons" title="voiced labiodental affricate" onclick="writeSampa(event, 'b&#865;v')">b&#865;v</button></td>
+      <td><button class="Cons" title="voiced dental affricate" onclick="writeSampa(event, 'd&#810;&#865;&#240;')">d&#810;&#865;&#240;</button></td>
+      <td><button class="Cons" title="voiced alveolar affricate" onclick="writeSampa(event, 'd&#865;z')">d&#865;z</button></td>
+      <td><button class="Cons" title="voiced alveolar lateral affricate" onclick="writeSampa(event, 'd&#865;&#622;')">d&#865;&#622;</button></td>
+      <td><button class="Cons" title="voiced palatoalveolar affricate" onclick="writeSampa(event, 'd&#865;&#658;')">d&#865;&#658;</button></td>
+      <td><button class="Cons" title="voiced retroflex affricate" onclick="writeSampa(event, '&#598;&#865;&#656;')">&#598;&#865;&#656;</button></td>
+      <td><button class="Cons" title="voiced palatal affricate" onclick="writeSampa(event, 'c&#865;&#669;')">&#607;&#865;&#669;</button></td>
+      <td><button class="Cons" title="voiced velar affricate" onclick="writeSampa(event, 'g&#865;&#611;')">g&#865;&#611;</button></td>
+      <td><button class="Cons" title="voiced uvular affricate" onclick="writeSampa(event, '&#610;&#865;&#641;')">&#610;&#865;&#641;</button></td>
+      <td></td>  <td></td>
       <td class="seperator"></td>
       <td><button class="Diac" title="non-syllabic" onclick="writeSampa(event, '&#815;')">&#9676;&#815;</button></td>
       <td><button class="DiacX" title="non-syllabic (above)" onclick="writeSampa(event, '̑')">◌̑</button></td>
@@ -271,7 +271,7 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Diac" title="mid-centralized" onclick="writeSampa(event, '&#829;')">&#9676;&#829;</button></td>
       <td><button class="Diac" title="less rounded" onclick="writeSampa(event, '&#796;')">&#9676;&#796;</button></td>
       <td><button class="DiacX" title="less rounded (above)" onclick="writeSampa(event, '&#849;')">&#9676;&#849;</button></td>
-   </tr>
+   </tr> 
    <tr>
       <td></td>    
       <td><button class="Cons" title="voiced labiodental approximant" onclick="writeSampa(event, '&#651;')">&#651;</button></td>
@@ -283,7 +283,7 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Cons" title="voiced palatal approximant" onclick="writeSampa(event, 'j')">j</button></td>
       <td><button class="Cons" title="voiced velar approximant" onclick="writeSampa(event, '&#624;')">&#624;</button></td>
       <td></td>  <td></td>  <td></td>
-      <td class="seperator"></td>  
+      <td class="seperator"></td>
       <td><button class="Diac" title="palatalized" onclick="writeSampa(event, '&#690;')">&#9676;&#690;</button></td>
       <td><button class="Diac" title="labialized" onclick="writeSampa(event, '&#695;')">&#9676;&#695;</button></td>
       <td><button class="Diac" title="labial-palatalized" onclick="writeSampa(event, '&#7587;')">&#9676;&#7587;</button></td>
@@ -298,16 +298,15 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Diac" title="glottalized" onclick="writeSampa(event, 'ˀ')">◌ˀ</button></td>
    </tr>
    <tr>
-      <td><button class="Cons" title="voiced bilabial trill" onclick="writeSampa(event, '&#665;')">&#665;</button></td>
-      <td></td>  <td></td>
-      <td><button class="Cons" title="voiced alveolar trill" onclick="writeSampa(event, 'r')">r</button></td>
-      <td></td>  <td></td>
-      <td><button class="Cons" title="voiced retroflex trill" onclick="writeSampa(event, '&#637;&#865;r')">&#637;&#865;r</button></td>
-      <td></td>  <td></td>
-      <td><button class="Cons" title="voiced uvular trill" onclick="writeSampa(event, '&#640;')">&#640;</button></td>
-      <td><button class="Cons" title="voiced epiglottal trill" onclick="writeSampa(event, '&#674;')">&#674;</button></td>
-      <td><button class="Cons" title="voiceless epiglottal trill" onclick="writeSampa(event, '&#668;')">&#668;</button></td>
-      <td class="seperator"></td>
+      <td></td>
+      <td><button class="Cons" title="voiced labiodental flap" onclick="writeSampa(event, '&#11377;')">&#11377;</button></td>
+      <td></td>
+      <td><button class="Cons" title="voiced alveolar tap" onclick="writeSampa(event, '&#638;')">&#638;</button></td>
+      <td><button class="Cons" title="voiced alveolar lateral flap" onclick="writeSampa(event, '&#634;')">&#634;</button></td>
+      <td></td>
+      <td><button class="Cons" title="voiced retroflex flap" onclick="writeSampa(event, '&#637;')">&#637;</button></td>
+      <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
+      <td class="seperator">
       <td><button class="Diac" title="dental" onclick="writeSampa(event, '&#810;')">&#9676;&#810;</button></td>
       <td><button class="DiacX" title="dental (above)" onclick="writeSampa(event, '&#838;')">&#9676;&#838;</button></td>
       <td><button class="Diac" title="apical" onclick="writeSampa(event, '&#826;')">&#9676;&#826;</button></td>
@@ -318,18 +317,19 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
    </tr>
    <tr>
-      <td></td>
-      <td><button class="Cons" title="voiced labiodental flap" onclick="writeSampa(event, '&#11377;')">&#11377;</button></td>
-      <td></td>
-      <td><button class="Cons" title="voiced alveolar tap" onclick="writeSampa(event, '&#638;')">&#638;</button></td>
-      <td><button class="Cons" title="voiced alveolar lateral flap" onclick="writeSampa(event, '&#634;')">&#634;</button></td>
-      <td></td>
-      <td><button class="Cons" title="voiced retroflex flap" onclick="writeSampa(event, '&#637;')">&#637;</button></td>
-      <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
-      <td class="seperator"></td>
-      <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
-      <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  
+      <td><button class="Cons" title="voiced bilabial trill" onclick="writeSampa(event, '&#665;')">&#665;</button></td>
+      <td></td>  <td></td>
+      <td><button class="Cons" title="voiced alveolar trill" onclick="writeSampa(event, 'r')">r</button></td>
+      <td></td>  <td></td>
+      <td><button class="Cons" title="voiced retroflex trill" onclick="writeSampa(event, '&#637;&#865;r')">&#637;&#865;r</button></td>
       <td></td>  <td></td>
+      <td><button class="Cons" title="voiced uvular trill" onclick="writeSampa(event, '&#640;')">&#640;</button></td>
+      <td><button class="Cons" title="voiced epiglottal trill" onclick="writeSampa(event, '&#674;')">&#674;</button></td>
+      <td><button class="Cons" title="voiceless epiglottal trill" onclick="writeSampa(event, '&#668;')">&#668;</button></td>
+      <td class="seperator"></td>
+      <td></td>    <td></td>    <td></td>    <td></td>    <td></td>
+      <td></td>    <td></td>    <td></td>    <td></td>   <td></td>
+      <td></td>    <td></td>
    </tr>
    <tr>
       <td></td>    <td></td>    <td></td>    <td></td>    <td></td>
@@ -357,7 +357,6 @@ <h1>IPA Keyboard and X-Sampa Converter</h1>
       <td><button class="Cons" title="velarized alveolar lateral approximant" onclick="writeSampa(event, '&#619;')">&#619;</button></td>
       <td><button class="Other" title="voiced labial-palatal approximant" onclick="writeSampa(event, '&#613;')">&#613;</button></td>
       <td><button class="Cons" title="voiced retroflex lateral approximant" onclick="writeSampa(event, '&#621;')">&#621;</button></td>
-      
       <td><button class="Cons" title="voiced palatal lateral approximant" onclick="writeSampa(event, '&#654;')">&#654;</button></td>
       <td><button class="Cons" title="voiced velar lateral approximant" onclick="writeSampa(event, '&#671;')">&#671;</button></td>
       <td><button class="Other" title="voiceless velar fricative* (Swedish)" onclick="writeSampa(event, '&#615;')">&#615;</button></td>
diff --git a/style.css b/style.css
index 4c6e5d7..c4fadbe 100644
--- a/style.css
+++ b/style.css
@@ -510,19 +510,16 @@ div .gll {
   background: #fbf6f9;
 }
 
-.xipa-table {
+.ipa-table {
   overflow-x: auto;
   white-space: nowrap;
-  display: block;
-  padding-bottom: 3px;
 }
-
-.xipa-table tr td{
+.ipa-table tr td{
  padding: 1px 1px 0 0;
  width: 24px;
  height: 26px;
 }
-.xipa-table button {
+.ipa-table button {
   margin: 0 auto;
   padding: 0;
   width: 24px;
@@ -535,22 +532,28 @@ div .gll {
   -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
   user-select: none;
 }
-.xipa-table button:hover {
+.ipa-table button:hover {
   -webkit-box-shadow: 1px 1px 3px #7d7d7d;
         box-shadow: 1px 1px 3px #7d7d7d;
 }
-.xipa-table button:active {
+.ipa-table button:active {
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 
 @media only screen and (min-width: 810px) {
-  .xipa-table tr td{
+  .ipa-table tr td{
     padding: 2px 2px 0 0;
     width: 27px;
     height: 27px;
    }
-   .xipa-table button {
+   .ipa-table tr td:first-child {
+    padding-left: 1px;
+  }
+  .ipa-table tr:last-child td {
+    padding-bottom: 1px;
+  }
+   .ipa-table button {
     font-size: 19px;
     width: 27px;
   }
@@ -656,7 +659,7 @@ div .gll {
 
 
 
-#ipa-output textarea, .xipa-table button, #ipa-output #sampaBox,
+#ipa-output textarea, .ipa-table button, #ipa-output #sampaBox,
 #ipa-output-toolbar #symbolsUsed a {
 font-family: "Charis SIL", "Doulos SIL", Gentium, "Arial Unicode MS","Lucida Sans Unicode", Arial, Serif;
 }
diff --git a/test.html b/test.html
index 2287e7a..1e269dd 100644
--- a/test.html
+++ b/test.html
@@ -725,19 +725,18 @@ <h2>Lexifer Online</h2>
 
     <section>
       <h2>IPA Keyboard and X-Sampa Converter</h2>
-      <table class="btns xipa-table" id="IPA">
+      <table class="btns ipa-table" id="IPA">
         <tr>
-           <td><button class="Cons" title="voiceless bilabial plosive" onclick="writeSampa(event, 'p')">p</button></td>
-           <td></td>
-           <td><button class="Cons" title="voiceless dental plosive" onclick="writeSampa(event, 't&#810;')">t&#810;</button></td>
-           <td><button class="Cons" title="voiceless alveolar plosive" onclick="writeSampa(event, 't')">t</button></td>
-           <td></td>  <td></td>
-           <td><button class="Cons" title="voiceless retroflex plosive" onclick="writeSampa(event, '&#648;')">&#648;</button></td>
-           <td><button class="Cons" title="voiceless palatal plosive" onclick="writeSampa(event, 'c')">c</button></td>
-           <td><button class="Cons" title="voiceless velar plosive" onclick="writeSampa(event, 'k')">k</button></td>
-           <td><button class="Cons" title="voiceless uvular plosive" onclick="writeSampa(event, 'q')">q</button></td>
-           <td><button class="Cons" title="voiceless epiglottal plosive" onclick="writeSampa(event, '&#673;')">&#673;</button></td>
-           <td><button class="Cons" title="voiceless glottal plosive" onclick="writeSampa(event, '&#660;')">&#660;</button></td>
+           <td><button class="Cons" title="voiced bilabial nasal" onclick="writeSampa(event, 'm')">m</button></td>
+           <td><button class="Cons" title="voiced labiodental nasal" onclick="writeSampa(event, '&#625;')">&#625;</button></td>
+           <td><button class="Cons" title="voiced dental nasal" onclick="writeSampa(event, 'n&#810;')">n&#810;</button></td>
+           <td><button class="Cons" title="voiced alveolar nasal" onclick="writeSampa(event, 'n')">n</button></td>
+           <td></td>   <td></td>
+           <td><button class="Cons" title="voiced retroflex nasal" onclick="writeSampa(event, '&#627;')">&#627;</button></td>
+           <td><button class="Cons" title="voiced palatal nasal" onclick="writeSampa(event, '&#626;')">&#626;</button></td>
+           <td><button class="Cons" title="voiced velar nasal" onclick="writeSampa(event, '&#331;')">&#331;</button></td>
+           <td><button class="Cons" title="voiced uvular nasal" onclick="writeSampa(event, '&#628;')">&#628;</button></td>
+           <td></td>   <td></td>
            <td class="seperator"></td>
            <td><button class="Vowel" title="close front unrounded vowel" onclick="writeSampa(event, 'i')">i</button></td>
            <td><button class="Vowel" title="close front rounded vowel" onclick="writeSampa(event, 'y')">y</button></td>
@@ -753,17 +752,18 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Tone" title="global rise" onclick="writeSampa(event, '&#8599;&#xFE0E;')">&#8599;&#xFE0E;</button></td>
         </tr>
         <tr>
-           <td><button class="Cons" title="voiced bilabial plosive" onclick="writeSampa(event, 'b')">b</button></td>
+           <td><button class="Cons" title="voiceless bilabial plosive" onclick="writeSampa(event, 'p')">p</button></td>
            <td></td>
-           <td><button class="Cons" title="voiced dental plosive" onclick="writeSampa(event, 'd&#810;')">d&#810;</button></td>
-           <td><button class="Cons" title="voiced alveolar plosive" onclick="writeSampa(event, 'd')">d</button></td>
-           <td></td>  <td></td>  
-           <td><button class="Cons" title="voiced retroflex plosive" onclick="writeSampa(event, '&#598;')">&#598;</button></td>
-           <td><button class="Cons" title="voiced palatal plosive" onclick="writeSampa(event, '&#607;')">&#607;</button></td>
-           <td><button class="Cons" title="voiced velar plosive" onclick="writeSampa(event, 'g')">g</button></td>
-           <td><button class="Cons" title="voiced uvular plosive" onclick="writeSampa(event, '&#610;')">&#610;</button></td>
+           <td><button class="Cons" title="voiceless dental plosive" onclick="writeSampa(event, 't&#810;')">t&#810;</button></td>
+           <td><button class="Cons" title="voiceless alveolar plosive" onclick="writeSampa(event, 't')">t</button></td>
            <td></td>  <td></td>
-           <td class="seperator"></td> 
+           <td><button class="Cons" title="voiceless retroflex plosive" onclick="writeSampa(event, '&#648;')">&#648;</button></td>
+           <td><button class="Cons" title="voiceless palatal plosive" onclick="writeSampa(event, 'c')">c</button></td>
+           <td><button class="Cons" title="voiceless velar plosive" onclick="writeSampa(event, 'k')">k</button></td>
+           <td><button class="Cons" title="voiceless uvular plosive" onclick="writeSampa(event, 'q')">q</button></td>
+           <td><button class="Cons" title="voiceless epiglottal plosive" onclick="writeSampa(event, '&#673;')">&#673;</button></td>
+           <td><button class="Cons" title="voiceless glottal plosive" onclick="writeSampa(event, '&#660;')">&#660;</button></td>
+           <td class="seperator"></td>
            <td><button class="Vowel" title="near-close near-front unrounded vowel" onclick="writeSampa(event, '&#618;')">&#618;</button></td>
            <td><button class="Vowel" title="near-close near-front rounded vowel" onclick="writeSampa(event, '&#655;')">&#655;</button></td>
            <td></td>  <td></td>  <td></td>
@@ -776,17 +776,17 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Tone" title="upstep" onclick="writeSampa(event, '&#42779;')">&#42779;</button></td>
         </tr>
         <tr>
-           <td><button class="ConsN" title="bilabial ejective" onclick="writeSampa(event, 'p&#700;')">p&#700;</button></td>
-           <td></td>  <td></td>
-           <td><button class="ConsN" title="dental/alveolar ejective" onclick="writeSampa(event, 't&#700;')">t&#700;</button></td>
-           <td></td>  <td></td>
-           <td><button class="ConsN" title="retroflex ejective" onclick="writeSampa(event, '&#648;&#700;')">&#648;&#700;</button></td>
-           <td><button class="ConsN" title="palatal ejective" onclick="writeSampa(event, 'c&#700;')">c&#700;</button></td>
-           <td><button class="ConsN" title="velar ejective" onclick="writeSampa(event, 'k&#700;')">k&#700;</button></td>
-           <td><button class="ConsN" title="uvular ejective" onclick="writeSampa(event, 'q&#700;')">q&#700;</button></td>
+           <td><button class="Cons" title="voiced bilabial plosive" onclick="writeSampa(event, 'b')">b</button></td>
            <td></td>
-           <td><button class="ConsN" title="ejective" onclick="writeSampa(event, '&#700;')">&#700;</button></td>
-           <td class="seperator"></td> 
+           <td><button class="Cons" title="voiced dental plosive" onclick="writeSampa(event, 'd&#810;')">d&#810;</button></td>
+           <td><button class="Cons" title="voiced alveolar plosive" onclick="writeSampa(event, 'd')">d</button></td>
+           <td></td>  <td></td>  
+           <td><button class="Cons" title="voiced retroflex plosive" onclick="writeSampa(event, '&#598;')">&#598;</button></td>
+           <td><button class="Cons" title="voiced palatal plosive" onclick="writeSampa(event, '&#607;')">&#607;</button></td>
+           <td><button class="Cons" title="voiced velar plosive" onclick="writeSampa(event, 'g')">g</button></td>
+           <td><button class="Cons" title="voiced uvular plosive" onclick="writeSampa(event, '&#610;')">&#610;</button></td>
+           <td></td>  <td></td>
+           <td class="seperator"></td>
            <td><button class="Vowel" title="close-mid front unrounded vowel" onclick="writeSampa(event, 'e')">e</button></td>
            <td><button class="Vowel" title="close-mid front rounded vowel" onclick="writeSampa(event, '&#248;')">&#248;</button></td>
            <td><button class="Vowel" title="close-mid central unrounded vowel" onclick="writeSampa(event, '&#600;')">&#600;</button></td>
@@ -801,16 +801,17 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td></td>   
         </tr>
         <tr>
-           <td><button class="ConsN" title="voiced bilabial implosive" onclick="writeSampa(event, '&#595;')">&#595;</button></td>
-           <td></td>  <td></td>
-           <td><button class="ConsN" title="voiced alveolar implosive" onclick="writeSampa(event, '&#599;')">&#599;</button></td>
+           <td><button class="ConsN" title="bilabial ejective" onclick="writeSampa(event, 'p&#700;')">p&#700;</button></td>
            <td></td>  <td></td>
-           <td><button class="ConsN" title="voiced retroflex implosive" onclick="writeSampa(event, '&#7569;')">&#7569;</button></td>
-           <td><button class="ConsN" title="voiced palatal implosive" onclick="writeSampa(event, '&#644;')">&#644;</button></td>
-           <td><button class="ConsN" title="voiced velar implosive" onclick="writeSampa(event, '&#608;')">&#608;</button></td>
-           <td><button class="ConsN" title="voiced uvular implosive" onclick="writeSampa(event, '&#667;')">&#667;</button></td>
+           <td><button class="ConsN" title="dental/alveolar ejective" onclick="writeSampa(event, 't&#700;')">t&#700;</button></td>
            <td></td>  <td></td>
-           <td class="seperator"></td>
+           <td><button class="ConsN" title="retroflex ejective" onclick="writeSampa(event, '&#648;&#700;')">&#648;&#700;</button></td>
+           <td><button class="ConsN" title="palatal ejective" onclick="writeSampa(event, 'c&#700;')">c&#700;</button></td>
+           <td><button class="ConsN" title="velar ejective" onclick="writeSampa(event, 'k&#700;')">k&#700;</button></td>
+           <td><button class="ConsN" title="uvular ejective" onclick="writeSampa(event, 'q&#700;')">q&#700;</button></td>
+           <td></td>
+           <td><button class="ConsN" title="ejective" onclick="writeSampa(event, '&#700;')">&#9676;&#700;</button></td>
+           <td class="seperator"></td> 
            <td><button class="Vowel" title="mid front unrounded vowel" onclick="writeSampa(event, 'e&#798;')">e&#798;</button></td>
            <td><button class="Vowel" title="mid front rounded vowel" onclick="writeSampa(event, '&#248;&#798;')">&#248;&#798;</button></td>
            <td><button class="Vowel" title="mid central (unrounded) vowel (schwa)" onclick="writeSampa(event, '&#601;')">&#601;</button></td>
@@ -825,15 +826,15 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Tone" title="downstep" onclick="writeSampa(event, '&#42780;')">&#42780;</button></td>
         </tr>
         <tr>
-           <td><button class="ConsN" title="bilabial click" onclick="writeSampa(event, '&#664;')">&#664;</button></td>
-           <td></td>
-           <td><button class="ConsN" title="dental click" onclick="writeSampa(event, '&#448;')">&#448;</button></td>
-           <td></td>
-           <td><button class="ConsN" title="alveolar lateral click" onclick="writeSampa(event, '&#449;')">&#449;</button></td>
-           <td><button class="ConsN" title="(post)alveolar click" onclick="writeSampa(event, '&#451;')">&#451;</button></td>
-           <td><button class="ConsN" title="retroflex click" onclick="writeSampa(event, '&#x203C;&#xFE0E;')">&#x203C;&#xFE0E;</button></td>
-           <td><button class="ConsN" title="palatoalveolar click" onclick="writeSampa(event, '&#450;')">&#450;</button></td>
-           <td></td>  <td></td>  <td></td>  <td></td>
+           <td><button class="ConsN" title="voiced bilabial implosive" onclick="writeSampa(event, '&#595;')">&#595;</button></td>
+           <td></td>  <td></td>
+           <td><button class="ConsN" title="voiced alveolar implosive" onclick="writeSampa(event, '&#599;')">&#599;</button></td>
+           <td></td>  <td></td>
+           <td><button class="ConsN" title="voiced retroflex implosive" onclick="writeSampa(event, '&#7569;')">&#7569;</button></td>
+           <td><button class="ConsN" title="voiced palatal implosive" onclick="writeSampa(event, '&#644;')">&#644;</button></td>
+           <td><button class="ConsN" title="voiced velar implosive" onclick="writeSampa(event, '&#608;')">&#608;</button></td>
+           <td><button class="ConsN" title="voiced uvular implosive" onclick="writeSampa(event, '&#667;')">&#667;</button></td>
+           <td></td>  <td></td>
            <td class="seperator"></td>
            <td><button class="Vowel" title="open-mid front unrounded vowel" onclick="writeSampa(event, '&#603;')">&#603;</button></td>
            <td><button class="Vowel" title="open-mid front rounded vowel" onclick="writeSampa(event, '&#339;')">&#339;</button></td>
@@ -848,6 +849,28 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Tone" title="falling tone (Chao letter)" onclick="writeSampa(event, '&#741;&#745;')">&#741;&#745;</button></td>
            <td><button class="Tone" title="global fall" onclick="writeSampa(event, '&#8600;&#xFE0E;')">&#8600;&#xFE0E;</button></td>
         </tr>
+        <tr>
+           <td><button class="ConsN" title="bilabial click" onclick="writeSampa(event, '&#664;')">&#664;</button></td>
+           <td></td>
+           <td><button class="ConsN" title="dental click" onclick="writeSampa(event, '&#448;')">&#448;</button></td>
+           <td></td>
+           <td><button class="ConsN" title="alveolar lateral click" onclick="writeSampa(event, '&#449;')">&#449;</button></td>
+           <td><button class="ConsN" title="(post)alveolar click" onclick="writeSampa(event, '&#451;')">&#451;</button></td>
+           <td><button class="ConsN" title="retroflex click" onclick="writeSampa(event, '&#x203C;&#xFE0E;')">&#x203C;&#xFE0E;</button></td>
+           <td><button class="ConsN" title="palatoalveolar click" onclick="writeSampa(event, '&#450;')">&#450;</button></td>
+           <td></td>  <td></td>  <td></td>  <td></td>
+           <td class="seperator"></td>
+           <td><button class="Vowel" title="near-open front unrounded vowel" onclick="writeSampa(event, '&#230;')">&#230;</button></td>
+           <td><button class="Vowel" title="near-open front rounded vowel" onclick="writeSampa(event, '&#339;&#798;')">&#339;&#798;</button></td>
+           <td><button class="Vowel" title="near-open central (unrounded) vowel" onclick="writeSampa(event, '&#592;')">&#592;</button></td>
+           <td><button class="Vowel" title="near-open central rounded vowel" onclick="writeSampa(event, '&#606;&#798;')">&#606;&#798;</button></td>
+           <td></td>  <td></td>  <td></td>
+           <td><button class="Diac" title="primary stress" onclick="writeSampa(event, '&#712;')">&#712;&#9676;</button></td>
+           <td><button class="Diac" title="long" onclick="writeSampa(event, '&#720;')">&#9676;&#720;</button></td>
+           <td><button class="Diac" title="half-long" onclick="writeSampa(event, '&#721;')">&#9676;&#721;</button></td>
+           <td><button class="Supra" title="minor (foot) group" onclick="writeSampa(event, '&#124;')">&#124;</button></td>
+           <td><button class="Supra" title="major (intonation) group" onclick="writeSampa(event, '&#8214;')">&#8214;</button></td>
+        </tr>
         <tr>
            <td><button class="Cons" title="voiceless bilabial fricative" class="bilabial" onclick="writeSampa(event, '&#632;')">&#632;</button></td>
            <td><button class="Cons" title="voiceless labiodental fricative" onclick="writeSampa(event, 'f')">f</button></td>
@@ -862,16 +885,18 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Cons" title="voiceless pharyngeal fricative" onclick="writeSampa(event, '&#295;')">&#295;</button></td>
            <td><button class="Cons" title="voiceless glottal fricative" onclick="writeSampa(event, 'h')">h</button></td>
            <td class="seperator"></td>
-           <td><button class="Vowel" title="near-open front unrounded vowel" onclick="writeSampa(event, '&#230;')">&#230;</button></td>
-           <td><button class="Vowel" title="near-open front rounded vowel" onclick="writeSampa(event, '&#339;&#798;')">&#339;&#798;</button></td>
-           <td><button class="Vowel" title="near-open central (unrounded) vowel" onclick="writeSampa(event, '&#592;')">&#592;</button></td>
-           <td><button class="Vowel" title="near-open central rounded vowel" onclick="writeSampa(event, '&#606;&#798;')">&#606;&#798;</button></td>
-           <td></td>  <td></td>  <td></td>
-           <td><button class="Diac" title="primary stress" onclick="writeSampa(event, '&#712;')">&#712;&#9676;</button></td>
-           <td><button class="Diac" title="long" onclick="writeSampa(event, '&#720;')">&#9676;&#720;</button></td>
-           <td><button class="Diac" title="half-long" onclick="writeSampa(event, '&#721;')">&#9676;&#721;</button></td>
-           <td><button class="Supra" title="minor (foot) group" onclick="writeSampa(event, '&#124;')">&#124;</button></td>
-           <td><button class="Supra" title="major (intonation) group" onclick="writeSampa(event, '&#8214;')">&#8214;</button></td>
+           <td><button class="Vowel" title="open front unrounded vowel" onclick="writeSampa(event, 'a')">a</button></td>
+           <td><button class="Vowel" title="open front rounded vowel" onclick="writeSampa(event, '&#630;')">&#630;</button></td>
+           <td><button class="Vowel" title="open central unrounded vowel" onclick="writeSampa(event, 'a&#776;')">a&#776;</button></td>
+           <td></td>
+           <td><button class="Vowel" title="open back unrounded vowel" onclick="writeSampa(event, '&#593;')">&#593;</button></td>
+           <td><button class="Vowel" title="open back rounded vowel" onclick="writeSampa(event, '&#594;')">&#594;</button></td>
+           <td></td>
+           <td><button class="Diac" title="secondary stress" onclick="writeSampa(event, '&#716;')">&#716;&#9676;</button></td>
+           <td><button class="Diac" title="extra-short" onclick="writeSampa(event, '&#774;')">&#9676;&#774;</button></td>
+           <td><button class="Supra" title="zero (nonIPA)" onclick="writeSampa(event, '&#8709;')">&#8709;</button></td>
+           <td><button class="Supra" title="syllable break" onclick="writeSampa(event, '.')">.</button></td>
+           <td><button class="Supra" title="linking (absence of a break)" onclick="writeSampa(event, '&#8255;')">&#8255;</button></td>
         </tr>
         <tr>
            <td><button class="Cons" title="voiced bilabial fricative" class="bilabial" onclick="writeSampa(event, '&#946;')">&#946;</button></td>
@@ -887,18 +912,8 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Cons" title="voiced pharyngeal fricative" onclick="writeSampa(event, '&#661;')">&#661;</button></td>
            <td><button class="Cons" title="voiced glottal fricative" onclick="writeSampa(event, '&#614;')">&#614;</button></td>
            <td class="seperator"></td>
-           <td><button class="Vowel" title="open front unrounded vowel" onclick="writeSampa(event, 'a')">a</button></td>
-           <td><button class="Vowel" title="open front rounded vowel" onclick="writeSampa(event, '&#630;')">&#630;</button></td>
-           <td><button class="Vowel" title="open central unrounded vowel" onclick="writeSampa(event, 'a&#776;')">a&#776;</button></td>
-           <td></td>
-           <td><button class="Vowel" title="open back unrounded vowel" onclick="writeSampa(event, '&#593;')">&#593;</button></td>
-           <td><button class="Vowel" title="open back rounded vowel" onclick="writeSampa(event, '&#594;')">&#594;</button></td>
-           <td></td>
-           <td><button class="Diac" title="secondary stress" onclick="writeSampa(event, '&#716;')">&#716;&#9676;</button></td>
-           <td><button class="Diac" title="extra-short" onclick="writeSampa(event, '&#774;')">&#9676;&#774;</button></td>
-           <td><button class="Supra" title="zero (nonIPA)" onclick="writeSampa(event, '&#8709;')">&#8709;</button></td>
-           <td><button class="Supra" title="syllable break" onclick="writeSampa(event, '.')">.</button></td>
-           <td><button class="Supra" title="linking (absence of a break)" onclick="writeSampa(event, '&#8255;')">&#8255;</button></td>
+           <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
+           <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
         </tr>
         <tr>
            <td><button class="Cons" title="voiceless bilabial affricate" class="bilabial" onclick="writeSampa(event, 'p&#865;&#632;')">p&#865;&#632;</button></td>
@@ -913,22 +928,6 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Cons" title="voiceless uvular affricate" onclick="writeSampa(event, 'q&#865;&#967;')">q&#865;&#967;</button></td>
            <td></td>  <td></td>
            <td class="seperator"></td>
-           <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
-           <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
-        </tr> 
-        <tr>
-           <td><button class="Cons" title="voiced bilabial affricate" class="bilabial" onclick="writeSampa(event, 'b&#865;&#946;')">b&#865;&#946;</button></td>
-           <td><button class="Cons" title="voiced labiodental affricate" onclick="writeSampa(event, 'b&#865;v')">b&#865;v</button></td>
-           <td><button class="Cons" title="voiced dental affricate" onclick="writeSampa(event, 'd&#810;&#865;&#240;')">d&#810;&#865;&#240;</button></td>
-           <td><button class="Cons" title="voiced alveolar affricate" onclick="writeSampa(event, 'd&#865;z')">d&#865;z</button></td>
-           <td><button class="Cons" title="voiced alveolar lateral affricate" onclick="writeSampa(event, 'd&#865;&#622;')">d&#865;&#622;</button></td>
-           <td><button class="Cons" title="voiced palatoalveolar affricate" onclick="writeSampa(event, 'd&#865;&#658;')">d&#865;&#658;</button></td>
-           <td><button class="Cons" title="voiced retroflex affricate" onclick="writeSampa(event, '&#598;&#865;&#656;')">&#598;&#865;&#656;</button></td>
-           <td><button class="Cons" title="voiced palatal affricate" onclick="writeSampa(event, 'c&#865;&#669;')">&#607;&#865;&#669;</button></td>
-           <td><button class="Cons" title="voiced velar affricate" onclick="writeSampa(event, 'g&#865;&#611;')">g&#865;&#611;</button></td>
-           <td><button class="Cons" title="voiced uvular affricate" onclick="writeSampa(event, '&#610;&#865;&#641;')">&#610;&#865;&#641;</button></td>
-           <td></td>  <td></td>
-           <td class="seperator"></td>
            <td><button class="Diac" title="syllabic" onclick="writeSampa(event, '&#809;')">&#9676;&#809;</button></td>
            <td><button class="DiacX" title="syllabic (above)" onclick="writeSampa(event, '&#781;')">&#9676;&#781;</button></td>      
            <td><button class="Diac" title="voiced" onclick="writeSampa(event, '&#812;')">&#9676;&#812;</button></td>
@@ -943,16 +942,17 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="DiacX" title="more rounded (above)" onclick="writeSampa(event, '&#855;')">&#9676;&#855;</button></td>
         </tr> 
         <tr>
-           <td><button class="Cons" title="voiced bilabial nasal" onclick="writeSampa(event, 'm')">m</button></td>
-           <td><button class="Cons" title="voiced labiodental nasal" onclick="writeSampa(event, '&#625;')">&#625;</button></td>
-           <td><button class="Cons" title="voiced dental nasal" onclick="writeSampa(event, 'n&#810;')">n&#810;</button></td>
-           <td><button class="Cons" title="voiced alveolar nasal" onclick="writeSampa(event, 'n')">n</button></td>
-           <td></td>   <td></td>
-           <td><button class="Cons" title="voiced retroflex nasal" onclick="writeSampa(event, '&#627;')">&#627;</button></td>
-           <td><button class="Cons" title="voiced palatal nasal" onclick="writeSampa(event, '&#626;')">&#626;</button></td>
-           <td><button class="Cons" title="voiced velar nasal" onclick="writeSampa(event, '&#331;')">&#331;</button></td>
-           <td><button class="Cons" title="voiced uvular nasal" onclick="writeSampa(event, '&#628;')">&#628;</button></td>
-           <td></td>   <td></td>
+           <td><button class="Cons" title="voiced bilabial affricate" class="bilabial" onclick="writeSampa(event, 'b&#865;&#946;')">b&#865;&#946;</button></td>
+           <td><button class="Cons" title="voiced labiodental affricate" onclick="writeSampa(event, 'b&#865;v')">b&#865;v</button></td>
+           <td><button class="Cons" title="voiced dental affricate" onclick="writeSampa(event, 'd&#810;&#865;&#240;')">d&#810;&#865;&#240;</button></td>
+           <td><button class="Cons" title="voiced alveolar affricate" onclick="writeSampa(event, 'd&#865;z')">d&#865;z</button></td>
+           <td><button class="Cons" title="voiced alveolar lateral affricate" onclick="writeSampa(event, 'd&#865;&#622;')">d&#865;&#622;</button></td>
+           <td><button class="Cons" title="voiced palatoalveolar affricate" onclick="writeSampa(event, 'd&#865;&#658;')">d&#865;&#658;</button></td>
+           <td><button class="Cons" title="voiced retroflex affricate" onclick="writeSampa(event, '&#598;&#865;&#656;')">&#598;&#865;&#656;</button></td>
+           <td><button class="Cons" title="voiced palatal affricate" onclick="writeSampa(event, 'c&#865;&#669;')">&#607;&#865;&#669;</button></td>
+           <td><button class="Cons" title="voiced velar affricate" onclick="writeSampa(event, 'g&#865;&#611;')">g&#865;&#611;</button></td>
+           <td><button class="Cons" title="voiced uvular affricate" onclick="writeSampa(event, '&#610;&#865;&#641;')">&#610;&#865;&#641;</button></td>
+           <td></td>  <td></td>
            <td class="seperator"></td>
            <td><button class="Diac" title="non-syllabic" onclick="writeSampa(event, '&#815;')">&#9676;&#815;</button></td>
            <td><button class="DiacX" title="non-syllabic (above)" onclick="writeSampa(event, '̑')">◌̑</button></td>
@@ -966,7 +966,7 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Diac" title="mid-centralized" onclick="writeSampa(event, '&#829;')">&#9676;&#829;</button></td>
            <td><button class="Diac" title="less rounded" onclick="writeSampa(event, '&#796;')">&#9676;&#796;</button></td>
            <td><button class="DiacX" title="less rounded (above)" onclick="writeSampa(event, '&#849;')">&#9676;&#849;</button></td>
-        </tr>
+        </tr> 
         <tr>
            <td></td>    
            <td><button class="Cons" title="voiced labiodental approximant" onclick="writeSampa(event, '&#651;')">&#651;</button></td>
@@ -978,7 +978,7 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Cons" title="voiced palatal approximant" onclick="writeSampa(event, 'j')">j</button></td>
            <td><button class="Cons" title="voiced velar approximant" onclick="writeSampa(event, '&#624;')">&#624;</button></td>
            <td></td>  <td></td>  <td></td>
-           <td class="seperator"></td>  
+           <td class="seperator"></td>
            <td><button class="Diac" title="palatalized" onclick="writeSampa(event, '&#690;')">&#9676;&#690;</button></td>
            <td><button class="Diac" title="labialized" onclick="writeSampa(event, '&#695;')">&#9676;&#695;</button></td>
            <td><button class="Diac" title="labial-palatalized" onclick="writeSampa(event, '&#7587;')">&#9676;&#7587;</button></td>
@@ -993,16 +993,15 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td><button class="Diac" title="glottalized" onclick="writeSampa(event, 'ˀ')">◌ˀ</button></td>
         </tr>
         <tr>
-           <td><button class="Cons" title="voiced bilabial trill" onclick="writeSampa(event, '&#665;')">&#665;</button></td>
-           <td></td>  <td></td>
-           <td><button class="Cons" title="voiced alveolar trill" onclick="writeSampa(event, 'r')">r</button></td>
-           <td></td>  <td></td>
-           <td><button class="Cons" title="voiced retroflex trill" onclick="writeSampa(event, '&#637;&#865;r')">&#637;&#865;r</button></td>
-           <td></td>  <td></td>
-           <td><button class="Cons" title="voiced uvular trill" onclick="writeSampa(event, '&#640;')">&#640;</button></td>
-           <td><button class="Cons" title="voiced epiglottal trill" onclick="writeSampa(event, '&#674;')">&#674;</button></td>
-           <td><button class="Cons" title="voiceless epiglottal trill" onclick="writeSampa(event, '&#668;')">&#668;</button></td>
-           <td class="seperator"></td>
+           <td></td>
+           <td><button class="Cons" title="voiced labiodental flap" onclick="writeSampa(event, '&#11377;')">&#11377;</button></td>
+           <td></td>
+           <td><button class="Cons" title="voiced alveolar tap" onclick="writeSampa(event, '&#638;')">&#638;</button></td>
+           <td><button class="Cons" title="voiced alveolar lateral flap" onclick="writeSampa(event, '&#634;')">&#634;</button></td>
+           <td></td>
+           <td><button class="Cons" title="voiced retroflex flap" onclick="writeSampa(event, '&#637;')">&#637;</button></td>
+           <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
+           <td class="seperator">
            <td><button class="Diac" title="dental" onclick="writeSampa(event, '&#810;')">&#9676;&#810;</button></td>
            <td><button class="DiacX" title="dental (above)" onclick="writeSampa(event, '&#838;')">&#9676;&#838;</button></td>
            <td><button class="Diac" title="apical" onclick="writeSampa(event, '&#826;')">&#9676;&#826;</button></td>
@@ -1013,18 +1012,19 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
         </tr>
         <tr>
-           <td></td>
-           <td><button class="Cons" title="voiced labiodental flap" onclick="writeSampa(event, '&#11377;')">&#11377;</button></td>
-           <td></td>
-           <td><button class="Cons" title="voiced alveolar tap" onclick="writeSampa(event, '&#638;')">&#638;</button></td>
-           <td><button class="Cons" title="voiced alveolar lateral flap" onclick="writeSampa(event, '&#634;')">&#634;</button></td>
-           <td></td>
-           <td><button class="Cons" title="voiced retroflex flap" onclick="writeSampa(event, '&#637;')">&#637;</button></td>
-           <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
-           <td class="seperator"></td>
-           <td></td>  <td></td>  <td></td>  <td></td>  <td></td>
-           <td></td>  <td></td>  <td></td>  <td></td>  <td></td>  
+           <td><button class="Cons" title="voiced bilabial trill" onclick="writeSampa(event, '&#665;')">&#665;</button></td>
            <td></td>  <td></td>
+           <td><button class="Cons" title="voiced alveolar trill" onclick="writeSampa(event, 'r')">r</button></td>
+           <td></td>  <td></td>
+           <td><button class="Cons" title="voiced retroflex trill" onclick="writeSampa(event, '&#637;&#865;r')">&#637;&#865;r</button></td>
+           <td></td>  <td></td>
+           <td><button class="Cons" title="voiced uvular trill" onclick="writeSampa(event, '&#640;')">&#640;</button></td>
+           <td><button class="Cons" title="voiced epiglottal trill" onclick="writeSampa(event, '&#674;')">&#674;</button></td>
+           <td><button class="Cons" title="voiceless epiglottal trill" onclick="writeSampa(event, '&#668;')">&#668;</button></td>
+           <td class="seperator"></td>
+           <td></td>    <td></td>    <td></td>    <td></td>    <td></td>
+           <td></td>    <td></td>    <td></td>    <td></td>   <td></td>
+           <td></td>    <td></td>
         </tr>
         <tr>
            <td></td>    <td></td>    <td></td>    <td></td>    <td></td>
@@ -1047,10 +1047,10 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
         <tr>
            <td><button class="Other" title="voiced labial-velar approximant" onclick="writeSampa(event, 'w')">w</button></td>
            <td><button class="Other" title="voiceless labial-velar approximant" onclick="writeSampa(event, '&#653;')">&#653;</button></td>
-           <td><button class="Other" title="voiced labial-palatal approximant" onclick="writeSampa(event, '&#613;')">&#613;</button></td>
-           <td><button class="Cons" title="velarized alveolar lateral approximant" onclick="writeSampa(event, '&#619;')">&#619;</button></td>
            <td><button class="Other" title="voiceless alveolo-palatal fricative" onclick="writeSampa(event, '&#597;')">&#597;</button></td>
            <td><button class="Other" title="voiced alveolo-palatal fricative" onclick="writeSampa(event, '&#657;')">&#657;</button></td>
+           <td><button class="Cons" title="velarized alveolar lateral approximant" onclick="writeSampa(event, '&#619;')">&#619;</button></td>
+           <td><button class="Other" title="voiced labial-palatal approximant" onclick="writeSampa(event, '&#613;')">&#613;</button></td>
            <td><button class="Cons" title="voiced retroflex lateral approximant" onclick="writeSampa(event, '&#621;')">&#621;</button></td>
            <td><button class="Cons" title="voiced palatal lateral approximant" onclick="writeSampa(event, '&#654;')">&#654;</button></td>
            <td><button class="Cons" title="voiced velar lateral approximant" onclick="writeSampa(event, '&#671;')">&#671;</button></td>
@@ -1071,7 +1071,7 @@ <h2>IPA Keyboard and X-Sampa Converter</h2>
            <td></td>
            <td><button class="Supra" title="superscript 2 (nonIPA)" onclick="writeSampa(event, '&#178;')">&#9676;&#178;</button></td>
         </tr>
-      </table>
+     </table>
 
       <div id= "ipa-output" style="position: relative;">
         <div id="ipa-output-toolbar">