Member Avatar for web_develop

hi
I'm trying to build a website of multi-language (English and Arabic). The problem is the writing direction, as in Arabic, we write from right to left, so that I have to relocate the logo,the scroll bar,etc to the other direction.

I managed to change the CSS for the logo, but the problem is in the menu, I must change not only the direction, but switch the links places that the Home menu button moves from the 1st button on the left to the 1st button on the right.... I asked a designer about it, and she told me to do it manually within dreamweaver inside every page I wanna change the language, but that means I will duplicate every web page instead of having one page with different keys which is translated according to the value,but having too many webpages and decrease developing efficiency.

Any suggestions will be helpful, thx

  • 3 Contributors
  • 3 Replies
  • 220 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by web_develop

Dani AI

Generated

Good job resolving the immediate problem, — and thanks to for pointing toward the bidi guidance. Below are practical, modern steps to keep one template (no duplicate pages) while supporting LTR and RTL languages, plus small code patterns you can drop into your project.

Keep one template and set the document language + direction on the root element. Render strings from a locale file and set lang and dir server-side (or on language switch). Example HTML structure:

<html lang="ar" dir="rtl">
  <body>
    <header class="site-header">
      <img class="logo" src="logo.png" alt="Site logo">
      <nav class="main-nav">
        <ul>
          <li><a href="/home">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

(developer.mozilla.org)

Use CSS to change visual flow without duplicating markup. For a nav you can use flexbox and flip the visual order for RTL:

.main-nav ul { display:flex; flex-direction: row; list-style:none; margin:0; padding:0; }
[dir="rtl"] .main-nav ul { flex-direction: row-reverse; }
.main-nav li { margin-inline-start: 1rem; }

This avoids manual duplication, but beware: reversing visual order can create a mismatch between DOM order and visual order, which affects assistive tech. Test accordingly. (developer.mozilla.org)

Prefer CSS logical properties (margin-inline-, padding-inline-, text-align: start) so most spacing and alignment automatically respect the writing direction. For mixed inline runs or tricky embeddings, use unicode-bidi carefully — it’s an advanced tool for overriding the bidi algorithm when needed. Example:

.header { text-align: start; }
.logo { margin-inline-end: 1rem; }
.bidi-inline { direction: rtl; unicode-bidi: embed; }

(developer.mozilla.org)

Workflow tips: use a single template + i18n libraries (server or build-time) to inject translated strings and set dir. Inspect well-implemented RTL sites (as suggested) for edge cases, test with screen readers and keyboard navigation, and validate that reading order remains meaningful for assistive tech (WCAG). A small JS toggle that swaps dir and lang is fine for client-side language switching if your content and DOM order already match the target language. (w3.org)

Recommended Answers

All 3 Replies

Member Avatar for Baltimore

Would you like to see made ​​Arab sites. Firebug look through their code, I think it will simplify the task.

Member Avatar for almostbob

http://www.w3.org/TR/i18n-html-tech-bidi/ the standard, resorts element order, so the menu buttons should adjust, home will become first on right, in rtl languages, and first on left in ltr languages

Edited by almostbob because: n/a
Member Avatar for web_develop

Thank you almostbob. That was of much help and I did it :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.