Skip to content

A set of steps to guide you through creating an Arabic version of your LTR website.

License

Notifications You must be signed in to change notification settings

lionbytes/RTL-yoursite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 

Repository files navigation

Arabicize Your Site

A set of steps to guide you through creating an Arabic version of your LTR website. It should mostly work for other RTL languages as well.

Duplicate Asset Files (Optional)

  • Duplicate layout/template files (e.g. template.html, index.html, etc.)
  • Duplicate and rename CSS files (e.g. styles-ar.css, bootstrap-ar.css, cover-ar.css, etc.)
  • Duplicate images and other assets.

Images & Backgrounds

  • Replace English text in Logotype images with Arabic text.
  • Replace English text in photos and other pictures with Arabic text.
  • Flip direction of asymmetric text-free decorative images from left to right and vice versa.

CSS Code

  • ltr <=> rtl
  • left <=> right
  • en <=> ar (e.g Look for: -en, en-, /en, en/, "en, en", en, etc.)
  • margin: 1 2 3 4 => margin: 1 4 3 2
  • padding: 1 2 3 4 => padding: 1 4 3 2
  • Replace the font-family font stack value with the appropriate Arabic ones (e.g. 'Amiri', 'Droid Arabic Naskh', 'Arial', etc.)
  • letter-spacing: 0 – Arabic text has no letter spacing.

HTML Code

  • ltr <=> rtl
  • left <=> right
  • For Bootstrap 4 and later: ml <=> mr
  • For Bootstrap 4 and later: pl <=> pr
  • en <=> ar (e.g Look for: -en, en-, /en, en/, "en, en", en, etc.)
  • Validate HTML element attribute values: (e.g. title, alt, src, href, placeholder, value, etc.)
  • Translate English text content to Arabic.

Test & Fix

  • Quality-check font sizes of headings and paragraphs.
  • Check if font-weight still works for all newly used Arabic font families.
  • Check misspellings.
  • Use better fonts if necessary.
  • Adjust spacing if necessary (i.e. paddings, margins, positions, etc.)
  • Debug JavaScript plugins and scripts that stopped working because of renaming and style direction change.

[*] Notice that the sign <=> goes both ways. Making left = right, and right = left :

  1. Replace left with temp.
  2. Then replace right with left.
  3. Finally replace temp with right.

Apply these replacement steps to other keywords.

About

A set of steps to guide you through creating an Arabic version of your LTR website.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published