Right To Left direction support for multilingual (Arabic)

Hi there,

I've translated resources to Arabic. Now the question is how can I change directions and paddings (right to left) when user changes the language from English to Arabic?

Thanks in advance

Ali

hi ali

do you have answer to your question


"Hi there,

I've translated resources to Arabic. Now the question is how can I change directions and paddings (right to left) when user changes the language from English to Arabic?

Thanks in advance

Ali "

me to need to change the direction

i know that i have to create another theam like darkorange-ar
but i dont know when in the code i can change the theme(not all the places).


thank you!

Hi,

If you are using 2.0, then I can send you some working solution for that

abidz005 wrote:
It would be great if you can post it here

Hi,

The whole solution is large, but here is how to do it.

here are the steps

1-create a copy of styles.css and name it styles_rtl.css which you need to modify for directions. I have one that already working.

in your Head.cshtml file which is located under each theme directory do the following

using Nop.Web.Framework;
@using Nop.Web.Framework;
@using Nop.Core;
@using Nop.Core.Infrastructure;
@{
    var workContext = EngineContext.Current.Resolve<IWorkContext>();
    string s = workContext.WorkingLanguage.LanguageCulture.ToString();
    if (s.CompareTo("he-IL") == 0){
        <link href="@Html.ResolveUrl("~/Themes/nopClassic/Content/styles_rtl.css")" rel="stylesheet" type="text/css" />
    }else{
        <link href="@Html.ResolveUrl("~/Themes/nopClassic/Content/styles.css")" rel="stylesheet" type="text/css" />
    }
}

The above code will load the style sheet.
Suggestion
it would be nice to have a field in the language table to tell the direction. this could make life more easy.

--------------
We need to make some changes for the right to left i.e ThreeColumns.cshtml

using Nop.Core;
@using Nop.Core.Infrastructure;
@{
    var workContext = EngineContext.Current.Resolve<IWorkContext>();
    if(workContext.WorkingLanguage!=null)
    {
        string str = workContext.WorkingLanguage.LanguageCulture;
        if(str.CompareTo("he-IL")==0)
        {
            Layout = "~/Views/Shared/_ColumnsThree_rtl.cshtml"; 
        }
        else
        {
            Layout = "~/Views/Shared/_ColumnsThree_ltr.cshtml";  
        }
    }
}
@RenderBody()

The above code will load the right file if the language is hebrew, then the layout will be _rtl otherwise ltr


------------
Below is the content of _ColumnsThree_rtl.cshtml. Please realize the changes that I made where the comments are, which is flip between left and right.

@{
    Layout = "~/Views/Shared/_Root.cshtml";
}
@{
   
    //current category ID
    int currentCategoryId = 0;
    if (Url.RequestContext.RouteData.Values["controller"].ToString().Equals("catalog", StringComparison.InvariantCultureIgnoreCase) &&
        Url.RequestContext.RouteData.Values["action"].ToString().Equals("category", StringComparison.InvariantCultureIgnoreCase))
    {
        currentCategoryId = Convert.ToInt32(Url.RequestContext.RouteData.Values["categoryId"].ToString());
    }


    //current manufacturer ID
    int currentManufacturerId = 0;
    if (Url.RequestContext.RouteData.Values["controller"].ToString().Equals("catalog", StringComparison.InvariantCultureIgnoreCase) &&
        Url.RequestContext.RouteData.Values["action"].ToString().Equals("manufacturer", StringComparison.InvariantCultureIgnoreCase))
    {
        currentManufacturerId = Convert.ToInt32(Url.RequestContext.RouteData.Values["manufacturerId"].ToString());
    }
}
<div class="master-wrapper-leftside-3">
 @if (IsSectionDefined("right"))
    {
        @RenderSection("right")
    }
    else
    {
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.BeforeRightSideColumn })
        <div class="clear">
        </div>
        @Html.Action("MiniShoppingCart", "ShoppingCart")
        <div class="clear">
        </div>
        @Html.Action("NewsletterBox", "Newsletter")
        <div class="clear">
        </div>
        @Html.Action("RecentlyViewedProductsBlock", "Catalog")       
        <div class="clear">
        </div>       
        @Html.Action("PollBlock", "Poll", new { systemKeyword = "RightColumnPoll" })
        <div class="clear">
        </div>
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.AfterRightSideColumn })
    }
