Scroll Top

RTL support in Sencha Touch

Overview

This article gives brief overview about how we can achieve the RTL support in Sencha Touch. The technologies for creating the Right-to-Left (RTL) application evolved in past five years. Middle Eastern languages such as Hebrew and Arabic are written in Right-to-Left.

RTL is considered as an important accessibility feature for the users who work in Right-to-Left (RTL) languages. In web applications, typically, switching the values between following can make the application support RTL:

  • direction: ltr / direction : rtl
  • text-align: left / text-algin: rtl
  • float : left / float :right

In recent years RTL support for any application became an required feature and helps us engage the users who work with Right-to-Left languages like Arabic and Hebrew. When we talk about web applications, RTL involves not only aligning text in RTL mode but the widgets as well. The web application could be a desktop web app or a mobile web app.

Sencha Touch does not have out-of-box support for RTL. However, we can achieve it through CSS changes and overriding the default behavior of Sencha Touch components. In nthis article we will show you how to build the RTL support in Sencha Touch and how to leverage that to build a mobile web app to allow the user to switch, dynamically, between LTR and RTL.

Problem Statement

As part of this article, we will focus on supporting RTL and using it in our application for the following Sencha Touch components, which are widely used components in any application:

  • List
  • Form Panel
  • Tab Panel

Pre-requisites

Details

Follow below steps for converting the application to RTL support:

Step 1: Identify the different components / widgets used in application.

Following component have been selected based on their usage in any application:

  • List
  • Form Panel
  • Tab Panel

Step 2: Create following files in Sencha Touch application 

To keep the RTL changes separate without disturbing the core logic, we need these files

  • <application dir>/touch/sencha-rtl.js
  • <application dir>/touch/resources/css/sencha-touch-rtl.css
  • <application dir>/resources/css/app-rtl.css

Step 3: Override the widgets for RTL support 

In order to support the RTL mode for Sencha Touch widgets like, Data List, Form Panel and Tab Panel, copy code from sencha-rtl.js and paste in sencha-rtl.js file.

Step 4: CSS changes for the Sencha Touch widgets to support RTL mode

For CSS changes copy code from sencha-touch-rtl.css and paste in the sencha-touch-rtl.css file

Step 6: Application specific CSS changes

If any application specific css changes are required keep them under app-rtl.css file. Hence, required css changes for sample application for RTL support kept in this file.  Refer to app-rtl.css file in the sample project

Step 7: Dynamic switching between LTR and RTL mode

In order to identify the users choice between RTL and LTR, when user taps in RTL or LTR flag, lets store its value in localstorage, which can be retrieved and load the files dynamically according to the selected mode in next step.

Step 8: Loading JS and CSS files dynamically

In order to load the files dynamically add the following code to the end of the <application dir>/touch/microloader/development.js file:

After required changes observe the following images for sample application over LTR vs RTL

Observation : Observe the following points in below image

  • Left side image shows the LTR mode (Default)
  • Right side image shows the RTL mode (after switch by tapping on RTL flag- Egypt)

  • Tab panel alignment in LTR mode – LTR / RTL , Data List , Form Panel

  • Tab panel alignment in RTL mode – Form Panel, Data List , LTR / RTL

  • Flag alignment in LTR vs RTL mode (Switched from left to right)

          main_rtl

Observations:

  • Left side image shows Data List widget in LTR mode (Default).
  • Right side image shows List in RTL mode (Observe image and text alignment)

list

Observation:

  • Left side image shows Form panel widget in LTR mode (Default)
  • Right side image shows Form panel widget in RTL mode.
  • Observe the field label is left side in LTR over right side alignment in RTL mode
  • Cancel icon
  • When user starts typing in text box widget in LTR it will start from left to right whereas it is completely reverse i.e. right to left in RTL mode.

panel_rtl

Scope for further widgets

RTL support not stop with Data List , Tab panel and Form panel itself, we can extend this for renaming Sencha Touch widgets as well by overriding default classes , few of them are:

Navigation view – Ext.navigation.ViewRtl

Navigation Bar – Ext.navigation.BarRtl

Toggle – Ext.util.DraggableRtl, Ext.slider.SliderRtl, Ext.scroll.ScrollerRtl etc

Title Bar – Ext.TitleBarRtl

Conclusion

In this article we saw that how we can achieve the RTL support for the Sencha Touch based applications with simple changes and make use of same application for both users who work in RTL languages as well as LTR with dynamic switching between both the modes.

Reference

https://github.com/vahid-sohrabloo/sencha-touch-RTL

https://github.com/walkingtree/sample-projects/tree/master/SenchaTouch/SenchaRTL

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.