Skip to content

Comments

Add Arabic Translation & RTL Compatibility#4245

Open
ahmadkhaefi wants to merge 16 commits intofullstack-hy2020:sourcefrom
ahmadkhaefi:arabic-translation
Open

Add Arabic Translation & RTL Compatibility#4245
ahmadkhaefi wants to merge 16 commits intofullstack-hy2020:sourcefrom
ahmadkhaefi:arabic-translation

Conversation

@ahmadkhaefi
Copy link

This PR adds an Arabic translation as well as right-to-left compatibility to the project's website.

Changes

  • Translations:
    1. part 0 (part0.md, part0a.md, part0b.md)
    2. the main page (located in src/content/pages/main.json),
    3. locales,
    4. website pages (located in src/pages), and
    5. the PartBanner component (located in src/components/PartBanner/PartBanner.js).
      As for technical terminology, the translations rely mainly on Microsoft's terminology as well as Wikipedia.
  • Right-to-left (RTL) compatibility:
    The JavaScript code first identifies the current language's direction using the i18n.dir() method (i18n is being imported from i18next). It then sets a className to the body element accordingly.
    The Sass code also uses a mixin called rtl to add rtl-specific styles when needed, which relies on the rtl class attribute in the body element.
  • Font updates:
    Since the Latin-script monospace font neither looks visually aesthetic nor readable for Arabic texts, I decided to add the Arabic font IBM Plex Sans Arabic while keeping the font of English texts as is.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant