RTL (Right-to-Left) Support

HighRise provides comprehensive RTL support for building interfaces in right-to-left languages like Arabic, Hebrew, Urdu, and Persian.

How do I enable RTL mode?

Pass the dir prop to HLContentWrap with the value 'rtl'. This automatically configures all child components to render in RTL mode.

<script setup>
import { HLContentWrap, HLButton } from '@platform-ui/highrise'
</script>

<template>
  <HLContentWrap dir="rtl">
    <!-- All components inside will automatically support RTL -->
    <HLButton>مرحبا</HLButton>
  </HLContentWrap>
</template>

What happens automatically in RTL mode?

When dir="rtl" is set, HighRise automatically handles:

Layout & Positioning

• Text direction reverses from left-to-right to right-to-left
• Flex and grid layouts flip horizontally
• Padding and margins using logical properties (e.g., padding-inline-start) automatically mirror

Component Placements

Components with directional placement props automatically flip:

When you specify placement="left", HighRise automatically renders it on the right in RTL mode, and vice versa. This ensures semantic correctness—"left" means "start" which is visually right in RTL layouts. You don't need to manually flip placements based on direction.

Component	Prop	LTR Behavior	RTL Behavior
HLTooltip	placement="left"	Shows on left	Shows on right
HLColorPicker	placement="bottom-start"	Bottom-left	Bottom-right
HLTabs	placement="left"	Tabs on left	Tabs on right
HLDivider	titlePlacement="left"	Title on left	Title on right
HLNotification	placement="top-right"	Top-right corner	Top-left corner

What do I need to configure manually?

1. Setting the Direction Prop

Always set dir on HLContentWrap based on your application's current language:

<script setup>
import { computed, ref } from 'vue'
import { HLContentWrap } from '@platform-ui/highrise'

const currentLanguage = ref('ar') // Arabic
const direction = computed(() => (currentLanguage.value === 'ar' ? 'rtl' : 'ltr'))
</script>

<template>
  <HLContentWrap :dir="direction">
    <!-- Your app content -->
  </HLContentWrap>
</template>

2. Using Logical CSS Properties

When writing custom styles, use logical properties instead of physical ones:

❌ Avoid - Physical Properties

.my-component {
  margin-left: 16px;
  padding-right: 8px;
  border-left: 1px solid gray;
  left: 0;
}

✅ Prefer - Logical Properties

.my-component {
  margin-inline-start: 16px;
  padding-inline-end: 8px;
  border-inline-start: 1px solid gray;
  inset-inline-start: 0;
}

3. Directional Icons and Assets

Icons with directional meaning (arrows, chevrons) should flip in RTL:

<script setup>
import { ArrowRightIcon } from '@gohighlevel/ghl-icons/24/outline'
import { getDirection } from '@platform-ui/highrise'

const direction = getDirection()
</script>

<template>
  <button :class="{ 'transform scale-x-[-1]': direction === 'rtl' }">
    <ArrowRightIcon />
    Next
  </button>
</template>

How do I access the current direction?

Use the getDirection() utility to access the current text direction:

<script setup>
import { getDirection } from '@platform-ui/highrise'

const direction = getDirection() // Returns Ref<'ltr' | 'rtl'>

// Use in computed properties
const alignmentClass = computed(() => (direction.value === 'rtl' ? 'text-right' : 'text-left'))
</script>