Skip to main content
VelinStyle v0.8.0
  1. Docs
  2. Getting Started
  3. RTL

RTL (Right-to-Left)

VelinStyle fully supports right-to-left languages like Arabic, Hebrew, and Persian through CSS logical properties and a dedicated RTL stylesheet.

Enabling RTL

Set the dir="rtl" attribute on your <html> element and optionally load the RTL-specific build: 

<html lang="ar" dir="rtl">
<head>
  <!-- RTL: set dir on html; use the main bundle (logical properties) -->
  <link rel="stylesheet"
        href="https://unpkg.com/@birdapi/velinstyle@0.8.0/dist/velinstyle.min.css">
</head>
<body>
  <div class="container py-5">
    <h1 class="mb-3">مرحباً بالعالم</h1>
    <button class="btn btn-primary">ابدأ الآن</button>
  </div>
</body>
</html>

Logical Properties

VelinStyle uses CSS logical properties throughout. This means margin-left becomes margin-inline-start and padding-right becomes padding-inline-end. These properties automatically flip in RTL contexts.

Physical Property Logical Property LTR Result RTL Result
margin-left margin-inline-start Left margin Right margin
margin-right margin-inline-end Right margin Left margin
padding-left padding-inline-start Left padding Right padding
border-left border-inline-start Left border Right border
text-align: left text-align: start Aligns left Aligns right

RTL Utility Classes

Spacing and positioning utilities use logical naming conventions: 

<!-- ms-3 = margin-inline-start: 1rem -->
<span class="badge bg-primary ms-3">New</span>

<!-- me-auto = margin-inline-end: auto -->
<div class="d-flex">
  <span class="me-auto">Start</span>
  <span>End</span>
</div>

<!-- ps-4 = padding-inline-start: 1.5rem -->
<div class="ps-4 border-start">Indented content</div>
Label New
Start End
Indented content with logical border

The dir Attribute

You can scope RTL to individual sections using the dir attribute on any element. This is useful for multilingual pages: 

<!-- English section -->
<div dir="ltr" lang="en">
  <h2>English Title</h2>
  <p>This paragraph flows left-to-right.</p>
</div>

<!-- Arabic section -->
<div dir="rtl" lang="ar">
  <h2>عنوان عربي</h2>
  <p>هذه الفقرة تسير من اليمين إلى اليسار.</p>
</div>
English Title

This paragraph flows left-to-right.

عنوان عربي

هذه الفقرة تسير من اليمين إلى اليسار.

Component Support

All VelinStyle components — including Navbar, Breadcrumb, Pagination, Accordion, and Stepper — are tested for RTL rendering. Icons that indicate direction (arrows, chevrons) are automatically mirrored via CSS transforms when dir="rtl" is set.

Theme wählen