如何在从右到左的文化本地化 ASP.Net 核心 2.2 应用程序中启用 RTL 模式？

Question

我启用了本地化和全球化配置，需要在 RTL Culture 中添加 RTL 模式。我该怎么做？

将 ASP.Net Core 2.2 与 razor 页面和个人帐户配置一起使用

// 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 文化时启用 RTL 模式

Answer 1

为 RTL 样式创建一个新的 css 文件，例如rtl.css

body {
    direction:rtl;
}

然后在 _layout.cshtml 文件中检查当前文化文本方向，并在头部部分包含相关的 css 文件；

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

Answer 2

.Net Core 5.0

您可以使用 bootstrap-rtl.css 并将 lang="ar" 和 dir="rtl" 添加到 html 标签。喜欢<html lang="ar" dir="rtl">

因此，要使其动态化并与 ltr 一起使用，请将以下代码添加到 _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" />
    }

更多信息https://getbootstrap.com/docs/5.0/getting-started/rtl/

如何在从右到左的文化本地化 ASP.Net 核心 2.2 应用程序中启用 RTL 模式？

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

asp.net-core

razor

localization

right-to-left

globalization