Building bidi is not just about adding lines of code and flipping layouts, it’s about harmonizing a co-existence of right-to-left and left-to-right user experience. It’s about a holistic approach to product performance.
On February 18 we launched LinkedIn’s website in bidirectional performance for right-to-left (RTL) support in Arabic. This launch delivered on three transformative turn points for us:
Students and professionals in MENA (Middle East North Africa) now have open opportunities for career development and economic growth.
Local business partners can now connect with global partners around the world for hire, market and sell opportunities.
And product builders can now let out a long sigh of relief that…yes…the ultimate internationalization (i18n) challenge of making features work in both directions without breaking is now mission accomplished for LinkedIn.
When I joined LinkedIn, over 2.5 years ago, my sheer mention of “building bidi” was met with a chilling tremor. Those were the unspoken words, like saying “Voldemort.” Companies typically put off building bidirectional performance because it is difficult to get it right. As a right-to-left (RTL) user, I can attest that I have not yet encountered the perfect bidirectional product. The experience is always compromised at some point, and RTL users have realistic expectations. For example, when typing in text in Hebrew or Arabic, we often opt for transliterating an English name in the native right-to-left language to avoid a mixed direction string that's bound to break in the rendered code.
So how did we approach bidi builds at LinkedIn?
Traditionally, companies launch bidirection on UI only, and later enable it in UGC (user generated content) fields, and in Email templates. We built upfront support on all three levels at launch to allow users a holistic product experience. The greatest challenge was to operate effectively on a high-scale horizontal initiative across functions and teams, and get all parties’ buy-ins. Working horizontally in collaboration with every product team was also the most rewarding experience.
Bidi is a game-changer in terms of UX orientation. It impacts product development considerations and design decisions. When we develop a new feature, we need to consider how a right-to-left (RTL) user would interact with our product. Left-to-Right (LTR) users typically scan a page in an F shape for quick information digest. Right-to-Left (RTL) users (Arabic, Hebrew, Farsi, Urdu, etc) typically scan a page in an inverted Z shape.
It’s never just about RTL or LTR, rather about a mixed direction experience. Here are the three key principles we applied:
1. Auto mirror flip of all layout elements: tables, grids, buttons, navigation bars, icons, glyphs, etc.
Left-to-right UI:
vs Right-to-left UI:
When we kicked off this initiative, we realized early on that the readily available tools for auto flip code out in the market were just not good enough. To optimize, we created our own home-grown auto-flip code fit for all CSS-based platforms, with built-in opt-out, RTL-configured padding, margins, floats, positioning, border, check boxes, text alignment, etc. We’ll open-source an updated version of this code later this year to help other companies optimize their bidirectional product builds.
2. Right-to-left text direction: Product/brand names typically remain in English, which makes for mixed direction text strings that often mess up word order. We apply direction attribute (dir=rtl) on the container level of the pages for correct rendering of text flow. Below is an example:
3. Right vs Left text alignment: For UI, the alignment logic is controlled by the auto flip code: If English interface, flush to the Left; if Arabic interface, flush to the Right. For UGC (user generated content fields), however, we’ve built this logic: user’s first strong character keyed determines text alignment within the text field, regardless of the UI alignment logic. Expected behavior is for consistent alignment rendering for both input and output logic.
Below is an example from LinkedIn’s Home Page NUS Feed (network update stream). We honor the user choice to interface in a right-to-left (RTL) environment (Arabic UI, in this case), and, therefore, serve the RTL expected behavior: display the UI elements (time stamp, social signals, user name and profile photo) in mirror flip, flushed to the right. However, we also honor the user choice to share content in English (left-to-right language), and, therefore, serve the LTR expected behavior for this segment: Left-align the English user generated content (UGC) within the text field. Adding the invisible RLM or LRM tags (right/left marks) at the beginning of text lines is another way to treat alignment.
On a deeper dive, there are clearly many more considerations for building bidi. Mobile application logic differs from desktop, and there are different degrees of RTL requirements for Hebrew vs Arabic. But the bottom-line take-away is one:
building bidi makes for a truly internationalized product experience, inclusive of all worldwide users in any direction orientation.
Comments