DEV Community: The Arabic Keyboard

Building an online Arabic keyboard in vanilla JS: key maps, Arabizi input, and text-to-speech

The Arabic Keyboard — Fri, 30 Oct 2026 10:42:10 +0000

An online Arabic keyboard sounds like a solved problem: draw 30-odd keys, insert a character on click. Ours ended up handling three kinds of input: on-screen clicks, a physical keyboard remapped to Arabic, and "Arabizi" typed in Latin letters. It also autosaves, reads text aloud, and runs inside a WordPress page. Here's what was more interesting than expected.

1. Mapping a physical keyboard to the Arabic layout

Most people who need an Arabic keyboard don't have one installed. So the textarea intercepts keydown and swaps the Latin key for the Arabic character that sits on the same key in the standard Arabic (101) layout:

const ARABIC_MAP = {
  q: "ض", w: "ص", e: "ث", r: "ق", t: "ف", y: "غ", u: "ع", i: "ه", o: "خ", p: "ح",
  a: "ش", s: "س", d: "ي", f: "ب", g: "ل", h: "ا", j: "ت", k: "ن", l: "م",
  z: "ئ", x: "ء", c: "ؤ", v: "ر", b: "لا", n: "ى", m: "ة",
  // plus the punctuation keys: [ ] ; ' , . / `
};

editor.addEventListener("keydown", e => {
  if (e.ctrlKey || e.metaKey || e.altKey) return;   // leave Ctrl+C, Ctrl+Z… alone
  const k = e.key;
  if (k.length !== 1) return;                       // arrows, Backspace, Enter: native behaviour
  let mapped = e.shiftKey ? ARABIC_SHIFT_MAP[k] : null;
  if (mapped == null) mapped = ARABIC_MAP[k.toLowerCase()];
  if (mapped) { e.preventDefault(); insertAtCaret(mapped); }
});

Three details took longer than they should have:

Let modifier shortcuts through. If you preventDefault() on every key, Ctrl+C, Ctrl+V and Ctrl+Z stop working, and users notice in seconds.
Shift is where the vowel marks live. On the 101 layout, Shift+Q gives a fatha, Shift+W a tanwin fath, Shift+E a damma, and so on. The marks are combining characters, so inserting them after a letter makes them stack on it. That's exactly what you want, with no extra code.
One key, two characters. B produces لا (lam + alef), and Shift+T, Shift+G and Shift+B produce lam with the three hamza/madda alefs. These are two code points each, so Backspace removes the alef first and leaves the lam. That matches what the Windows Arabic layout does, so we kept it.

`e.key` or `e.code`?

We map from e.key, the character the operating system reports, not e.code, the physical key position. That gives the expected result on QWERTY. On a French AZERTY keyboard, though, the key labelled A reports "a" but sits where QWERTY has Q. A user who reads the on-screen Arabic layout and presses that physical key expects ض and gets ش.

e.code ("KeyQ") would follow the physical position instead. It's the right choice if your users look at a printed Arabic sticker sheet, and the wrong one if they think "the key with A on it". There's no universally correct answer. Pick based on your audience and say which one you chose.

2. Inserting at the caret, not at the end

A virtual keyboard that appends to the end of the text is unusable the moment someone clicks into the middle of a word to fix a typo. Insert and delete both work on the selection:

function insertAtCaret(text) {
  const s = editor.selectionStart, e = editor.selectionEnd, v = editor.value;
  editor.value = v.slice(0, s) + text + v.slice(e);   // replaces a selection too
  editor.selectionStart = editor.selectionEnd = s + text.length;
}

Selection offsets are in UTF-16 code units, not visible characters. With harakat that matters: a letter with a shadda and a fatha is three code units, so "one character to the left" can mean deleting only the last mark. For Arabic that's a feature. It lets you fix a wrong vowel without retyping the letter.

3. Arabizi: greedy, longest token first

Many Arabic speakers chat in Latin letters with digits for sounds Latin lacks: 3 for ع, 7 for ح, 5 for خ. The Latin mode turns that into Arabic script as you type, using an ordered list where multi-letter tokens come first:

