Overview
When working with Right-to-Left (RTL) languages like Hebrew and Arabic in forms, mixing in Left-to-Right (LTR) content such as brand names, URLs, or punctuation can cause unexpected display issues. This guide explains how to properly handle mixed direction text to ensure correct display.
Common display issues
Text may appear in unexpected orders or orientations when:
Mixing brand names (LTR) within RTL text
Including URLs or links in RTL content
Using hyphens or special characters
Combining numbers with RTL text
Solution
Basic implementation
When mixing LTR content into a RTL language, wrap any LTR text in a span element with the dir="ltr" attribute:
שם החברה שלך: <span dir="ltr">Company Name</span>
Real-world example
For opt-in text containing mixed content:
Original (problematic):
סמן את תיבות הסימון להלן אם אינך מעוניין לקבל מ-Company Name ומהשותפים המורשים שלה...
Corrected version:
סמן את תיבות הסימון להלן אם אינך מעוניין לקבל מ־<span dir="ltr">Company Name</span> ומ<a href="https://www.company-name.com" target="_blank">השותפים המורשים שלה</a>...
Best practices
Always mark as LTR:
Company names in Western characters
URLs and email addresses
Product codes or model numbers
Hyphens and special characters when used with LTR text
Handling links
For links containing URLs within the display text:
<a href="https://www.company-name.com" dir="ltr">www.company-name.com</a>
Testing
Before deploying, verify:
Text appears in the correct order
Links and URLs are properly aligned
Numbers and special characters display correctly
Content looks correct in both desktop and mobile views
Troubleshooting
If text still appears incorrectly:
Check that all LTR content is wrapped in
<span dir="ltr">tagsEnsure special characters and hyphens are included within the LTR spans when appropriate