← All work

UN iLibrary: one platform for left-to-right and right-to-left reading

A publishing platform for United Nations content, built so the same pages work in left-to-right languages and in Arabic, which reads right to left.

Role: UX and front-end developer

UN iLibrary home page in English: logo on the left, search box, language menu, a blue feature banner and Latest content, Most read and Staff Picks columns reading left to right.
English home page, left to right. Live site.
The same home page in Arabic, mirrored: logo on the right, menu and account icons on the left, the banner image on the right and the content columns running right to left.
The same page in Arabic, mirrored right to left. Live site.
An Arabic article page: Arabic title and abstract aligned right, cover image on the right, tools and related articles in a left-hand sidebar, with some English and Latin-script details mixed into the right-to-left text.
Arabic article page, with mixed Arabic and Latin text. Live site.
The Arabic article page on a phone: logo at the right, menu and icons at the left, breadcrumb, cover image and right-aligned Arabic title and details.
Arabic article page, mobile. Live site.

The problem

The UN publishes for readers in several languages, and Arabic readers expect the whole page to mirror: text, navigation, icons and layout all running right to left. Bolting that on afterwards tends to leave broken alignment and arrows pointing the wrong way.

What I did

  1. Set the page direction and language from the visitor's interface language, so the Arabic interface gets dir="rtl" and lang="ar" on the html element and every browser and screen reader treats it correctly.
  2. Loaded the mirrored stylesheets for Arabic pages from their own /rtl path, so the two directions use separate files.
  3. Kept one language menu for English, French, Spanish, Russian, Chinese and Arabic, with only Arabic switching the page direction.
  4. Generated a mirrored right-to-left stylesheet from the same source styles as part of the build, instead of maintaining a second set of CSS by hand.
  5. Kept third-party components that break when mirrored, such as the image lightbox, on the original stylesheet.
  6. Set the number and date formatting for the Arabic locale, so those match what readers expect.

The outcome

Created a solution that allows the United Nations to publish their accessible content in an interface that supports six interface languages, including a right-to-left language, and meets WCAG 2.2 accessibility requirements.