https://github.com/lionbytes/rtl-yoursite
A set of steps to guide you through creating an Arabic version of your LTR website.
https://github.com/lionbytes/rtl-yoursite
Last synced: about 1 month ago
JSON representation
A set of steps to guide you through creating an Arabic version of your LTR website.
- Host: GitHub
- URL: https://github.com/lionbytes/rtl-yoursite
- Owner: lionbytes
- License: mit
- Created: 2020-02-22T21:34:50.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-09-26T15:33:18.000Z (over 2 years ago)
- Last Synced: 2025-02-16T08:43:09.270Z (3 months ago)
- Homepage:
- Size: 53.7 KB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.