Show HN: Writing Arabic in English

Summary

My journey in creating a phonetic Arabic keyboard A phonetic keyboard is a type of keyboard layout designed to make typing in a particular language easier by mapping characters or letters to sounds rather than their traditional positions on the keyboard. This makes it easier for beginners or casual users to engage with the language without the learning curve of mastering an entirely different keyboard layout. However there a few problems we have to overcome when creating a phonetic Arabic keyboard. Arabic is written from right to left This actually wasn't a problem as we could just use our old friend direction: rtl; Arabic is a cursive script This means letters are connected to eachother and look different depending on their position in a word. Lets take the letter ب (baa) for example. - Beginning of the word: بيت (house - byt) - Middle of the word: حبيبي (my love - habibi) - End of the word: كتب (write - ktb) - Isolated: كِتَاب (book - ktab) Luckily the web browser (mostly) handles this for us, so we don't have to worry about it. Thank you UTF-8. Except on Safari where we have to use a Zero-Width Joiner (ZWJ) ‍ More on that here As an aside look at how the word for (write) كتب closely resembles the word for (book) كِتَاب. This is because Arabic is a root based language, where the meaning is derived from a root of 3 or 4 letters. More on that here And don't mind the marks around the word (book) we will get to that in a bit. Mapping English to Arabic If we want a phonetic keyboard we need to map arabic letters to the english keys in a way that makes sense for someone that is used to typing in english. So if someone types the letter b, we want to spit out the closest corresponding arabic letter-- in this case ب (baa). Lucky for us 17/28 arabic letters have a rough equivalent in english. And multiple english letters actually map to the same sound in arabic. (Click for audio) a = ا (alif) b = ب (baa) t = ت (ta) j = ج (jeem) d = د (dal) r = ر (ra) z = ز (zay) s,c = س (se...