Skip to content
CMO & CTO
CMO & CTO

Closing the Bridge Between Marketing and Technology, By Luis Fernandez

  • Digital Experience
    • Experience Strategy
    • Experience-Driven Commerce
    • Multi-Channel Experience
    • Personalization & Targeting
    • SEO & Performance
    • User Journey & Behavior
  • Marketing Technologies
    • Analytics & Measurement
    • Content Management Systems
    • Customer Data Platforms
    • Digital Asset Management
    • Marketing Automation
    • MarTech Stack & Strategy
    • Technology Buying & ROI
  • Software Engineering
    • Software Engineering
    • Software Architecture
    • General Software
    • Development Practices
    • Productivity & Workflow
    • Code
    • Engineering Management
    • Business of Software
    • Code
    • Digital Transformation
    • Systems Thinking
    • Technical Implementation
  • About
CMO & CTO

Closing the Bridge Between Marketing and Technology, By Luis Fernandez

Right-to-Left Support: Layout Realities for Desktop and Web

Posted on December 3, 2012 By Luis Fernandez

Right to left support is not a checkbox. It is a set of layout choices that show up in your UI every minute a user spends with your product. If you are shipping to Arabic or Hebrew readers this season, you have seen the tiny surprises. An arrow that points the wrong way. A caret that jumps around a mixed sentence. A table that reads fine in Chrome but collapses in IE. With Windows 8 now in the wild, Chrome shipping every few weeks, and more teams moving pieces of desktop apps to the web, the gap between what you think RTL means and what users feel is still real.

Desktop reality in Java: orientation, mirroring, and the parts many teams miss

Java has serious internationalization plumbing already in place. Fonts for Arabic shaping are handled by the text pipeline. Input methods work. You get Locale, ResourceBundle, NumberFormat, and friends. Where developers slip is the part that is visible before any string is drawn: the way containers flow and the way widgets are oriented.

In Swing the flag that flips your mental model is component orientation. It tells a container to lay out child components from right to left. It also tells a label where to put its icon relative to the text, where a scroll bar sits, and how a split pane collapses. Layout managers respond differently. FlowLayout mirrors fine. BoxLayout is usually safe if you set orientation on the container before adding children. BorderLayout is fine because leading and trailing map to the correct visual sides. Absolute positioning is a trap because there is nothing to mirror. If your team likes to set bounds by hand you are now owning a second coordinate system.

For icons and affordances you need to be blunt. Mirroring art is not automatic. A back button that is an image will keep pointing to the left even when the layout is mirrored. Text direction has no say over pixels. Ship a mirrored asset for arrows, progress steps, play and skip, and any pictogram that suggests direction. Keep neutral icons neutral. A gear or a star does not need to flip.

Menus and trees are usually easy. The root aligns to the right. Expand and collapse triangles point the other way. Pay attention to text truncation. The default ellipsis often sits on the right which cuts the part readers need first. Put the ellipsis on the left in RTL so the end of the string remains visible. The same applies to tabs. The selected tab should be visually connected to its panel on the right edge. Some look and feel themes get this right. Some do not. Test it.

Text input is where users notice pain first. Mixed content is common. Think of an Arabic sentence that mentions an HTTP code or an API method. The caret will sometimes jump around if the control is not careful with the Unicode bidirectional algorithm. The desktop stack does the right thing most of the time, still you need to seed the control with the correct orientation when there is no text. A blank field is neutral, and neutral leans toward left to right. If the field is meant for a name or an address in RTL markets, set the orientation explicitly. For fields with numbers or codes, keep them left to right even inside an RTL form. Users expect numeric content to flow from left to right so digits read in the natural order for code and phone formats.

Finally in JavaFX this is getting better with each update, but a lot of teams still live on Swing. JavaFX controls understand node orientation and can flip layouts. The gaps are the same. Icons do not flip. Absolute positioning ignores orientation. If your app mixes Swing and JavaFX with the bridge, set orientation on both sides. You cannot assume it travels across the bridge.

Web reality in HTML and CSS: direction is one attribute, mirroring is a hundred decisions

On the web the word you are looking for is dir. Put dir equals rtl on a block and flow reverses. Text aligns to the right, list bullets move, and table columns start on the right. This is the plumbing part. The tricky part is everything CSS controls. Floats do not flip on their own. float right stays right even in RTL. So all the small spacers you put on the left are now on the wrong side. You will need a second stylesheet or a flag that rewrites rules at build time. People are building RTL forks of Bootstrap for this reason. If you keep it in one file, create classes like start and end and map them to left or right based on context. Today we do not have wide support for logical properties like margin inline start and end, so plan for duplication.

