Language
Edit (1/1/0001)

How to support right-to-left (RTL) in ADAFSA

Right-to-left (RTL) is a writing system used by languages such as Arabic. If page needs to support this language, you'll need to ensure that it supports RTL layouts. In this guide, we'll show you how to use the CultureHelper class to determine whether your application is running in an RTL context, and how to use this information to apply the correct styles to UI.

Step 1: Check if the page is RTL

The CultureHelper class provides a method called IsRtl that you can use to determine whether the current context is an RTL context. You can use this method to conditionally apply different styles based on whether the page is RTL or not.

Here's an example of how to use IsRtl in your code:

@if (CultureHelper.IsRtl)
{
    <abp-style-bundle>
        <abp-style src="/Pages/index.rtl.css" />
    </abp-style-bundle>
}
else
{
    <abp-style-bundle>
        <abp-style src="/Pages/index.css" />
    </abp-style-bundle>
}
<div class="title">
    <p>.</p>
</div>

In this example, we're checking whether the page is RTL using CultureHelper.IsRtl, and then including either index.css or index.rtl.css depending on the result.

Step 2: Create stylesheets

defualt css: index.css

.title {
    background: green;
}

To support RTL, you'll need to create an RTL stylesheet that contains the styles necessary to properly layout UI in an RTL context.

index.rtl.css

.title {
    background: red;
}

Warnning : Don't forget creating the rtl.css file!

En language (LTR):

image

Ar language (RTL):

image

How to switch between languages

to allow users to switch between different languages in the application, you can use the Abp/Languages/Switch API endpoint. This endpoint allows you to change the application's current culture to a different language.

Here's an example of how you can add language switch links to the application's UI:

English language switch link:

/Abp/Languages/Switch?cultu<re=en&uiCulture=en&returnUrl=%2F

Arabic language switch link :

/Abp/Languages/Switch?culture=ar&uiCulture=ar&returnUrl=%2F"

In this example, we have two links that point to the /Abp/Languages/Switch API endpoint. Each link includes a culture parameter, which sets the application's current culture to either en (for English) or ar (for Arabic).

In this document