@*
    @if (IsSectionDefined("left"))
    {
        @RenderSection("left")
    }
    else
    {
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.BeforeLeftSideColumn })
        <div class="clear">
        </div>
        @Html.Action("CategoryNavigation", "Catalog", new { currentCategoryId = currentCategoryId })
        <div class="clear">
        </div>
        @Html.Action("ManufacturerNavigation", "Catalog", new { currentManufacturerId = currentManufacturerId })
        <div class="clear">
        </div>
        @Html.Action("PopularProductTags", "Catalog")
        <div class="clear">
        </div>
        @Html.Action("InfoBlock", "Common")
        <div class="clear">
        </div>
        @Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" })
        <div class="clear">
        </div>
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.AfterLeftSideColumn })
    }
    *@
</div>
<div class="master-wrapper-center-3">
    <div class="master-wrapper-cph-3">       
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.BeforeMainColumn })
        @RenderBody()
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.AfterMainColumn })
    </div>
</div>
<div class="master-wrapper-rightside-3">
 @if (IsSectionDefined("left"))
    {
        @RenderSection("left")
    }
    else
    {
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.BeforeLeftSideColumn })
        <div class="clear">
        </div>
        @Html.Action("CategoryNavigation", "Catalog", new { currentCategoryId = currentCategoryId })
        <div class="clear">
        </div>
        @Html.Action("ManufacturerNavigation", "Catalog", new { currentManufacturerId = currentManufacturerId })
        <div class="clear">
        </div>
        @Html.Action("PopularProductTags", "Catalog")
        <div class="clear">
        </div>
        @Html.Action("InfoBlock", "Common")
        <div class="clear">
        </div>
        @Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" })
        <div class="clear">
        </div>
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.AfterLeftSideColumn })
    }
@*
    @if (IsSectionDefined("right"))
    {
        @RenderSection("right")
    }
    else
    {
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.BeforeRightSideColumn })
        <div class="clear">
        </div>
        @Html.Action("MiniShoppingCart", "ShoppingCart")
        <div class="clear">
        </div>
        @Html.Action("NewsletterBox", "Newsletter")
        <div class="clear">
        </div>
        @Html.Action("RecentlyViewedProductsBlock", "Catalog")       
        <div class="clear">
        </div>       
        @Html.Action("PollBlock", "Poll", new { systemKeyword = "RightColumnPoll" })
        <div class="clear">
        </div>
        @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.AfterRightSideColumn })
    }
    *@
</div>

I modified the code to work better for any language as follow

add a string in the language resources called "Language.Direction" with the value rtl, then retrieve the direction as follow

@using Nop.Core;
@using Nop.Core.Infrastructure;
@using Nop.Services.Localization;
@{
    string str = EngineContext.Current.Resolve<ILocalizationService>().GetResource("Language.Direction");
    if (str.CompareTo("rtl") == 0){
        Layout = "~/Views/Shared/_ColumnsThree_rtl.cshtml";  
    }else{
            Layout = "~/Views/Shared/_ColumnsThree_ltr.cshtml";   
        }
    }
}

Thanks for this contribution. As I know "RTL developers" prefer to don't make any changes to layout . They prefer to create a new CSS file for RTL version. Is that true?

i have made an rtl dark orange theme, I had to make some code changes since some of the pages has style in the html.
i have changed all the style to classes
it would be great if change it as well in the next version.

I can make a list of all the changes if it help.

then when u change language u change the theme as well

hezyz wrote:
Sure. Please contribute it

a.m. wrote:

The issue is that css alone will not be enough to support right to left unless you make changes to the layout. html tables can do the rtl easy.