Rechts-nach-links (RTL) stable

VelinStyle unterstützt Arabisch, Hebräisch, Persisch und andere RTL-Sprachen über CSS Logical Properties und optionale RTL-orientierte Builds. English: RTL

Reifegrad

Logische Spacing-/Utilities und dir-Support sind stable.

Wann nutzen

dir="rtl" (und passendes lang) auf <html> für RTL-Locales setzen.
Logische Utilities bevorzugen (mbs, pis, …), damit LTR und RTL ein Stylesheet teilen.

Wann nicht

LTR-Seiten nicht mit physischen Left/Right-Hacks spiegeln, wenn Logical Properties reichen.
lang nicht weglassen, wenn dir gesetzt wird — Screenreader brauchen beides.

RTL aktivieren

Setzen Sie das Attribut dir="rtl" auf Ihrem <html>-Element und laden Sie optional den RTL-orientierten Build:

<html lang="ar" dir="rtl">
<head>
  <!-- RTL: dir auf html setzen; Hauptbundle (Logical Properties) -->
  <link rel="stylesheet"
        href="/dist/velinstyle.min.css">
</head>
<body>
  <div class="velin-container velin-pb-6">
    <h1 class="velin-mbe-3">مرحباً بالعالم</h1>
    <button class="velin-btn velin-btn--primary">ابدأ الآن</button>
  </div>
</body>
</html>

Logical Properties

VelinStyle nutzt durchgängig CSS Logical Properties. So wird aus margin-left margin-inline-start und aus padding-right padding-inline-end. Diese Properties spiegeln sich in RTL-Kontexten automatisch.

Physische Property	Logical Property	LTR-Ergebnis	RTL-Ergebnis
`margin-left`	`margin-inline-start`	Linker Margin	Rechter Margin
`margin-right`	`margin-inline-end`	Rechter Margin	Linker Margin
`padding-left`	`padding-inline-start`	Linkes Padding	Rechtes Padding
`border-left`	`border-inline-start`	Linker Border	Rechter Border
`text-align: left`	`text-align: start`	Links ausrichten	Rechts ausrichten

RTL Utility-Klassen

Preferiere die logischen Spacing-Utilities aus 1.2.0: .velin-mi-* (margin-inline), .velin-pi-* (padding-inline), .velin-mbs-* / .velin-mbe-* (block-start/end). Einzelne inline-start/inline-end-Steps (wie mis/mie) gehören zur geplanten Utility Engine — bis dahin Logical Properties im Projekt-CSS oder Gap auf Flex-Eltern nutzen.

<div class="velin-flex velin-gap-3 velin-items-center">
  Label <span class="velin-badge">Neu</span>
</div>

<div class="velin-flex" style="justify-content:space-between">
  <span class="velin-font-bold">Start</span>
  <span>Ende</span>
</div>

<div class="velin-pi-4 velin-border-inline">Eingerückter Inhalt</div>

Label Neu

Start Ende

Eingerückter Inhalt mit logischem Rand

Das Attribut `dir`

Sie können RTL auf einzelne Abschnitte beschränken, indem Sie dir auf beliebigen Elementen setzen. Nützlich für mehrsprachige Seiten:

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

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

English Title

This paragraph flows left-to-right.

عنوان عربي

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

Komponenten-Support

Alle VelinStyle-Komponenten — einschließlich Navbar, Breadcrumb, Pagination, Accordion und Stepper — sind für RTL-Rendering getestet. Richtungshinweisende Icons (Pfeile, Chevrons) werden bei dir="rtl" automatisch per CSS-Transform gespiegelt.

Breadcrumb — Trenner wechseln die Richtung automatisch.
Pagination — Vorher/Weiter-Pfeile tauschen die Seiten.
Accordion — Expand-Chevron erscheint auf der Inline-Start-Seite.
Drawer — Placements start und end folgen der logischen Richtung.
Input Group — Addons respektieren die Inline-Richtung.