const TRANSLIT = [
  ["sh","ش"], ["kh","خ"], ["th","ث"], ["dh","ذ"], ["gh","غ"],
  ["aa","ا"], ["ee","ي"], ["oo","و"], ["ou","و"],
  ["a","ا"], ["b","ب"], ["t","ت"], /* … */
  ["2","ء"], ["3","ع"], ["5","خ"], ["6","ط"], ["7","ح"], ["8","غ"], ["9","ق"],
];

If s came before sh, "shukran" would become سهكران. Ordering by length is the whole trick.

The second trick is how the result is written. Transliteration is context-dependent: s is س until the next key turns out to be h, and then the pair becomes ش. So instead of converting each keystroke on its own, the tool keeps a buffer of the Latin letters typed since the last space or Enter. On every key it re-converts the whole buffer and rewrites the end of the text as "committed Arabic + converted buffer". That way the output fixes itself as you type. A space commits the word, and so does clicking a key or pasting.

It's still a guess. Latin can't tell ح from ه, and Arabic writes long vowels but usually omits short ones. The placeholder says so (salam, 7abibi, 3arabi…), and the editor stays fully editable.

4. Text-to-speech depends on the device

speechSynthesis is free and needs no server, but it can only use the voices installed on the device, and its quirks show up quickly with Arabic.

Never guess a voice. An early version picked the first voice in the list when no Arabic one existed, so a French voice read Arabic text, which is worse than silence. Now only an explicit choice from the voice menu wins. Otherwise the tool looks for a voice whose lang starts with ar, and if there's none it sets lang = "ar-SA" and lets the system decide. When the device has no Arabic voice at all, it also shows a short help box in the page's language explaining how to add Arabic in the system settings. That turned "your tool is broken" into a settings fix.

getVoices() is empty at first. Chrome returns [] on the first call and fires voiceschanged later, so the voice menu is filled from that event. The check for an Arabic voice runs again at click time instead of trusting a flag set during page load.

Chrome stops long utterances. After roughly 15 seconds, speech can cut out silently. So the text is split at sentence ends, including the Arabic comma ، and question mark ؟, into chunks of about 160 characters that are queued one after another. A timer also calls pause() and resume() every 9 seconds while speaking, which keeps Chrome from dropping the queue:

const parts = text.match(/[^.!?،؟\n]+[.!?،؟\n]*/g) || [text];
// …group parts into ~160-char chunks, then:
chunks.forEach(ch => {
  const u = new SpeechSynthesisUtterance(ch);
  if (voice) { u.voice = voice; u.lang = voice.lang; } else { u.lang = "ar-SA"; }
  u.rate = 0.9;
  synth.speak(u);
});
const keepAlive = setInterval(() => {
  if (!synth.speaking) return clearInterval(keepAlive);
  synth.pause(); synth.resume();
}, 9000);

5. Small things users noticed

Autosave to localStorage on every change, under a versioned key (akb_text_v2). Closing a tab by accident no longer loses a paragraph. Wrap it in try/catch, because private modes and full quotas throw.
Copy with a fallback. navigator.clipboard.writeText() where it exists, document.execCommand("copy") where it doesn't.
A live character and word count, because people typing Arabic for a form or a social bio often hit a limit.
Keyboard-accessible keys. Every on-screen key has role="button" and tabindex="0", and Enter or Space activates it, so the virtual keyboard works without a mouse.

6. Shipping JavaScript inside WordPress content

The keyboard lives inside a WordPress page, and WordPress filters post content. One bug that took far too long to find: a literal & in a URL inside the script came out as &, and "Translate" quietly opened a broken Google Translate link. The fix looks odd but it's robust:

const AMP = String.fromCharCode(38);   // "&" that the content filter can't rewrite
window.open("https://translate.google.com/?sl=ar" + AMP + "tl=en" + AMP +
            "text=" + encodeURIComponent(editor.value), "_blank");

If you embed scripts in a CMS, test the served HTML, not your source file.

Try it

The keyboard is free, needs no install and runs in the browser: online Arabic keyboard. French speakers can use it as a clavier arabe en ligne. If you've built input tools for another right-to-left script, I'd like to compare notes in the comments.

