![Page 1: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/1.jpg)
Bidi on Android and iOS
Craig Cummings January 12, 2015
© 2015 Craig R. Cummings
![Page 2: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/2.jpg)
Agenda
• Market background • A Word or Two on Bidi • Going Native - Android - iOS
• Demos • Q & A
© 2015 Craig R. Cummings
![Page 3: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/3.jpg)
What is bidi?
• Short for bidirectional -- where text and user interfaces can flow in two directions
• But in memory it looks like:
© 2015 Craig R. Cummings
![Page 4: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/4.jpg)
Arab Market by OS
Source: http://www.wamda.com/2013/04/how-consumers-mobile-market-in-the-arab-world-infographic © 2015 Craig R. Cummings
![Page 5: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/5.jpg)
Smartphone Market Penetration
Source: http://think.withgoogle.com/mobileplanet/en/ © 2015 Craig R. Cummings
![Page 6: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/6.jpg)
More words on bidirectionalization
• How do you bidirectionalize? - Flip everything - Handle exceptions
• Text • LTR text of other scripts, numbers, tashkeel, phone
numbers, and more • UI
• Shadows, charts, play buttons, and more
© 2015 Craig R. Cummings
![Page 7: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/7.jpg)
Native Mobile Apps
© 2015 Craig R. Cummings
![Page 8: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/8.jpg)
Android Bidirectionalization Start
© 2015 Craig R. Cummings
![Page 9: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/9.jpg)
Android Bidirectionalization Steps (just a single step?)
© 2015 Craig R. Cummings
![Page 10: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/10.jpg)
Simple
© 2015 Craig R. Cummings
![Page 11: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/11.jpg)
Additional Steps (if needed)?
© 2015 Craig R. Cummings
![Page 12: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/12.jpg)
Android Text Field Direction Control
© 2015 Craig R. Cummings
![Page 13: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/13.jpg)
Android RTL Previewer
© 2015 Craig R. Cummings
![Page 14: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/14.jpg)
More Android Tips and Tricks
© 2015 Craig R. Cummings
![Page 15: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/15.jpg)
Add RTL Dialog
© 2015 Craig R. Cummings
![Page 16: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/16.jpg)
iOS Bidirectionalization Start
© 2015 Craig R. Cummings
![Page 17: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/17.jpg)
iOS Bidirectionalization Steps
• Support right-to-left languages by using base internationalization and Auto Layout, as described in Internationalizing the User Interface. - In general, if the development language is left-to-right,
align the views starting in the upper-left corner and add constraints that expand views to the bottom-right. When you use the Auto Layout leading and trailing attributes (not the right and left attributes), most of the user interface appears mirrored in right-to-left languages.
© 2015 Craig R. Cummings
![Page 18: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/18.jpg)
As Simple
© 2015 Craig R. Cummings
![Page 19: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/19.jpg)
iOS Tips, and Tricks
© 2015 Craig R. Cummings
![Page 20: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/20.jpg)
Run with Explicit App Language
© 2015 Craig R. Cummings
![Page 21: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/21.jpg)
Set Application to Arabic, Hebrew, etc.
© 2015 Craig R. Cummings
![Page 22: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/22.jpg)
Xcode Cool, New Bidi Features
© 2015 Craig R. Cummings
![Page 23: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/23.jpg)
© 2015 Craig R. Cummings
![Page 24: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/24.jpg)
iOS Text Field Direction Control (and the art of handling exceptions)
© 2015 Craig R. Cummings
![Page 25: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/25.jpg)
iOS Natural Alignment with English
© 2015 Craig R. Cummings
![Page 26: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/26.jpg)
iOS Natural Aligment with Arabic
© 2015 Craig R. Cummings
![Page 27: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/27.jpg)
Alignment Declarative via Interface Builder
© 2015 Craig R. Cummings
![Page 28: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/28.jpg)
Android Demo
© 2015 Craig R. Cummings
![Page 29: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/29.jpg)
iOS Demo
© 2015 Craig R. Cummings
![Page 30: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/30.jpg)
YNet Hebrew
© 2015 Craig R. Cummings
![Page 31: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/31.jpg)
YNet Hebrew Drill Down
© 2015 Craig R. Cummings
![Page 32: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/32.jpg)
BBC Arabic
© 2015 Craig R. Cummings
![Page 33: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/33.jpg)
BBC Arabic Drill Down
© 2015 Craig R. Cummings
![Page 34: Bidi on Android and iOS - Meetupfiles.meetup.com/3154762/Bidi on Android and iOS.pdf · iOS Bidirectionalization Steps • Support right-to-left languages by using base internationalization](https://reader034.vdocuments.net/reader034/viewer/2022052520/60818857aa544443b47cea3a/html5/thumbnails/34.jpg)
Report Bugs
• Android - http://code.google.com/p/android/issues/list
• iOS - https://developer.apple.com/bug-reporting/
© 2015 Craig R. Cummings