Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RTL, l'effet miroir

RTL, l'effet miroir

Syrine Trabelsi

January 15, 2024
Tweet

More Decks by Syrine Trabelsi

Other Decks in Technology

Transcript

  1. 2 ~500 serveurs Paris / NY ~700 équipements (switchs, routeurs,

    etc.) 4,5 PB de besoin en stockage 1,5 to de logs par jour ~1B de requêtes / jour Deezer 500 employés répartis sur ~10 villes Deezer est disponible dans plus de 180+ pays 8,3 millions d’albums 53+ millions de titres 100 millions de playlists Connected Speakers Wearables Car Mobile (Android, iOS, Windows) TV Desktop
  2. 3 @sarrouna23 Syrine Trabelsi Android Software Engineer @nascimpact Nicolas Le

    Breton Android Software Engineer Why RTL? RTL, Android app state of the Art Ways to improve the app in RTL Conclusion
  3. 4 مﻟﺎﻋ ﺎﯾ ﺎﺑﺣرﻣ Deezer partnership with local label Rotana

    Reach 28 countries and 431M people Higher feeling of trustworthiness by natives
  4. 5 Easy peasy Add RTL support in Manifest.xml Support minAPI

    17 “Add RTL support where possible…” (refactor menu on Android Studio) android:supportsRtl="true"
  5. 6 Easy peasy setMargin(left, top, right, bottom) + setMarginStart(start) and

    setMarginEnd(end) setPadding(left, top, right, bottom) --> setPaddingRelative(start, top, end, bottom) setGravity(Gravity.LEFT/RIGHT) --> setGravity(Gravity.START/END)
  6. 10 State of the Art: Home screen LTR RTL Overlapping

    text & artwork Scroll direction does not match between the different carousels Scroll direction does not match arrow direction
  7. 11 State of the Art: My Music screen Arrows pointing

    the wrong way (screen opens the other way) Icon in the wrong place LTR RTL
  8. 13 State of the Art: Search screen Overlapping text and

    icons Text too close to screen edge LTR RTL
  9. 14 ? State of the Art: Player screen Playbar advancing

    the wrong way Icons pointing the wrong way LTR RTL
  10. 16 Android Studio Design Tools Add RTL support in ConstraintLayout

    Add RTL support in AppCompatTextView (match_parent / 0dp) android:layoutDirection="locale" android:textDirection="locale"
  11. 17 Custom view / Drawable / Bitmap Avoid Left and

    Right variables use Start and End Convert legacy custom view to ConstraintLayout getLayoutDirection() resolveLayoutDirection() called by requestLayout()
  12. 18 BidiFormatter Bidirectionnal Text Formatter The OS will try to

    detect and will reverse itself the text, the Bidi formatter prevents the OS this inversion. Available in the Support Library (api17) BidiFormatter.getInstance().unicodeWrap(item.getTitle())
  13. 19 Mixed languages English artist name in arabic text Date

    in the wrong direction Numbers are wrongly right lefted
  14. 20 Vectors Add RTL support in vector Avoid vectors with

    texts Not all vectors needs to be mirrored android:autoMirrored="true"
  15. 21 Device / Emulator testing In developer options setting enable

    Force RTL layout direction /!\ Useful but not enough (number format)
  16. 23 Conclusion Localization is not only adapting text, ui and

    icons Other points are to take into consideration : • Moderate your user content (explicit lyrics/covers) • Review your monetization model against local expectations and be prepared to modify it if necessary.
  17. 25 State of the Art: internal bugs Lists mirroring :

    • RecyclerView (horizontal case) layoutManager.setReverseLayout(true); • ViewPager, HorizontalScrollView android:layoutDirection="locale “Arabic” numbers in the signup form Dates direction from 20/11/2018 to 2018/11/20 Pre-formatted server data Marquee direction ViewPager Viewpager no compatible Recycler view ok
  18. 28

  19. 29

  20. 30 Plan • startegy : chiffres, l’enjeu et pour qui

    + catalogue rotana? 1 ou 2 slides • du produit et l’adaptation pour le mena 1ere etape : l’etat des lieux pour tt les supports. • fonctionnement au sein de l’equipe Android Android : l’etat des lieux (screen avant) avec ce que offre de base l’android studio et l’os • les contraintes de la langue • Constraintlayout vs customviews • l’etat d’apres • fin ( contrainte de la culture penser a Explicit)
  21. 31 Is there a need for RTL support? The main

    right to left script languages are: Arabic: Is an official language in 27 countries and is spoken by ~422M people Persian/Farsi: is an official language in In 3 countries and is spoken in Iran, Iraq, Afghanistan, Tajikistan, Uzbekistan, Russia, and Azerbaijan by ~110M people Urdu: Is an official language in India and Pakistan, and is spoken in 4 countries by ~81M people Kurdish (Sorani): Is an official language in Iraq and is spoken in Turkey, Iraq, iran, Armenia, Syria, Azerbaijan, and Georgia by ~30M people Azeri: is spoken in Azerbaijan, Turkey, Iran, Russia, Iraq, and Georgia by ~26M Hebrew: Official language of Israel and is spoken by ~9M people Dhivehi (Maldivian): spoken in the Maldives by ~340K people Total of ~678.34M people use right to left scripts around the world
  22. 32 RTL support : Première étape Arabic: Is an official

    language in 27 countries and is spoken by ~422M people Hebrew: Official language of Israel and is spoken by ~9M people Total ~431M
  23. 33 RTL Support Startegy ~431M d’utilisateurs potentiels Exclusivité sur le

    catalogue local Rotana s’adapter à la culture et la langue de l’utilisateur augmente son “engagement” par rapport a l’application
  24. 35 Key principles The user is reading from right to

    left, so, when ordering object or icons on the screen we need to place the item we want the user to see first on the right Functional buttons and icons should stay the same! Universal icons do not change, the play button points the same way and the progress line progresses the same way Text should be aligned to the right as a default (unless it is a design decision to align otherwize) Pay extra attention to punctuations, they tend to get mislocated upon translation