RTL

Aggarly Platform supports right-to-left (RTL) languages such as Arabic through semantic HTML attributes, logical CSS projects, and dedicated SCSS mixins. RTL behavior is handled at the system level.

How RTL Works

RTL is enabled by setting dir="rtl" on the document root or a workspace member container.
Layout direction, spacing, and typography adapt automatically.
Components do not require per-component RTL configuration.

Logical CSS Projects

All layouts in the design system use logical projects instead of physical directions. This allows layouts to flip automatically between LTR and RTL.

.card {
  padding-inline: 16px;
  margin-inline-start: 8px;
  inset-inline-end: 0;
}

RTL SCSS Mixin

When conditional styling is unavoidable, the design system provides an explicit RTL mixin. This keeps RTL logic localized and readable.

@use "@/design-system/scss/mixins/rtl" as rtl;

.element {
  margin-inline-start: 8px;

  @include rtl.rtl {
    margin-inline-start: 0;
    margin-inline-end: 8px;
  }
}

Typography in RTL

Typography automatically switches to the Arabic font when dir="rtl" is present. This behavior is defined in global styles and does not require component-level overrides.

body {
  font-family: tokens.$font-family-sans;
}

[dir="rtl"] body {
  font-family: tokens.$font-family-arabic;
}

RTL Rules

Never use physical directional projects such as left / right.
Always prefer logical projects and semantic alignment.
Test every component in both LTR and RTL contexts.
Treat RTL regressions as blocking issues.

RTL SCSS Mixin

When conditional styling is unavoidable, the design system provides an explicit RTL mixin. This keeps RTL logic localized and readable.

@use "@/design-system/scss/mixins/rtl" as rtl;

.element {
  margin-inline-start: 8px;

  @include rtl.rtl {
    margin-inline-start: 0;
    margin-inline-end: 8px;
  }
}

Typography in RTL

Typography automatically switches to the Arabic font when dir="rtl" is present. This behavior is defined in global styles and does not require component-level overrides.

body {
  font-family: tokens.$font-family-sans;
}

[dir="rtl"] body {
  font-family: tokens.$font-family-arabic;
}