Direction
ui-direction sets the native dir attribute on itself and uses display: contents, so it adds no box of its own.
Everything inside inherits the direction: text alignment, logical CSS properties such as margin-inline-start, and
the keyboard behaviour of components that use focusgroup, where Left and Right swap in right-to-left content.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Direction demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
<style>
.demo-narrow {
width: min(100%, calc(var(--spacing) * 88));
}
.demo-stack-tight {
display: grid;
gap: calc(var(--spacing) * 2);
}
.demo-row-tight {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--spacing) * 2);
}
</style>
</head>
<body>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/breadcrumb.html"></import-element>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/direction.html"></import-element>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/input.html"></import-element>
<ui-direction dir="rtl">
<div class="demo-narrow demo-stack-tight">
<ui-breadcrumb label="مسار التنقل">
<ui-breadcrumb-list>
<ui-breadcrumb-item><ui-breadcrumb-link href="#">الرئيسية</ui-breadcrumb-link></ui-breadcrumb-item>
<ui-breadcrumb-separator></ui-breadcrumb-separator>
<ui-breadcrumb-item><ui-breadcrumb-link href="#">المكونات</ui-breadcrumb-link></ui-breadcrumb-item>
<ui-breadcrumb-separator></ui-breadcrumb-separator>
<ui-breadcrumb-item><ui-breadcrumb-page>الاتجاه</ui-breadcrumb-page></ui-breadcrumb-item>
</ui-breadcrumb-list>
</ui-breadcrumb>
<ui-input aria-label="بحث" placeholder="ابحث في الوثائق"></ui-input>
<div class="demo-row-tight">
<ui-button>حفظ</ui-button>
<ui-button variant="outline">إلغاء</ui-button>
</div>
</div>
</ui-direction>
</body>
</html>Examples
Keyboard in right-to-left content
Tabs, toggle groups and other components built on focusgroup read the direction. In this right-to-left tab list
the first tab is on the right, and the Left arrow moves to the next tab.
إعدادات الحساب.
تغيير كلمة المرور.
إدارة الفريق.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Direction demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
<style>
.demo-narrow {
width: min(100%, calc(var(--spacing) * 88));
}
.demo-text {
margin: 0;
font-size: var(--text-sm);
}
</style>
</head>
<body>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/direction.html"></import-element>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/tabs.html"></import-element>
<ui-direction dir="rtl">
<div class="demo-narrow">
<ui-tabs value="account">
<ui-tabs-list>
<ui-tabs-trigger value="account">الحساب</ui-tabs-trigger>
<ui-tabs-trigger value="password">كلمة المرور</ui-tabs-trigger>
<ui-tabs-trigger value="team">الفريق</ui-tabs-trigger>
</ui-tabs-list>
<ui-tabs-content value="account"><p class="demo-text">إعدادات الحساب.</p></ui-tabs-content>
<ui-tabs-content value="password"><p class="demo-text">تغيير كلمة المرور.</p></ui-tabs-content>
<ui-tabs-content value="team"><p class="demo-text">إدارة الفريق.</p></ui-tabs-content>
</ui-tabs>
</div>
</ui-direction>
</body>
</html>Left to right inside right to left
Directions nest. dir="ltr" restores left-to-right for a part of the page, such as a code sample.
حمّل المكوّنات بالوسم التالي:
<import-element from="ui.html">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Direction demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
<style>
.demo-narrow {
width: min(100%, calc(var(--spacing) * 88));
}
.demo-stack-tight {
display: grid;
gap: calc(var(--spacing) * 2);
}
.demo-text {
margin: 0;
font-size: var(--text-sm);
}
</style>
</head>
<body>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/direction.html"></import-element>
<ui-direction dir="rtl">
<div class="demo-narrow demo-stack-tight">
<p class="demo-text">حمّل المكوّنات بالوسم التالي:</p>
<ui-direction dir="ltr">
<p class="demo-text"><code><import-element from="ui.html"></code></p>
</ui-direction>
</div>
</ui-direction>
</body>
</html>API
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
dir |
"ltr" | "rtl" |
"ltr" |
Text direction for the content. Written back to the native dir attribute, so it is always present on the element. |
Slots
| Slot | Description |
|---|---|
| (default) | The content that takes the direction. |
Accessibility
The native dir attribute is what browsers and assistive technology use, so screen readers and text selection
follow the direction. Set lang alongside it (for example lang="ar") when the content is in another language.