Forms need care. Placeholders, alignment, and caret behavior change with direction. For a form that contains names and free text, set direction to rtl on those inputs. For email and URL inputs, set them to left to right so users can type predictable English segments and symbols. HTML5 input type number is available, but browser support is a mixed bag and it treats digits as ASCII. Many users type Arabic Indian digits on mobile keyboards, and these may not validate in a simple client side check. Handle that on the server and display them as the user typed them where possible. When you print numbers inside RTL text, keep the number segment left to right so it reads properly. The Unicode algorithm will try to help, and it benefits from small cues. Add a space or a neutral separator around numbers so the algorithm can segment them.

Tables are fine if you let the browser handle headers and column order. Avoid flipping the DOM. Keep the logical order in source. Screen readers follow source and so does copy paste. If you flip the DOM to force visual order you will create a second set of bugs. Use dir on the table or the container around it and let cells flow. For zebra stripes and borders, double check collapsed borders in IE since it is pickier when direction changes. In my tests Chrome 23 and Firefox 17 behave the same in RTL as in LTR for table layout, while IE9 has a few quirks with overflow scroll on right aligned containers. IE10 looks better on Windows 8 but still test sticky headers and inner scroll panes.

Icons are the same story as desktop. A back chevron must point right in RTL. If you use sprite sheets, maintain an RTL sheet or reserve symmetric icons for core actions. The cost of confusing users with a wrong pointing arrow far exceeds the savings from one sprite sheet. For progress steppers and wizards, reverse the order of steps and make the next button sit on the left since the flow goes right to left. A lot of sites in Arabic are already doing this. Twitter and Facebook introduced RTL support and it brought many such choices into the spotlight.

Text, numbers, and the invisible characters that keep lines from breaking wrong

The heart of RTL is the Unicode bidirectional algorithm. It decides the visual order of characters when scripts with different direction mix in one line. You do not need to implement it. You do need to give it hints. Mixed content is where problems live. Think of an Arabic sentence that contains JSON or a three letter acronym from English. Without help you may see punctuation jump to the wrong side. This is where the left to right mark and the right to left mark help. These are invisible characters that anchor the direction around a token. Place them before or after short segments to keep them steady. They also help with parentheses and quotes around English text inside Arabic since neutral punctuation tries to mirror based on neighbors.

Digits are a cultural choice. Some markets prefer Arabic Indian digits, some are used to Western digits. In Java use NumberFormat with the target locale to render digits for display. In storage keep ASCII digits for parts that represent identifiers. This is the difference between content and code. An invoice that shows the total in Arabic Indian digits is friendly. A user id with Arabic Indian digits is hard to share with support or type into a log filter. Pick a policy and stick to it. Explain it to support so they do not ask users to type an order number that looks different on screen.

Sorting and searching are also part of the package. Collation in Arabic and Hebrew follows rules that differ from English. Use Collator in Java to compare strings in a way that users expect. In the database store text in UTF 8 and normalize to a consistent form. You will avoid invisible kind of bugs where a string that looks the same contains a different presentation form. This matters for caching keys and for search. Search indexes should strip bidi marks, which are invisible formatting characters. Keep them for display but do not let them break your matches.

Fonts make or break reading comfort. On Windows the usual stack is Tahoma and the new Segoe UI. On macOS and iOS you will see Geeza and Arabic types. On Android Jelly Bean there is Droid Arabic Naskh and Droid Arabic Kufi. Test fallback chains. Mixing fonts between Latin and Arabic glyphs can create uneven baselines and mismatched weights. The quick fix is to pick a base font that covers both scripts well for your platform and let the browser or the JVM choose fallbacks only for the rare glyph.

Desktop and web contrasted: where each shines and where each hurts

The desktop gives you one rendering stack and fewer engines. Once you set component orientation and pick the right layout managers, most of the mirroring happens without you chasing browser quirks. Input feels native. Scroll bars, selection handles, and caret moves are consistent with the system. The cost comes when you used absolute positions or when you carry around a lot of custom painting. Anything painted at fixed coordinates wants a second pass for RTL. Your art pipeline must also ship mirrored assets and you must wire them per locale.

