Setup
To globally setup the RTL direction adding a dir attribute on the html as shown below:
<html dir="rtl">
<!-- HTML markup -->
</html>Logical CSS Properties
Metronic utilizes the logical CSS properties as the default method for handling RTL support.
This approach simplifies RTL support by using context-aware properties that adjust based on the document's text direction.
<!-- Using logical properties -->
<div class="text-start ps-5">
Example text
</div>RTL Modifier
For specific cases, you can use the
rtl:*
Tailwind modifier to easily control alignments for both LTR and RTL directions.
<!-- Using rtl modifier -->
<div class="text-left pl-5 rtl:text-right rtl:pr-5">
Example text
</div>