RTL (Right-to-Left) stable

VelinStyle supports Arabic, Hebrew, Persian, and other RTL languages through CSS logical properties and optional RTL-oriented builds. Deutsch: Rechts-nach-links

Maturity: Logical spacing/utilities and dir support are stable.

When to use

Set dir="rtl" (and a matching lang) on <html> for RTL locales.
Prefer logical utilities (mbs, pis, …) so LTR and RTL share one stylesheet.

When not

Do not mirror LTR pages with physical left/right hacks if logical properties suffice.
Do not omit lang when setting dir — screen readers need both.

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="/dist/velinstyle.min.css">
</head>
<body>
  <div class="container py-5">
    <h1 class="velin-mbe-3">مرحباً بالعالم</h1>
    <button class="velin-btn velin-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:

<!-- velin-mis-3 = margin-inline-start: 1rem -->
<span class="velin-badge velin-mis-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.

Breadcrumb — separators flip direction automatically.
Pagination — previous/next arrows swap sides.
Accordion — expand chevron appears on the inline-start side.
Drawer — start and end placements follow logical direction.
Input Group — addons respect inline direction.