Typography
direction
Setting the direction of text.
Overview
| Class | Declarations |
|---|---|
direction:ltr | direction: ltr;
|
direction:rtl | direction: rtl;
|
There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.
Examples
Set left-to-right direction
Use direction:ltr for content that should flow left to right regardless of the surrounding document direction.
<p class="direction:ltr">Invoice #1048</p>Generated CSS
@layer utilities { .direction\:ltr { direction: ltr }}Set right-to-left direction
Use direction:rtl for right-to-left content embedded in a left-to-right page.
<p class="direction:rtl">Right-to-left text</p>Prefer semantic document direction
Use the dir attribute for user content and document-level language direction. Use the utility for localized component exceptions.
<section dir="rtl"> <code class="direction:ltr">npm install</code></section>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<p class="direction:rtl@sm direction:ltr@print">...</p>