How Aney built a bilingual English and Arabic website with full RTL support

Overview

Aney is a B2B services company operating across three channels: retailers, Horeca (hotels, restaurants, and catering), and suppliers. As the business expanded into Arabic-speaking markets, they needed more than a translated website — they needed a site that could switch cleanly between English left-to-right layout and Arabic right-to-left layout without any of the alignment breakage that typically plagues bilingual builds.

They came to Figmafy with a complete Figma design for both language versions and a clear requirement: every element had to look intentional and correct in both directions.

The challenge

Bilingual RTL/LTR builds are deceptively complex. Translating copy is straightforward. What isn't straightforward is ensuring that every flex container, every text alignment, every icon position, every margin and padding, and every UI component mirrors correctly when the reading direction flips from left-to-right to right-to-left.

The specific challenges Aney brought to us:

• All page layouts needed to mirror correctly in RTL — not just flip text, but flip the entire visual composition
• Typography had to be handled carefully: Arabic script rendering requires different font stacks, line heights, and letter-spacing than Latin characters
• Navigation, buttons, form inputs, and icon-text pairs all had to be direction-aware so nothing looked accidental in either language
• The final build had to be maintainable — content editors needed to update copy in both languages without breaking layout

Our solution

We built Aney's site on a custom WordPress theme engineered from the ground up to support bidirectional content. No off-the-shelf multilingual plugins were used for layout — direction switching was handled at the theme level using the dir attribute and language-conditional CSS.

1. Audit & direction mapping. We reviewed every section of the Figma design for both language variants and catalogued every element that would need direction-aware styling: navigation items, icon-text pairs, card layouts, form fields, and CTA buttons.
2. Custom WordPress theme build. We coded the theme by hand — semantic HTML5 with lang and dir attributes set dynamically per language, a flat CSS architecture using logical properties (margin-inline-start, padding-inline-end) so spacing adapts to direction automatically, and separate Arabic font stack loaded conditionally.
3. RTL-specific QA with native speakers. We tested the Arabic version with native Arabic readers to verify that text alignment, reading flow, and visual hierarchy all felt natural — not mechanically mirrored. Adjustments were made to line heights and character spacing based on that feedback.
4. Responsive QA across breakpoints. Both language versions were tested at mobile, tablet, and desktop widths to confirm that RTL behaviour held correctly at every breakpoint, not just on desktop.

Technologies used

• WordPress — custom theme, no page-builder plugins
• Bidirectional CSS using logical properties and dir-attribute switching
• Conditional Arabic font stack for correct script rendering and comfortable reading
• WPML-compatible content structure for managing English and Arabic content separately
• Responsive design tested at mobile, tablet, and desktop breakpoints in both languages

Results

Aney now has a production-ready bilingual website that presents their business confidently to both English-speaking and Arabic-speaking audiences. Every page layout switches direction correctly, every component aligns as designed, and the content team can update copy in both languages independently.

"Having a partner like Figmafy is such a relief. We're able to skip the dev hiring chaos and get production-ready builds in a matter of days." — Zaire Allen, Co-Founder & COO, Aney

If your business needs a bilingual or RTL-ready website built right, visit our Figma to WordPress page or get a free quote today.