Prerequisites Step 6: Arabic Keyboard for Coding

This tutorial is written in Arabic, but the code, commands, and file names stay in English. That means you will constantly switch between two input languages while working. This step sets that up properly on your operating system, so typing Arabic in comments and user-facing text does not break your code.

You do not need an Arabic keyboard. The "Arabic keyboard" is a layout inside your operating system: the same physical keys produce Arabic letters. If your keyboard has Arabic letters printed on it, that is convenient, but it is not required.

What You'll Learn

• Add an Arabic input layout on Windows, macOS, Linux, Android, and iOS
• Choose a layout that is comfortable for coding
• Switch between Arabic and English quickly, without breaking your flow
• Type Arabic in comments and strings without triggering syntax errors
• Fix the most common Arabic-input problems

Part 1: Choose the Right Layout

There are several Arabic layouts. They all type Arabic, but they place letters, punctuation, and digits differently.

Recommendation: use the layout whose letters sit on the same keys as QWERTY. Keep the English (US) layout installed as well, and switch to it when typing code symbols, punctuation, or numbers. For heavy mixed Arabic/English writing, try Arabic – QWERTY on macOS or Arabic (102) on Windows.

Part 2: Windows 10 and 11

Add the Arabic layout

1. Open Settings → Time & language → Language & region.
2. Click Add a language, search for Arabic, choose your region (for example Arabic (Saudi Arabia)), and install it.
3. Next to Arabic, open the ⋮ menu → Language options.
4. Under Keyboards, click Add a keyboard and pick Arabic (101), Arabic (102), or another layout.
5. Make sure an English keyboard is installed too. You will switch back to it constantly.

Switch while typing

• Win + Space cycles through installed input languages. This is the default.
• Alt + Shift also works if the legacy shortcut is enabled.

The taskbar (near the clock) shows ENG or ARA. Glance at it before typing punctuation.

Change the shortcut

1. Settings → Time & language → Typing.
2. Open Advanced keyboard settings.
3. Click Input language hotkey → Change key sequence and choose the shortcut you prefer.

Type Arabic on screen (no Arabic keys printed)

Press Win + Ctrl + O to open the on-screen keyboard, then switch the input language as usual.

A note about digits

Some Arabic layout variants type Arabic-Indic digits: ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩. These are valid Unicode characters but invalid in code and in JSON. If you see them while coding, switch to the English layout.

Part 3: macOS

Add the Arabic layout

1. Open System Settings → Keyboard.
2. Under Input Sources, click Edit….
3. Click +, choose Arabic, and select a layout (Arabic, Arabic – QWERTY, Arabic – PC; names vary by macOS version).
4. Add English (US) as well if it is not already there.
5. Click Done.

Enable Show Input menu in menu bar so you always see the current language.

Switch while typing

For many learners, Arabic – QWERTY is the most comfortable layout for mixed Arabic/English work. Try it before settling on the default Arabic layout.

See the keys

In the input menu, choose Show Keyboard Viewer to see exactly which key produces which character in the current layout.

Part 4: Linux

The instructions depend on your desktop environment. All of these add the same XKB layout, named ara.

GNOME

1. Settings → Keyboard → Input Sources.
2. Click + → Arabic → choose a variant → Add.
3. Switch with Super + Space (previous source: Shift + Super + Space).

You can also configure it from a terminal:

# Show the current configuration
gsettings get org.gnome.desktop.input-sources sources

# Add Arabic (keep the existing entries in the list!)
gsettings set org.gnome.desktop.input-sources sources "[('xkb', 'us'), ('xkb', 'ara')]"

# Change the switch shortcut
gsettings set org.gnome.desktop.wm.keybindings switch-input-source "['<Super>space']"
gsettings set org.gnome.desktop.wm.keybindings switch-input-source-backward "['<Shift><Super>space']"

KDE Plasma

1. System Settings → Keyboard → Layouts.
2. Enable Configure layouts, then Add → Arabic.
3. Set the shortcut in Keyboard → Shortcuts and search for "keyboard layout".

X11 window managers (i3, XFCE, Openbox, …)

Set the layouts for the current session:

setxkbmap -layout us,ara -option grp:alt_shift_toggle,grp_led:scroll
setxkbmap -query

List the available Arabic variants:

localectl list-x11-keymap-variants ara

You will see variants such as azerty, digits, buckwalter, olpc, and mac. Use ara for the default layout; use ara with the digits variant only if you actually want Arabic-Indic numerals.

To make the setting permanent, put the setxkbmap command in your ~/.xinitrc or window-manager startup file. On Wayland, setxkbmap does not apply globally; use the GNOME or KDE settings instead.

IBus (optional, for phonetic layouts)

# Debian/Ubuntu
sudo apt install ibus-m17n

# List Arabic engines
ibus list-engine | grep -i arabic

# Activate one for the current session
ibus engine m17n:ar:kbd

Part 5: Android and iOS

Android (Gboard)

1. Install Gboard if it is not already installed.
2. Settings → System → Languages & input → On-screen keyboard → Gboard → Languages.
3. Tap Add keyboard → Arabic → choose a layout.
4. Switch languages with the globe key on the keyboard, or by swiping the spacebar left/right. Enable "Show language switch key" if the globe is hidden.
5. With a physical keyboard, Ctrl + Space usually switches layouts.

iPhone and iPad

1. Settings → General → Keyboard → Keyboards → Add New Keyboard.
2. Choose Arabic, then pick a layout (Arabic, Arabic – QWERTY, or Arabic – Najdi depending on iOS version).
3. Switch while typing with the globe key (tap it, or long-press to choose a language).
4. With an external keyboard, press the Globe key to change input source.

Coding on a phone is possible (for example with Termux on Android), but for this project a laptop or desktop is strongly recommended. Phones are great for reading the tutorial and for testing the mobile app.

Part 6: Switching While Typing — Quick Reference

Switching is global for the user session, but some applications (games, remote desktop clients, virtual machines) capture the shortcut. If a shortcut stops working, switch from the menu bar or taskbar instead.

Part 7: Arabic Inside Code

This is where most problems appear. The rule is simple: Arabic belongs in comments and user-facing strings; code syntax stays in English.

Comments and strings

# احسب مجموع الأسعار بعد الضريبة
def total(prices):
    return sum(prices)


greeting = "مرحبًا بك في تطبيق الدردشة"
print(greeting)

This file is UTF-8, which Python 3 uses by default. It runs exactly like an English-only file.

Can I write identifiers in Arabic?

Technically, yes. Python 3 and modern JavaScript allow Unicode letters in identifiers:

def احسب_المجموع(الأسعار):
    return sum(الأسعار)


print(احسب_المجموع([10, 20, 30]))

But for this project, keep identifiers, function names, and file names in English. Reasons:

• Most libraries, error messages, and Stack Overflow answers are in English.
• Mixed-direction identifiers are hard to review in a diff.
• Teammates and tools may not support Arabic identifiers equally well.

Use Arabic for the parts a human reads: comments, documentation, and the text users see in the app.

The number-one error: Arabic punctuation

Arabic layouts type Arabic punctuation characters:

Typing this:

print("مرحبا" ، "بالعالم")

produces:

SyntaxError: invalid character '،' (U+060C)

The fix is to switch to the English layout and type the Latin comma:

print("مرحبا", "بالعالم")

Arabic-Indic digits

These are also a common trap:

total = ١٢  # ❌ SyntaxError: invalid character '١' (U+0661)

Python's int() can convert a string of Arabic-Indic digits, but JavaScript's Number() and JSON reject them:

int("١٢")       # 12 (works in Python)

Number("١٢");   // NaN

{"count": ١٢}   // ❌ invalid JSON

Use Western digits 0-9 in all code and data.

Mixing Arabic and Latin text (bidi)

Arabic is written right-to-left, while code is left-to-right. When one line mixes both, the Unicode Bidirectional Algorithm may reorder punctuation visually. The characters are correct, but the screen can be confusing.

label = "المجموع (total) = 30"

If punctuation appears in the wrong place in your editor or in the app UI, wrap the mixed segment with Unicode isolates. Write them as escapes so they stay invisible and intentional:

# U+2068 = first strong isolate, U+2069 = pop directional isolate
label = "\u2068المجموع (total)\u2069 = 30"

For short inline cases, the right-to-left mark (U+200F) and left-to-right mark (U+200E) also help:

amount = "\u200f30 دولار\u200f"

Do not paste invisible characters at random. Add them deliberately, and add a comment explaining why.

Editors and terminals

• VS Code highlights invisible and ambiguous Unicode characters. Click the highlighted character to see what it is; editor.unicodeHighlight.invisibleCharacters and related settings control this.
• Use a font with Arabic glyphs for the UI (for example Noto Sans Arabic), and a monospace font for code. Code blocks in the app and on this site are always rendered left-to-right for this reason.
• In the terminal, Arabic text prints correctly with a UTF-8 locale:

locale | grep -i utf
python3 -c "print('مرحبا')"

If you see ???? instead of Arabic, your locale or terminal font is not UTF-8 capable.

Working with files

• Save all files as UTF-8 (the default in VS Code and most editors).
• Git handles Arabic text correctly; review git diff to make sure you did not paste Arabic punctuation into code.
• JSON values may contain Arabic freely; keep JSON keys in English.
• Database columns and API field names: keep them in English. Store Arabic in the values.

Part 8: A Daily Workflow That Works

1. Keep English (US) as the default layout.
2. Switch to Arabic for comments, documentation, and UI text.
3. Switch back before typing symbols: , ; : ( ) { } [ ] = + - / ? !.
4. Check the language indicator (taskbar, menu bar, or globe) before typing punctuation.
5. Run your tests and linter after writing Arabic text; they catch stray Arabic punctuation immediately.
6. Read the diff before committing. A ، hidden in a list of arguments is easy to miss.

Part 9: Troubleshooting

Part 10: Practice

1. Add the Arabic layout on your operating system, then switch back and forth 10 times using only the keyboard shortcut.
2. Type this comment and string in a Python file, then run it: python # مرحبًا — هذا تعليق عربي print("أهلًا بك في الدردشة")
3. Deliberately type an Arabic comma in a print() call, run the file, read the error, then fix it with a Latin comma.
4. Type ١٢ as a number in code, run it, and explain the error in one sentence.
5. Write a string that mixes Arabic and English, then add \u2068 and \u2069 around the mixed part and compare the rendering in VS Code.
6. Add an Arabic string to the React Native app later in the course and confirm it displays correctly on the phone.

When all six exercises work, your environment is ready. Continue with prerequisites/exercises.md, or go straight to backend/step-01-setup.md.

Verification

# 1. Arabic text prints correctly from Python
python3 -c "print('مرحبًا')"

# 2. Your files are UTF-8
file -i backend/app/routes.py

# 3. No Arabic punctuation slipped into code
python3 -m compileall backend/app

If the first command prints مرحبًا, the second reports charset=utf-8, and the third finishes without errors, you are set.

Further Reading

• Manage the input and display language settings in Windows — Microsoft Support
• Write in another language on Mac — Apple Support
• Add or change keyboards on iPhone — Apple Support
• Type in a different language with Gboard — Google Support
• Keyboard layouts — GNOME Help
• Unicode Bidirectional Algorithm (UAX #9)
• Python identifiers and Unicode — Python documentation