Scott
In a world where globalization and digitalization blend deeply, text— as the core carrier of information—faces tough challenges: multiple languages, cultures, and scenarios. To let users read and create more freely and inclusively, Pixso 2.0 launches a powerful feature: Bidirectional. It works seamlessly with Sketch, fits multilingual editing and complex layouts, and gives global teams better collaborative creation experiences.
What is Bidirectional (BiDi)?
RTL (right-to-left) refers to languages or writing systems that start from the right to left. For exapmle, Arabic, Uyghur, Hebrew, Persian, and Urdu are common RTL. In contrast, languages like English, Spanish, and Chinese go the other way—left to right (LTR). Now maybe you have guessed it -- A bidirectional text contains two text directionalities, right-to-left (RTL) and left-to-right (LTR).
Pixso 2.0’s new feature Bidirectional supports both RTL and LTR display orders. It even lets you mix them in the same text box, ensuring different languages show correctly on the same page. This is key for multilingual product design and localization.
Why do We Need Bidirectional (BiDi)?
Traditional design tools often stumble when handling RTL languages, creating frustrating roadblocks for global design work. Let’s break down their critical flaws:
1. Chaotic text alignment
Tools without bidirectional support push RTL languages—like Arabic or Hebrew—into LTR setups. They default to left alignment. This messes up how people read naturally. Letters bunch up on the left, while the right side—where RTL text should start—stays empty. Even simple sentences turn into confusing blobs, making people read slower.
2. Cursor confusion
Typing in RTL becomes a guessing game. Slide the cursor left? It jumps to the end of the next character instead of the start. Hit backspace to delete a mistake? The tool deletes the character to the cursor’s left (wrong direction for RTL), forcing users to retype entire sections to fix errors.
3. Mixed text fragmentation
When RTL text includes LTR elements—like English phrases, numbers, or brand names—traditional tools split them arbitrarily. Take an Arabic sentence with a phrase like “click OK”—traditional tools might strand “OK” on the far left, while the Arabic words wrap clumsily around it, severing the logical link between the parts.
4. Static interface elements
When RTL text includes LTR elements—like English phrases, numbers, or brand names—traditional tools split them arbitrarily. Take an Arabic sentence with a phrase like “click OK”—traditional tools might strand “OK” on the far left, while the Arabic words wrap clumsily around it, severing the logical link between the parts.
5. Broken exports
Exporting designs with mixed LTR/RTL text usually wrecks the formatting. What looks passable in the tool turns into a jumble in handoff files, with text directions flipped or misaligned. What looks (somewhat) coherent in the tool turns into jumbled code in handoff files, forcing developers to manually adjust text directions—wasting time and risking inconsistencies between design and final product.
Pixso 2.0’s Bidirectional feature erases these headaches. It aligns RTL text naturally, syncs cursor movement with reading direction, keeps mixed text intact, mirrors interface elements automatically, and preserves formatting in exports. For global teams, this isn’t just a convenience—it’s the foundation of smooth, professional multilingual design.
When do We Need Bidirectional?
Bidirectional puts you in control of text flow, making layouts flexible and nice. It handles mixed Chinese-English or multilingual designs easily, boosting your work’s professionalism and look.
In product design, you’ll use Bidirectional in scenarios like:
1. Interface Layout Mirroring: When a product supports both LTR and RTL languages, the entire interface—navigation bars, menus, button orders—must mirror based on the language’s direction. Bidirectional text ensures this shift feels natural.
2. Text Input & Display Areas: Chat windows, comment sections, email editors—anywhere users type—need to handle mixed LTR and RTL text. Bidirectional support lets users type and read multiple languages smoothly, no awkward breaks.
3. Mixed Text Content: RTL interfaces often include LTR elements: English phrases, numbers, or proper nouns. Bidirectional text arranges these seamlessly, keeping the layout clean and easy to read.
4. Control & Component Direction: Input boxes, dropdowns, scrollbars, pagination—these adjust their alignment and interaction logic automatically with bidirectional text. Buttons and menus flow with the language, not against it.
How to Apply Bidirectional?
1. Switch Text Direction
When you select a bidirectional text box, a button to switch text direction will appear in the text panel and you can click it to switch between LTR and RTL.
2. Editing RTL Text
• Cursor movement: In RTL text, sliding left moves the cursor to the end of the next character. Sliding right goes to the start of the one before. It is totally opposite of LTR.
• Inserting text: Type where the cursor blinks, and new words pop up to its right. Feels natural for RTL flow.
• Line breaks: RTL lines start on the right and end on the left. Hit enter on the left side, and the cursor stays put at the text box’s left edge.
• Deleting text: Press delete, and it removes the character that came before. In RTL, that means wiping what’s to the cursor’s right.
• Lists: RTL text shows ordered and unordered list markers on the right. LTR text shows them on the left—automatically adjusted for readability.
2 Examples of Bidirectional Applications
“Design Seamlessly Across Languages” means teams from different places, speaking different languages, can work together without hitches. Bidirectional text makes this possible because it solves real problems in cross-team work. There are 2 examples from different perspectives:
📑 Example 1:
Take a Chinese designer and a Middle Eastern developer collaborating. The designer sets up an RTL layout: navigation bars start on the right, buttons align right, and English phrases mix smoothly with Arabic. With traditional tools, the developer might see something else: navigation stays left-to-right, buttons jump left, and English gets stuck in odd spots. This leads to rework because design and code don’t match.
Bidirectional text fixes this. What the designer sets, the developer sees—same text direction, same layout. No more back-and-forth. Work moves faster.
📑 Example 2:
Product managers often write requirements in English (LTR) but note special rules for Arabic (RTL) interfaces—like “Submit button goes on the right (RTL’s priority spot).” Without bidirectional text, English might get forced right, Arabic left. Words overlap, lines break wrong. Team members get confused: “Which ‘right’ do they mean?
With bidirectional text, English stays left, Arabic stays right. Mixed notes are clear. No more mix-ups. Everyone gets it.
Bidirectional text removes language barriers from collaboration. It lets global teams focus on creating great designs—together, seamlessly.
Key Advantages of Bidirectional
1. RTL Language Support
It works flawlessly with right-to-left languages like Arabic and Hebrew. No more awkward layouts. Text flows naturally, making multilingual product design easily.
2. Sketch Compatibility
Import or export bidirectional text without losing formatting. File transfers stay smooth, with zero hiccups during migration.
3. Mixed Layouts Made Easy
Bidirectional text lets you mix LTR and RTL in the same text box. Complex layouts? Done. No need to split text or compromise on design.
Global design shouldn’t get stuck on language directions. Pixso 2.0’s Bidirectional feature knocks down those barriers, which is smooth, simple, and ready to make every multilingual project shine. Dive in, try BiDi, and watch your team create without limits.
