Skip to main content
Hemyar Alharazi

Technical note · Software

Building Bilingual Arabic–English Web Platforms for Engineering Content: An RTL-First Approach

Abstract

Engineering organisations in the region publish for readers who switch between Arabic and English, often within one document. Treating Arabic as a translated afterthought produces broken layouts, mixed-direction numbers and inconsistent terminology. This note describes an RTL-first approach: logical CSS properties, handling bidirectional text with units and codes, locale-aware routing and metadata, and a terminology workflow that keeps both languages accurate.

Start from direction, not translation

A layout designed left-to-right and mirrored later leaks assumptions everywhere: margins on the wrong side, icons pointing backwards, carousels that scroll the wrong way. Designing with direction as a variable from the first component avoids most of it.

  • Use logical CSS properties — margin-inline-start, padding-inline-end, inset-inline-start — instead of left and right.
  • Set dir and lang on the document root for each locale, and override dir only on the elements that genuinely need it.
  • Mirror directional icons (arrows, chevrons, "back"), but not icons that depict real objects or time, such as a clock or a play button.

Bidirectional text in engineering content

Engineering Arabic is full of Latin fragments: units, part numbers, standards, code, formulas. The Unicode bidirectional algorithm handles most of it, but not all.

  • Wrap part numbers, file names, URLs and code in elements with dir="ltr" so their characters stay in order.
  • Keep a number and its unit together; a line break or direction change between "25" and "m/s" confuses readers.
  • Decide on Western or Arabic-Indic digits per product and apply it consistently — mixing both is the most common bilingual defect.
  • Render formulas with a math renderer, isolated from the surrounding right-to-left paragraph.

Give each language its own URL and declare the relationship with hreflang alternates, so search engines serve the right version. Translate titles and descriptions, not only body text, and allow a different slug per language when readers expect it.

Terminology as a managed asset

The hardest bilingual problem in engineering is not the layout but the words. Maintain a glossary of approved Arabic and English terms, with notes where the field has no settled Arabic term. Have a subject-matter expert review technical translations, and track which content has been reviewed so an untranslated or machine-translated page is visible rather than silently published.

Accessibility

Screen readers need the correct lang to pronounce text. Check contrast and font size for Arabic script, which often needs a slightly larger size and more line height than Latin text to read comfortably. Test both languages, on phones, with real content — placeholder text hides every one of the problems above.

Share