How to enable RTL mode in Right-To-Left Culture Localization ASP.Net core 2.2 application?

Asked 13/7, 2019 at 21:3 Answered 15/4, 2021 at 22:32

Solved asp.net-core razor localization right-to-left globalization

I have enabled Localization and Globalization configuration and need to add RTL mode in RTL Culture. How Can i do it?

Using ASP.Net Core 2.2 with razor pages and Individual account configuration

// Configuration Of Localizaion
            services.AddLocalization(opts =>
            {
                opts.ResourcesPath = "CultureResources";
            });

            //services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

            services.AddMvc()
                    .AddViewLocalization(opts => { opts.ResourcesPath = "CultureResources"; })
                    .AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix)
                    .AddDataAnnotationsLocalization()
                .SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
            .AddRazorPagesOptions(options =>
            {
                options.AllowAreas = true;
                options.Conventions.AuthorizeAreaFolder("Identity", "/Account/Manage");
                options.Conventions.AuthorizeAreaPage("Identity", "/Account/Logout");
            });

            services.Configure<RequestLocalizationOptions>(opt =>
            {
                var supportedCulutures = new List<CultureInfo>
                {
                    new CultureInfo("en"),
                    new CultureInfo("en-US"),
                    new CultureInfo("ar-EG")
                };

                opt.DefaultRequestCulture = new RequestCulture("en-US");
                // Formating numbers, date, etc.
                opt.SupportedCultures = supportedCulutures;
                // UI strings that we have localized 
                opt.SupportedUICultures = supportedCulutures;
            });

RTL mode enabled when choose RTL Culture

Lomasi answered 13/7, 2019 at 21:3 Comment(0)

Create a new css file for RTL styles e.g. rtl.css

body {
    direction:rtl;
}

Then in the _layout.cshtml file check for current culture text direction and include the relevant css file in the head section;

@using System.Globalization
@if(CultureInfo.CurrentCulture.TextInfo.IsRightToLeft) {
    <link rel="stylesheet" type="text/css" href="rtl.css">
}

Koontz answered 13/7, 2019 at 21:52 Comment(0)

For .Net Core 5.0

You can use bootstrap-rtl.css and adding lang="ar" and dir="rtl" to html tag. Like <html lang="ar" dir="rtl">

So to make it dynamic and work with ltr add the following code to _Layout.cshtml

@{
var culture = Context.Features.Get<Microsoft.AspNetCore.Localization.IRequestCultureFeature>();
var dir = culture.RequestCulture.UICulture.TextInfo.IsRightToLeft ? "rtl" : "ltr";
var twoLetter = culture.RequestCulture.UICulture.TwoLetterISOLanguageName;
}


 <!DOCTYPE html>
<html lang="@twoLetter" dir="@dir">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>

    <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    @if (dir == "rtl")
    {
    <link href="~/lib/bootstrap-rtl/css/bootstrap-rtl.css" rel="stylesheet" />
    }

More information https://getbootstrap.com/docs/5.0/getting-started/rtl/

Sigrid answered 15/4, 2021 at 22:32 Comment(0)

Recommended topics

Hot tags