Bidi on Android and iOS

Craig Cummings January 12, 2015

© 2015 Craig R. Cummings

Agenda

• Market background • A Word or Two on Bidi • Going Native - Android - iOS

• Demos • Q & A

© 2015 Craig R. Cummings

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

Arab Market by OS

Source: http://www.wamda.com/2013/04/how-consumers-mobile-market-in-the-arab-world-infographic © 2015 Craig R. Cummings

Smartphone Market Penetration

Source: http://think.withgoogle.com/mobileplanet/en/ © 2015 Craig R. Cummings

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

Native Mobile Apps

© 2015 Craig R. Cummings

Android Bidirectionalization Start

© 2015 Craig R. Cummings

Android Bidirectionalization Steps (just a single step?)

© 2015 Craig R. Cummings

Simple

© 2015 Craig R. Cummings

Additional Steps (if needed)?

© 2015 Craig R. Cummings

Android Text Field Direction Control

© 2015 Craig R. Cummings

Android RTL Previewer

© 2015 Craig R. Cummings

More Android Tips and Tricks

© 2015 Craig R. Cummings

Add RTL Dialog

© 2015 Craig R. Cummings

iOS Bidirectionalization Start

© 2015 Craig R. Cummings

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

As Simple

© 2015 Craig R. Cummings

iOS Tips, and Tricks

© 2015 Craig R. Cummings

Run with Explicit App Language

© 2015 Craig R. Cummings

Set Application to Arabic, Hebrew, etc.

© 2015 Craig R. Cummings

Xcode Cool, New Bidi Features

© 2015 Craig R. Cummings

© 2015 Craig R. Cummings

iOS Text Field Direction Control (and the art of handling exceptions)

© 2015 Craig R. Cummings

iOS Natural Alignment with English

© 2015 Craig R. Cummings

iOS Natural Aligment with Arabic

© 2015 Craig R. Cummings

Alignment Declarative via Interface Builder

© 2015 Craig R. Cummings

Android Demo

© 2015 Craig R. Cummings

iOS Demo

© 2015 Craig R. Cummings

YNet Hebrew

© 2015 Craig R. Cummings

YNet Hebrew Drill Down

© 2015 Craig R. Cummings

BBC Arabic

© 2015 Craig R. Cummings

BBC Arabic Drill Down

© 2015 Craig R. Cummings

Report Bugs

• Android - http://code.google.com/p/android/issues/list

•  iOS - https://developer.apple.com/bug-reporting/

© 2015 Craig R. Cummings

Q & A

i18ncraig@gmail.com

© 2015 Craig R. Cummings