{"id":133278,"date":"2018-08-11T03:04:18","date_gmt":"2018-08-11T03:04:18","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=133278"},"modified":"2021-08-04T11:05:40","modified_gmt":"2021-08-04T11:05:40","slug":"how-start-magento2-rtl-template","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-start-magento2-rtl-template\/","title":{"rendered":"How to Start Magento 2 RTL Template?"},"content":{"rendered":"
\n
\n
\n

Introduction-<\/h3>\n<\/div>\n<\/div>\n
\n
\n

Magento 2 can provide a platform for our eCommerce website that will manage the content on the website. Through Magento 2 RTL Template we can boost the website performance.<\/p>\n

RTL template is not only meant for converting the language but it also takes Layout in consent.<\/p>\n

Here the column shifts appearing on the left-hand side (in LTR) will appear on the right-hand side (in RTL) and vice versa.<\/p>\n<\/div>\n

\n
<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n

What do you mean by RTL?<\/strong>
\nRTL stands for Right-To-Left, the format of writing a language. The language which follows the format is\u00a0\u00a0Arabic,\u00a0Hebrew,\u00a0Persian, and\u00a0Urdu.<\/p>\n

What is a Theme?<\/strong>
\nThe themes are meant to provide the user with a great look and feel which will enhance the UI\/UX of the website or app.<\/p>\n

The themes are overridden to add the functionalities to the support the RTL method.<\/p>\n

What is RTL Theme?<\/strong>
\nThe UI of the application can be the best mode to attract the maximum number of customer.<\/p>\n

This RTL Theme can make your\u00a0website\u00a0or app localized to attract the local customer.<\/p>\n

\n
\n
\n

Need Of RTL Template In E-commerce<\/h3>\n<\/div>\n<\/div>\n
\n
\n

An e-commerce website is a place where people visit from all direction of the world. So the website must be efficient enough to attract the mobe in large number.<\/p>\n

The RTL template will be useful for the customer where the language patterns are followed. The customer from such parts will be able to purchase the products with an ease via the RTL layout enable website or app.<\/p>\n<\/div>\n<\/div>\n

Note-<\/strong> To try the RTL on Magento 2, please check here,<\/p>\n

Marketplace Multi Vendor Module for Magento 2<\/a><\/p>\n

Magento 2 Mobile App Builder<\/a><\/p>\n

Magento 2 Multi Vendor Mobile App<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

RTL Layout<\/h3>\n<\/div>\n<\/div>\n
\n
\n

The RTL<\/a> is not only about translating into Arabic, Hebrew, or Persian languages. The UI must be also user-friendly and create an ease for the user.<\/p>\n

The first step which will make the layout of RTL will be adding the code “dir= RTL<\/strong>” to the HTML tag:<\/p>\n

<html<\/span> dir<\/span>=“rtl”<\/span>><\/strong><\/p>\n

where, dir-\u00a0 direction, and the value of which is RTL that sets the horizontal starting point of elements to right instead of the left(Note- the dir<\/em> attribute in HTML is inherited and is not a CSS style).<\/p>\n

Then in copy regular CSS rules that target the webpage or app page. Here, we can reverse all the special attributes, henceforth\u00a0float: right<\/em> becomes float: left<\/em> and margin-left<\/em> becomes margin-right.<\/em><\/p>\n

These are the basic difference which needs to be implemented in the real world. The changes are implemented in the Magento xml.<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

Unicode Structure<\/h3>\n<\/div>\n<\/div>\n
\n
\n

The Unicode structure is the standard structure which one needs to follow in coding industry<\/span><\/span>.<\/span> It is maintained by the Unicode Consortium<\/a>.<\/p>\n

UTF-8 is the unified encoding structure followed in the e-commerce industry for the creation of the website. However, UTF-16 is for the RTL format.<\/p>\n

Here, UTF represents the\u00a0Unicode transformation format<\/i>\u00a0(UTF) which is an algorithmic mapping from every Unicode code point to a unique byte sequence.<\/p>\n

This coding standard will create a great UI to attract the maximum customer. As it gives the website a standardized format creating a benchmark in the minds of users.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

A\/B Testing<\/h3>\n<\/div>\n<\/div>\n
\n
\n

The design of the app\/website is also responsible for attracting the customer and enhance user engagement. Through A\/B testing (split testing\u00a0or\u00a0bucket testing) we could easily know the desired choice of the users.<\/p>\n

For this, we have two version<\/p>\n

-the control version, which original and<\/p>\n

-the modified version, which is variation.<\/p>\n

A comparison of both the version is set by providing the different customer with the different version<\/span><\/span>.\u00a0<\/span>This testing will depend on the factors like region, language, habit, and many other factors.<\/p>\n

In the layouts, this functionality is helpful as people using RTL format are not having similar choices as the one using LTR.
\nFor example, if we talk about the login button which is generally on the right-hand side of the user. This functionality will help the customer with fast and easy login. However, the logout button is not easily available.<\/p>\n<\/div>\n

Similarly, while we are creating a website or app in RTL we need to note the patterns of the vital button. Due to the fact that it will be different from that of people using LTR languages.<\/p>\n<\/div>\n<\/div>\n

\n
\n
\n

Points To Remeber<\/h3>\n<\/div>\n<\/div>\n
\n
\n

The creation of any website\/app must have the below points for attracting maximum user and reducing the bounce rate.<\/p>\n

\n
\n
\n

Mobility<\/h3>\n<\/div>\n<\/div>\n
\n
\n

The theme of any website or application needs to be designed in such a way that it can work same on both mobile and website. Responsive\u00a0design will give a great user experience\u00a0by providing an optimal solution for every device.<\/p>\n

The Xtremo Responsive Theme for Magento 2<\/a> gives all the advantage of a responsive design theme. This will enable the user to see the site same on all device (tablet, smartphone, and laptop).<\/p>\n

The RTL theme here will inherit all the basic features of Xtremo\u00a0theme.<\/p>\n

In addition, it gives features which will support the complete layout and functionality of the RTL language.<\/p>\n

CSS and Javascript\u00a0are the major tools\u00a0which help in the make the RTL work.<\/p>\n<\/div>\n<\/div>\n

\n
\n
\n

Arabic language inclusion<\/h3>\n<\/div>\n<\/div>\n
\n
\n

When we think about RTL format the first language in our mind is Arabic. In order to attract the local customer, we can enable the desire languages to generate maximum profit.<\/p>\n

For this, you need to follow the procedures that will include the language\u00a0in our store.<\/p>\n

Step1:<\/strong><\/p>\n

If a\u00a0user wants to translate their module from\u00a0English<\/strong>\u00a0into the\u00a0Arabic<\/strong>\u00a0language, they need to follow the path\u00a0app\/code\/Webkul\/i18n<\/em><\/strong>\u00a0in their unzipped Magento folder. Here the user will get a\u00a0CSV<\/strong>\u00a0file with name \u201cen_US.csv<\/strong>\u201d as shown below in the snapshot.<\/p>\n

\"Translation-Magento2\"<\/a><\/p>\n

Step2:
\n<\/strong>
\nNow just rename this\u00a0en_US.csv<\/strong>\u00a0 to \u201car_SA.csv<\/strong>\u201d as shown below in the snapshot.
\n\"Rename-CSV\"<\/a><\/p>\n

Step3:<\/strong><\/p>\n

Now, right click on this\u00a0renamed CSV file<\/strong>\u00a0and click the\u00a0edit<\/strong>\u00a0button to\u00a0translate all right side content<\/strong>\u00a0of this\u00a0CSV<\/strong>\u00a0after the\u00a0comma\u00a0into the\u00a0Arabic language.\u00a0<\/strong><\/p>\n

The actual\u00a0CSV file<\/strong>\u00a0after opening it up:<\/strong><\/p>\n

\"Basic-CSV<\/a><\/p>\n

The users can\u00a0edit the CSV<\/strong>\u00a0as per the below screenshot:
\n<\/strong><\/p>\n

\"Translation-CSV-Translate\"<\/a><\/p>\n

Step4:
\n<\/strong>
\nNow after translating the content of the CSV\u00a0save it<\/strong>\u00a0and then\u00a0upload it<\/strong>\u00a0to the path\u00a0app\/code\/Webkul\/i18n<\/em><\/strong>\u00a0where you have installed the\u00a0Magento2 on the\u00a0server<\/strong>. Now, the website will work in the Arabic language<\/strong> as well.
\n\"Translated-CSV\"<\/a><\/p>\n

This adds the language to the store which will reflect the keywords translated. So, this will emerges the need to change the layout of the store to RTL.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

Speed optimization<\/h3>\n<\/div>\n<\/div>\n
\n
\n

The Speed of any website works a lot in decreasing\u00a0bounce rate. The best technique\u00a0to deliver an optimized set of speed is applying\u00a0‘Varnish<\/strong><\/a>‘.<\/p>\n

The varnish caches will save the files or fragment of files in memory. This\u00a0will\u00a0decrease the response time and the network consumption.<\/p>\n

Varnish is a link between client\u00a0and web request, which will receive requests from the client and tries to answer them from the caches.<\/p>\n

It is an HTTP\u00a0based cache\u00a0request which sets a reverse proxy.<\/p>\n

In cases when the varnish is not able to answer the request from the saved cache, the request gets forwarded to the back-end server.<\/p>\n

So, the response is then fetched while storing the response in its cache and delivering the response to the client.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

AMP- Accelerated Mobile Pages<\/h3>\n<\/div>\n<\/div>\n
\n
\n

Through AMP<\/a>, an open source project, one can create web pages that are more responsive. These pages can improvise the performance of the website.<\/p>\n

Usability of the code increases with the implementation of RTL in AMP. It will give the RTL app user a constituency\u00a0in the app as its true that the app user will require the same functionality in the app as in LTR.<\/p>\n

According to the research done by AMP projects, ‘More than 1.5B AMP pages have been published to date and 100+ leading analytics, ad tech, and CMS providers support the AMP format.’<\/em><\/p>\n

Thus, the AMP restricts the usage of some of the CSS for great performance.<\/p>\n

Note-<\/strong> Know more about Mobikul RTL support<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

PWA-Progressive Web App<\/h3>\n<\/div>\n<\/div>\n
\n
\n

The Progressive web app is to make your web application fast, reliable and increase user engagement<\/span><\/span>. The RTL integration in PWA will make the web app <\/span>highly<\/span><\/span> responsive.<\/span><\/p>\n

The PWA based sites work well on all sort of modern browser-Chrome, Edge, Firefox, Safari.<\/strong><\/p>\n