New Post: Localizing for Right-to-Left (RTL) Websites

Hi DBailey635,

The common practice we are doing for implementing bilingual site is as follows (basic details about implementation of templates and user controls).

1. Add new language (Arabic) to composite.
2. Create separate master templates for English and Arabic pages from C1 composite panel (Ex: En_HomeTemplate.master, Ar_HomeTemplate.master).
3. Create a folder named “Arabic” inside “website -> Frontend” folder and put all the Arabic page related style sheets (CSS), java scripts, images, fonts etc. files inside it.
4. Create a folder named “English” inside “website -> Frontend” folder and put all the English page related style sheets (CSS), java scripts, images, fonts etc. files inside it.
5. Open the master template you created for English and add the style sheet, scripts etc. with their source pointing to the files inside frontend -> English folder (Same manner for images also).
6. Open the master template you created for Arabic and add the style sheet, scripts etc. with their source pointing to the files inside frontend -> Arabic folder (Same manner for images also).
7. Use “<c1:Title id="title" runat="server"/>” inside head section of master templates for getting dynamic page titles instead of using “<title>title name</title>”.
8. Create resources file for both English and Arabic (Ex: Common.resx, Common.ar-KW.resx) and add all the values which needs dynamically change with respect to the website current language(/ or /ar).
   Use the same name (don’t use space in the name instead use ‘_’) in both the files only change the value for the name.
9. You can use same user controls for both English and Arabic templates, for that use the below procedure
10. Enable Localization of data type from C1 admin panel (If user control fetches data from data type and displaying it in site).
11. Add Arabic value for the data type from C1 admin panel (Arabic language) and vice versa.
12. Use text from resource file instead of static text in user controls
    a. for ascx use “<%=Resources.Common.nameOffield %>”
    b. for ascx code behind use “Resources.Common.nameOffield”
13. User the below condition for applying any specific section or tags only for English or Arabic in the user controls
    a. For ascx use
    <%if (System.Globalization.CultureInfo.CurrentCulture.Name=="en-US")
    

                       {%>
                              /* sections or tags to display only for English */
                       <% }
                     else
                     { %>
                              /* sections or tags to display only for Arabic */

    <% } %>
    

b. For ascx code behind use
if (System.Globalization.CultureInfo.CurrentCulture.Name=="en-US")

  {
     /* sections or tags to display only for English */
  }

else

{
                        /* sections or tags to display only for Arabic */
}

1. Add user controls to page template or place holder in the page template from C1 admin panel.
2. Implement language switcher in the page templates (Both for English and Arabic).
3. Open C1 admin panel and change the language to Arabic. Translate the pages from English. Edit the pages which you want to be displayed in the Arabic style, then select the Arabic template from the drop down for template list above the placeholder list.
   

Don’t create new page instead translate it from English else the language switching will not work.

The page will only use the specific style sheet referred in the head section of the page’s template. So we can apply our own page layout and custom styles (ex: dir to rtl) for any components in the specific page using the referred style sheet.

Normally we needs to create Home and Inner master templates for both English and Arabic separately (Only change will be the css, java script, images file paths rest will be same). The number of master template will be differ with respect to the design requirements.

Please check the below Dropbox link for more detail in screenshots.

https://www.dropbox.com/s/auogbiel7ftuzty/En-Ar%20site.rar?dl=0


Thanks,
Nikhil R