← appaday

Alif, the Arabic alphabet in tiny lessons

Alif teaches the Arabic alphabet as one straight line of tiny lessons: a letter, its sound, one question, Continue. 104 steps lead from the first letter, bāʾ, to reading words like kitāb and shams. Codex built the first version. I asked for it like this:

never mind the existing stuff (you can look at it but it's not important)... I need a tool that teaches the arabic alphabet rapidly... the letters, how to pronounce them and how to read words.

A cream page with a dark green alif. logo. Above a thin progress bar: Your first word, Lesson 1 of 104. A white card headed Meet a letter says This is bāʾ. Below it a large Arabic letter bāʾ, the reading b, the line Close both lips, then release: b as in bed, a Hear ba button captioned AI voice, ElevenLabs, Mazen Lawand, and a hint box: One dot BELOW the bowl.
Lesson one of 104. Taken from the local copy in Chromium on the laptop.

One line, no menu

The first version had eight chapters to choose between. Three and a half hours later:

way too many options. just one straight curriculum, tiny lesson after tiny lesson. no branching paths

Now every screen teaches one thing. Try it opens a single question with three answers. A wrong answer explains itself and keeps you on the question; Continue only appears once you pick the right one. The browser remembers your place, so a reload picks up where you left off.

The bread problem

The sounds were the weak part from the start. Letter sounds streamed from a university teaching site, words from Wikimedia Commons, and a synthetic Microsoft voice filled in wherever nothing was found. The same morning:

ok something is off.. either the lessons but I am guessing more the recordings... very evident at lesson "Read 'bread'" ... it says khubz but the recording reads more like khair

Codex pointed that lesson at another site's recording of food words and played only the 0.8 seconds that say bread. Two days later I took it to Claude Code:

ok I asked codex to make the arabic alphabet and reading app but I am not quite happy with it... some ideas: more repetition (to test existing letters) and better voice audios

The word recordings turned out to be different speakers in different dialects, several of them tagged as recorded in Morocco.

Two phone-width screens of lesson 55 of 104, chapter Dots change the sound. Left, Read a word: Read bread, the Arabic word khubz in large type, the reading khubz, and three tiles splitting it into khu, b and z from right to left, with the hint Start with the airy back-of-mouth kh. The b has no vowel after it, and a Hear khubz button. Right, One quick check: How do you read this word? with three answers, khūbz, khabz and khubz. khabz is greyed out, and a peach box says Look once more. khubz is khubz, bread. Choose the matching answer to continue, with a Hear khubz button.
The bread lesson today, and its check after a wrong answer. Both at phone width in Chromium on the laptop.

More repetition

Every four steps the course now brings back whichever letter you have gone longest without seeing. The wrong answers in a review come from every letter learned so far, not just the last two, which had made the old reviews too easy. Reviews went from 12 to 35, and the course from 86 steps to 104.

Lesson 46 of 104, headed A little recall: Which sound does this letter make? The letter tāʾ with two dots on top. Of the answers d, t and z, t is highlighted green, and a green box says That's it. tāʾ: t. Two dots on TOP. A dark Continue button below.
One of the recall checks, answered.

One voice

The first try was Gemini, because its key was already on the laptop:

yes do the gemini only thing for now so I can keep learning

Gemini's speech models refuse isolated Arabic syllables. A bare بَ came back empty on both the flash and the pro model, every time, and even whole words mostly failed: 6 of 27 came back. Six words in a third voice would have made things worse, so all of it was reverted. The attempt cost nothing.

ElevenLabs voiced the bare syllable on the first try. The first four voices to compare were its stock English voices speaking Arabic:

adam and george pronounce differently.... uh... why

They learned mostly from English speakers, and each one guesses Arabic through its own accent, worst on a lone consonant with a short vowel. A course that teaches pronunciation would pass those guesses on. So I added five Arabic voices to the account, and:

just use the most popular one

That was Mazen Lawand, a Modern Standard Arabic voice. All 61 clips, letters and words, were made again in that one voice and bundled with the page, so nothing streams from other sites any more and the course works offline. The next morning it went live.

course
104 steps: 28 letters, 19 rules (vowel marks, joining, shadda, hamza and more), 22 words, 35 reviews
audio
61 clips, one ElevenLabs voice (Mazen Lawand, Modern Standard Arabic), bundled
built
Codex on 28 Oct; Claude Code on 30 Oct for the repetition and the voice
page
plain HTML, CSS and JavaScript modules, no build step; your place saved in the browser
tests
8 Node tests (every letter covered, one right answer per question, every clip present) plus a run through the whole course in Chromium

Still rough

The voice is synthetic: clear and the same everywhere, but not a teacher. It also never hears you. Nothing records or checks your own pronunciation.

Every word in the course carries its vowel marks, apart from one late step that shows a familiar word without them. Real unvowelled text needs vocabulary and context, and the course does not teach those.

Your place lives in one browser, so a phone and a laptop each keep their own.

Open Alifstarts at lesson one