CSS Direction Tool

Explore CSS direction, unicode-bidi, and writing modes with live preview

⚙️ Settings

👁️ Live Preview

📝 Generated CSS

CSS

👉 direction

Sets the base text direction. ltr for left-to-right (English, Chinese), rtl for right-to-left (Arabic, Hebrew).

🔄 unicode-bidi

Controls how bidirectional text is handled. isolate is recommended for most cases. bidi-override forces direction regardless of content.

🌐 Mixed Content

When LTR and RTL text are mixed, the browser's bidi algorithm determines rendering. Use unicode-bidi and dir attributes for fine control.

✅ Best Practices

Prefer HTML dir attribute over CSS direction. Use logical properties (inline-start/end) instead of left/right for RTL-friendly layouts.