RTL Digital Menus
Two mobile-first Arabic (RTL) digital menu interfaces — category navigation, responsive structure and on-phone readability.
Services
RTL & Arabic Web Development
RTL is a layout direction, not a translation. Arabic interfaces are frequently built by translating the text and leaving the layout facing the wrong way — alignment, reading order, directional icons and navigation all have to move with it, or the result reads as a foreign template with Arabic words in it.
Who this is for
Businesses serving Arabic-speaking customers, and agencies whose Arabic builds keep coming back with layout bugs.
Stack
HTMLCSSJavaScriptWordPressWooCommerceNext.js
Problems
What this actually solves.
- Translated, not localized
- Text flipped to Arabic while the layout, alignment and navigation stay left-to-right. Readers notice immediately, even if they cannot name what is wrong.
- Mixed Arabic and English content
- Product names, technology names, code and numbers stay left-to-right inside a right-to-left sentence. Handling that correctly is a real engineering detail, not a typography preference.
- Directional UI pointing the wrong way
- Back arrows, carousels, progress rails, breadcrumbs and sliders all carry direction. Mirroring the page without mirroring them produces an interface that contradicts itself.
- Arabic treated as the second build
- When Arabic is added after the English version is finished, it inherits every layout assumption made without it. It is cheaper to make direction a structural decision at the start.
What’s included
- Arabic RTL layout implementation
- Reading order and alignment
- Directional navigation, icons and controls
- Mixed Arabic / Latin content handling
- Arabic typography and line-height for the web
- RTL forms, tables and data interfaces
- Mobile-first Arabic interfaces
- Arabic WooCommerce storefronts
- Bilingual site architecture with correct hreflang
- RTL bug diagnosis on existing sites
Approach
How the work runs.
Direction first
RTL handled as a structural decision at the start, so alignment and reading order are right rather than patched afterwards.
Start at the phone
The phone layout is designed first and the wider layouts follow from it — which is the correct order when the phone is the actual device.
Audit every directional element
Navigation, arrows, breadcrumbs, icons, tables, numbers, dates, punctuation, carousels, form alignment and CTA direction — each checked, not assumed.
Write Arabic that reads as Arabic
Natural Arabic technical writing, without forcing translations of technology names that readers already know in Latin script.
Quality
What “done well” means here.
- This website is the demonstration
- The site you are reading is bilingual with a first-class Arabic tree — its own URLs, its own layout direction, reciprocal hreflang, and no mirrored-English shortcuts.
- Arabic is never canonicalized away
- Arabic pages are canonical to themselves. Pointing an Arabic page's canonical at its English equivalent tells search engines the Arabic version should not exist.
- Tested at real widths
- Arabic layouts checked across the same breakpoint matrix as English — 320 to 1920 — because direction bugs appear at specific widths, not on average.
Evidence
The projects that evidence this.
Every capability claim on this page is backed by delivered work.
Questions
Questions people actually ask.
- Is RTL just `direction: rtl` in CSS?
- That line flips the text flow. It does not fix directional icons, carousels, progress indicators, breadcrumbs, mixed Latin content, form alignment, or the reading order of a layout built with left-to-right assumptions. Those are the actual work.
- Can you add Arabic to an existing English site?
- Yes, and it is common. It requires an honest audit first: some layouts carry left-to-right assumptions deep enough that the correct answer is to rebuild the component rather than mirror it.
- Do you write the Arabic content as well?
- Arabic is my native language, so Arabic interface copy and technical writing are part of what I can do. Marketing copywriting at scale is a different discipline and is better handled by a specialist.
Contact
Have a site or store that needs to work better?
Tell me what is happening and on which page. A diagnosis is a useful first deliverable on its own.
I read every message myself and reply within one working day — usually with a question or two before anything else, because a scope worth quoting needs them answered.
Available for remote work aligned to EST hours
Mostafa Nouh
Full-Stack Developer & Product Builder
- linkedin.com/in/mostafanoah
- Location
- Egypt · Remote