Saturday, September 22, 2012

Web tools - IPA code generator

Using IPA (International Phonetic Alphabet) symbols

Probably the ideal way of using IPA symbols on a web page is to use images. But that can be a hassle. On Blogger, you would have to upload something like forty images.
For me, at least, the use of special HTML character codes is an acceptable and much more convenient alternative. The only symbol missing is the long vowel sign, but a colon does almost as well. Here's what it looks like:
creation/krɪ'eɪʃn/
dispatch/dɪs'pæʧ/
parakeet/'pærekɪ:t/
agency/'eɪʤənsɪ/
butter/'bʌtə/
television/tele'vɪʒn/
theatre/'θɪəte(r)/
cure/'kjʊə(r)/
The only problem is that you have to look up the codes and enter them individually. I can't be bothered with all that, so I devised this keyboard to speed up the process. First type in your symbols, optionally using the apostrophe to show stress. You can also bracket letters which only some people pronounce. There are two keyboards, one by sound type and a sort of (Q)werty one - use the 'Switch keyboard' button to toggle between them.

When you've completed your word, you can add dashes with the '/ add /' button. If you want to style the IPA symbols, you can give them a span class by clicking on the '< span >' button. Clicking a second time on these buttons will undo the action. There's some suggested styling code below the keyboard, but you can always change it.
As far as I can see, you can copy the IPA symbols directly into HTML. But if you want to put it into some Javascript, you'll need the entities code.
When you're done, select, copy and paste the symbols into your page, or insert the code from the edit box into your code.

IPA code generator

 
ɪ ʊ ʌ ɒ ə e æ short vowels
ɪ: u: ɑ: ɔ: ɜ: long vowels
eɪ əʊ aɪ aʊ ɔɪ ɪə eə ʊə diphthongs
p t ʧ k f θ s ʃ unvoiced consonants
b d ʤ g v ð z ʒ voiced consonants
l m n ŋ r w j h other consonants

Suggested CSS styling code

<style type="text/css">
<!-- 

.ipa{
color:gray;
font-size:110%;
font-weight:bold;
}

-->
</style>

Related pages / posts

Links