The web gives you layout plasticity and responsive behavior, plus the reach that made you pick HTML in the first place. The pain is the CSS rulebook. Direction flips some defaults, then you re teach the rest of your rules to think in start and end terms. You are also at the mercy of older browsers that still matter in many markets. IE8 is common in a lot of offices and internet cafes. It supports dir just fine, but a few layout tricks you got used to in Chrome need a simpler fallback. With a disciplined style setup and a small set of helper classes you can ship a clean RTL view with little duplication.

In other words, desktop is about flipping containers. Web is about rewriting the grammar of your CSS. Both need careful art direction and both need thought in text entry.

Practical checklist for clean RTL support in Java and on the web

  • Start with content order Keep the DOM and widget hierarchy in logical order. Let the platform compute visual order.
  • Turn on orientation early In Swing and JavaFX set orientation on the top level container before adding children so layout managers pick it up.
  • Pick layout managers that mirror Flow, Box, and Border with leading and trailing are your friends. Avoid absolute positioning.
  • Ship mirrored icons Arrows, carets, play and skip, progress steps. Keep neutral icons neutral. Maintain two asset sets if needed.
  • Use dir smartly Put dir equals rtl on high level blocks. Override to left to right on code, emails, and URLs inside RTL pages.
  • Build CSS with start and end helpers Create classes that map to left or right per context. Avoid hard coding left and right across your app.
  • Keep inputs predictable Text areas and names follow page direction. Numbers, codes, and emails are left to right even in RTL forms.
  • Help the bidi algorithm Use the left to right mark and right to left mark around short mixed segments to keep punctuation steady.
  • Format numbers for readers Use locale driven format for display. Keep identifiers in ASCII digits for storage and support workflows.
  • Sort and search by locale Use Collator in Java. Normalize and strip bidi marks in your index. Store text in UTF 8.
  • Test on real browsers Chrome, Firefox, IE9 and IE8 if you have that audience, plus IE10 on Windows 8. Look at tables, overflow, and sticky elements.
  • Check truncation and ellipsis In RTL, show the end of the string. Put the ellipsis on the left when you must cut.
  • Audit copy and paste Copy a mixed line from your app into a plain editor and back. Look for broken order and hidden marks that confuse users.
  • Choose fonts with coverage Use a base that handles Arabic and Hebrew well on each platform. Avoid ugly fallback switches mid word.
  • Train support Explain digit choices and how order numbers look in each locale. They are your front line for real world RTL bugs.

Make right to left a first class layout choice and your app will feel native the day you turn it on.

General Software Software Engineering

Post navigation

Previous post
Next post
  • Digital Experience (94)
    • Experience Strategy (19)
    • Experience-Driven Commerce (5)
    • Multi-Channel Experience (9)
    • Personalization & Targeting (21)
    • SEO & Performance (10)
  • Marketing Technologies (92)
    • Analytics & Measurement (14)
    • Content Management Systems (45)
    • Customer Data Platforms (4)
    • Digital Asset Management (8)
    • Marketing Automation (6)
    • MarTech Stack & Strategy (10)
    • Technology Buying & ROI (3)
  • Software Engineering (310)
    • Business of Software (20)
    • Code (30)
    • Development Practices (52)
    • Digital Transformation (21)
    • Engineering Management (25)
    • General Software (82)
    • Productivity & Workflow (30)
    • Software Architecture (85)
    • Technical Implementation (23)
  • 2025 (12)
  • 2024 (8)
  • 2023 (18)
  • 2022 (13)
  • 2021 (3)
  • 2020 (8)
  • 2019 (8)
  • 2018 (23)
  • 2017 (17)
  • 2016 (40)
  • 2015 (37)
  • 2014 (25)
  • 2013 (28)
  • 2012 (24)
  • 2011 (30)
  • 2010 (42)
  • 2009 (25)
  • 2008 (13)
  • 2007 (33)
  • 2006 (26)

Ab Testing Adobe Adobe Analytics Adobe Target AEM agile-methodologies Analytics architecture-patterns CDP CMS coding-practices content-marketing Content Supply Chain Conversion Optimization Core Web Vitals customer-education Customer Data Platform Customer Experience Customer Journey DAM Data Layer Data Unification documentation DXP Individualization java Martech metrics mobile-development Mobile First Multichannel Omnichannel Personalization product-strategy project-management Responsive Design Search Engine Optimization Segmentation seo spring Targeting Tracking user-experience User Journey web-development

©2025 CMO & CTO | WordPress Theme by SuperbThemes