[TIMOB-11794] MobileWeb: New Feature: Add RTL as a property in Labels to display Arabic text properly

GitHub Issue	n/a
Type	New Feature
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-01-07T15:27:29.000+0000
Affected Version/s	Release 2.1.4
Fix Version/s	Release 3.0.1, Release 3.1.0, 2012 Sprint 26 JS, 2012 Sprint 26
Components	MobileWeb
Labels	SupportTeam
Reporter	kosso
Assignee	Christian Sullivan
Created	2012-11-15T22:29:40.000+0000
Updated	2013-02-12T21:55:38.000+0000

Description

Feature Description

In order to correctly display Arabic text we need to implement the property RTL, which will align the the text to the right.

More info

In CSS this is done using direction:rtl

Extra comment

If you are passing a string in arabic, it should already have the proper orientation (as any i18n string).

var win = Ti.UI.createWindow({backgroundColor:'#ececec'});
var label = Ti.UI.createLabel({text:' والديون الأوضاع القوقازية, أي لها ووصف الألمانية،. دنكيرك الأثنان'});
win.add(label);
win.open();

Attachments

File	Date	Size
i18n.zip	2013-02-12T21:55:11.000+0000	2009

Comments

Chris Barber 2012-12-07

Could you please create a test case and attach it to this ticket? I don't want to guess how it should look and mess it up. :)
Chris Barber 2012-12-14

After the locale has been detected in Ti/Locale.js, need to determine if language is a RTL and if so, set the "dir" and "lang" attributes on the html tag set by: document.getElementsByTagName('html')[0].setAttribute('dir', ???)
Chris Barber 2012-12-14

Whitelist the valid RTL locales to speed up lookups and save bytes.
Christian Sullivan 2013-01-03

Pull Requests: 3.0.X [https://github.com/appcelerator/titanium_mobile/pull/3658] Master [https://github.com/appcelerator/titanium_mobile/pull/3656]
Christian Sullivan 2013-01-05

Bad Merge Fix Pull Requests: master - https://github.com/appcelerator/titanium_mobile/pull/3663 3.0.x - https://github.com/appcelerator/titanium_mobile/pull/3665
Chris Barber 2013-01-07

Closing now that the bug has been fixed.

Eric Merriman 2013-02-12

Test code:

   var win = Ti.UI.createWindow({backgroundColor:'#ececec'});
   var label = Ti.UI.createLabel({
   	//text: "والديون الأوضاع القوقازية, أي لها ووصف الألمانية،. دنكيرك الأثنان",
   	text:L('label_me'),
   	width: 450,
   	color: "black",
   	borderColor: 'black',
   	backgroundColor:'blue'
   });
   win.add(label);
   win.open();

1) Add the attached i18n folder to your project at the root level. 2) Use the above code 3) On mac, in system preferences>Language and Text, drag arabic to the top of the pane "language" 4) Restart your browser 5) Test away. Arabic string should be right-justified

Eric Merriman 2013-02-12

CLI: 3.0.24-cr  Titanium SDK version 3.0.2.v20130207164659  Titanium Studio, build: 3.0.2.201302041757 Mac OS 10.8.2

JSON Source