Building an Arabic calligraphy generator with zero dependencies: fonts, SVG embedding and a 40-line PDF writer

The Arabic Keyboard — Fri, 30 Oct 2026 10:30:19 +0000

Most "Arabic calligraphy generators" on the web fall into two camps. Some are AI image generators that draw letter-shaped noise: it looks like Arabic until someone who reads Arabic looks at it. The others swap your letters for Unicode look-alikes that break in search and screen readers.

We wanted something duller and more correct: take real Arabic text, set it in a real calligraphic typeface, and let people take the result away as text, PNG, SVG or PDF. It runs entirely in the browser with no libraries, so here is what we learned building it.

1. The fonts: 22 open-licence faces, loaded on demand

Arabic calligraphy is a family of scripts (Naskh, Kufic, Nastaliq, Ruq'ah, Thuluth, Diwani...), and the honest constraint is licensing. We went through every Arabic-subset family on Google Fonts and kept 22 under the SIL Open Font License or Apache 2.0. Six are Naskh, four Kufic, two Nastaliq, one Ruq'ah and nine are modern display faces.

What is missing matters as much: there is no open-licence Thuluth or Diwani. Some generators label Aref Ruqaa as "Thuluth". It is not, so we don't.

Loading 22 webfonts up front would be absurd, so each one is injected as a stylesheet the first time someone picks it:

function loadFont(name) {
  if (loaded[name]) return Promise.resolve();
  loaded[name] = true;
  const l = document.createElement("link");
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(name).replace(/%20/g, "+") + "&display=swap";
  document.head.appendChild(l);
  // resolve on load, on error, or after 2.5 s: never block the UI on a font
  return new Promise(res => { l.onload = res; l.onerror = res; setTimeout(res, 2500); });
}

Before every export we wait on document.fonts.ready. Without that, the first PNG after switching fonts is drawn in the fallback serif.

2. Canvas does the shaping for you, if you tell it the direction

Arabic letters change shape depending on their neighbours, and the marks (harakat) stack above and below them. You do not need a shaping engine for this: the browser already has HarfBuzz-grade shaping, and fillText uses it. The one line people forget is the direction:

cx.font = size + 'px "' + font + '", serif';
cx.direction = "rtl";
cx.textBaseline = "alphabetic";
lines.forEach((line, i) => cx.fillText(line, x, Math.round(size * 0.95) + i * lineHeight));

Leave direction at its default and alignment and punctuation come out mirrored. We also give each line 1.9 × font size of height, because Nastaliq hangs far below the baseline and stacked harakat climb far above it. A tighter line height clips them.

PNG export is then just canvas.toBlob() at 2× scale, with an optional transparent background.

3. SVG that looks right on a machine without the font

An SVG that says font-family="Reem Kufi" renders in Times New Roman for anyone who doesn't have Reem Kufi installed. That covers almost everybody, including the print shop. The fix is to embed the font inside the SVG as a data URI:

async function fontDataUri(name) {
  const css = await fetch("https://fonts.googleapis.com/css2?family=" +
                          encodeURIComponent(name).replace(/%20/g, "+")).then(r => r.text());
  const m = css.match(/url\((https:[^)]+\.woff2)\)/);
  if (!m) return "";
  const bytes = new Uint8Array(await fetch(m[1]).then(r => r.arrayBuffer()));
  let s = "";
  for (let i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
  return `@font-face{font-family:"${name}";src:url(data:font/woff2;base64,${btoa(s)}) format("woff2");}`;
}

That string goes into a <style> block inside the SVG, so the file carries its own font. It costs some file size, typically tens of kilobytes for an Arabic subset, and buys a vector that renders the same in Inkscape, Illustrator, Figma or a browser.

4. A PDF writer in about 40 lines

We didn't want to ship a PDF library for a one-page, one-image document. A PDF that shows a single JPEG needs only five objects: a catalog, a page tree, a page, an image XObject and a content stream. JPEG data can be embedded as-is, because PDF's DCTDecode filter is JPEG:

obj("1 0 obj\n<</Type/Catalog/Pages 2 0 R>>\nendobj\n");
obj("2 0 obj\n<</Type/Pages/Kids[3 0 R]/Count 1>>\nendobj\n");
obj(`3 0 obj\n<</Type/Page/Parent 2 0 R/MediaBox[0 0 ${W} ${H}]` +
    `/Resources<</XObject<</Im0 4 0 R>>>>/Contents 5 0 R>>\nendobj\n`);
// 4: the image, raw JPEG bytes from canvas.toDataURL("image/jpeg")
// 5: the content stream:  "q W 0 0 H 0 0 cm /Im0 Do Q"  (scale the image to the page, paint it)

Then comes a cross-reference table of byte offsets and a trailer. The only fiddly part is tracking the byte offset of every object, because the image is binary while everything else is text. We collect Uint8Array parts and sum their lengths as we go. The page is sized to the artwork, which is what engravers and printers want.

5. Harakat: on by default, one regex to strip them

Short-vowel marks change pronunciation and sometimes meaning, so religious text and anything a learner reads should keep them. Logos almost never do. One character class covers the marks we strip:

const HARAKAT = /[\u064B-\u0652\u0670\u0640\u06D6-\u06ED]/g;   // tanwin…sukun, dagger alif, tatweel, Qur'anic marks
text = keepHarakat ? text : text.replace(HARAKAT, "");

Not every font positions marks well. The Naskh faces were drawn with careful mark anchoring; some display faces place them approximately. The UI tells people to check the preview at a large size.

6. Typing Arabic with a Latin keyboard

Many users can't type Arabic, so Latin input is transliterated as they type. Transliteration is lossy by nature: Latin cannot distinguish ح from ه or ع from ا, and Arabic writes long vowels but omits short ones. We made three pragmatic choices:

A hand-made dictionary for the words people actually type, such as allah, bismillah, mashallah, inshallah, habibi. They are mapped whole instead of guessed.
Doubled vowels are long vowels. salaam gives سلام and kitaab gives كتاب. A single vowel in the middle of a word is dropped, the way Arabic writes it.
Arabizi digits work: 3 = ع, 7 = ح, 5 = خ, as in chat Arabic.

The UI still says plainly that the output is approximate. For a tattoo, a native reader beats any algorithm.

7. "Copy and paste calligraphy" mostly isn't possible, with one exception

The most common request is "copy the calligraphy and paste it into Instagram". You can't: the look comes from the font, and the font doesn't travel with the text. The Copy button gives real Unicode Arabic, and the destination app renders it in its own font.

The exception is a handful of real Unicode ligatures in the Arabic Presentation Forms-A block. Each one is a single character that draws a whole phrase: U+FDFD ﷽ (the full Bismillah), U+FDF2 ﷲ (Allah), U+FDFA ﷺ. They paste anywhere. But they show as empty boxes on some older devices, and search engines and screen readers see a symbol, not the words.

Try it

The generator is free, needs no account and runs entirely client-side: Arabic calligraphy generator. If you just need to type Arabic on a computer without an Arabic layout, the same site has an online Arabic keyboard, and a clavier arabe en ligne for French speakers. If you work with RTL text on canvas and hit a case we haven't covered, I'd like to hear about it in the comments.

DEV Community: The Arabic Keyboard

Building an online Arabic keyboard in vanilla JS: key maps, Arabizi input, and text-to-speech

1. Mapping a physical keyboard to the Arabic layout

e.key or e.code?

2. Inserting at the caret, not at the end

3. Arabizi: greedy, longest token first

4. Text-to-speech depends on the device

5. Small things users noticed

6. Shipping JavaScript inside WordPress content

Try it

Building an Arabic calligraphy generator with zero dependencies: fonts, SVG embedding and a 40-line PDF writer

1. The fonts: 22 open-licence faces, loaded on demand

2. Canvas does the shaping for you, if you tell it the direction

3. SVG that looks right on a machine without the font

4. A PDF writer in about 40 lines

5. Harakat: on by default, one regex to strip them

6. Typing Arabic with a Latin keyboard

7. "Copy and paste calligraphy" mostly isn't possible, with one exception

Try it

`e.key` or `e.code`?