SVG Right-to-Left Text Direction
The direction property sets a text element's base writing direction, essential for correctly rendering Arabic, Hebrew, and other RTL scripts.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Setting Right-to-Left Base Direction
Setting direction: rtl on an SVG text element establishes right-to-left as that element's base writing direction, causing text content to flow and align correctly for languages like Arabic and Hebrew that read from right to left, rather than incorrectly rendering RTL script content in a left-to-right flow.
- direction: rtl establishes right-to-left as the element's base writing direction
- Essential for correctly rendering Arabic, Hebrew, and other RTL scripts
- Prevents RTL content from incorrectly rendering in left-to-right flow
Handling Mixed-Direction Text with unicode-bidi
When a primarily RTL text block contains embedded LTR content like an English brand name or a number, the unicode-bidi property (often combined with direction) controls how that mixed-direction content is algorithmically handled, ensuring embedded LTR segments render correctly within the surrounding RTL flow rather than becoming visually scrambled.
- unicode-bidi controls handling of mixed-direction content within one text block
- Ensures embedded LTR segments (like brand names) render correctly within RTL flow
- Prevents mixed-direction text from becoming visually scrambled or reordered incorrectly
Frequently Asked Questions
Does setting direction: rtl also mirror the layout of icons or other visual elements?
No, direction: rtl specifically affects text flow and alignment — mirroring the broader visual layout of icons, images, or interface chrome for an RTL audience requires separate, deliberate design and CSS work beyond just the text direction property.
Is direction: rtl sufficient on its own for full Arabic or Hebrew SVG text support?
It's the essential foundation, but ensuring the chosen font actually supports the specific script's glyphs, and testing mixed-content edge cases with unicode-bidi, are also necessary for fully correct RTL text rendering.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG