Supporting Arabic (and other languages) in your web applications

1. Supporting
Arab* in your
web apps
‫ة‬َّ‫ي‬ِ‫ب‬َ‫ر‬َ‫ع‬‫ال‬
* And other languages

2. 2
Now
2015
2010
2005
2000
Gil Faria
engineering lead

3. Let’s Begin
don’t forget the
disclaimers

4. who he is
Lead software
engineer with about a
decade of experience.
Works for a midsize
company
Meet Brian
who he thinks he is
Ninja. Samurai. Jedi.
Eats bits for breakfast,
CPU cycles for lunch
and threads for
dinner.
Basically the very best
software engineer in
the world!
4

5. who he is
Brian’s boss.
Manages the
department of
software
development.
Has an engineering
background but hasn’t
been in the field for
quite a while.
Meet John
who he thinks he is
The guy in control, a
born leader.
The Nelson Mandela in
the software industry.
5

6. “
Brian, we need to develop
a web site for our new
business idea:
6
“The Awesome Site that Sells
Everything”
TASSE

7. The team
proposal
team vision
We should use
Node, Ruby,
Python,
Angular,
React, PHP,
.NET
reality
We can’t
diversify
technologies
so Brian
breaks the
vibe by
imposing the
companies’
tech stack.
the app
Microsoft
ASP.NET MVC
for the
portuguese
market
7

8. this is huge
We should support
multiple languages.
We have to prepare
our application for
future expansion.
The Solution
but what is...
- Internationalization
- localization
- globalization
- localizability
- I18n
- i10n
- L12y
- G11N
8

9. Internationalization
“... design and development of a product,
application or document content that
enables easy localization for target
audiences that vary in culture, region, or
language.”
9
i18n
globalization

10. Localization
“... the adaptation of a product, application
or document content to meet the
language, cultural and other requirements
of a specific target market (a locale)...”
10
l10n

11. Demo
first web app
1

12. Big success
After a few sprints the team launched the app and it
went viral
12
Launching v1.0

13. “
Brian, we need to expand
our market reach
13
“TASSE needs to be in english,
Yesterday!”

14. But Brian was
prepared
The team had already prepared the
app (internationalization, right?)
14
And guess what? Brian and the team
know english!
“You are very white… put tha kream”
Now, they need to localize.

15. Big success
A short while after TASSE was localized for english
15
Launching v1.1

16. The board
decides to
expand the
business
16
TASSE
Expansion
English
Portugues
e
French
New Languages Needed

17. And Brian is ready...
Another localization project.
17
And guess what? Brian and the team
know french!
“Bonjour…. Merci… err”
Ok, they don’t know french, but
google knows!

18. Big sh!t
* number of tickets created with problems found with
translations (most were detected by clients)
18
*
Launching v1.2

19. Importance of Context
20
Try to translate this English word into another language
“Record”
Does Record refer to:
- the action of recording something?
- the product?
- the highest score in a game?

20. The problem
Brian decides to
create a new
database for TASSE,
which is responsible
for collecting and
delivering all
translation strings.
Looking for a Solution
Organization
Translation issues are
pushed out of the
engineering realm.
They can outsource
the translations.
Translators have
control of what to
translate in the right
context
21

21. After a few sprints
They created a new back office app, used internally, for the
translators.
From now on, all the translations where out of the
engineering scope.
22

22. Languages added
New languages were added
￮ Italian
￮ German
￮ Spanish
Things were pretty normal
23

23. Big success
A short while after TASSE was localized in a few more
languages. Life is good.
24
Launching v1.x

24. “
Brian, we need to include
Arabic into TASSE
25
“It’s written from right to left!”

25. And Brian is ready
(of course)...
He thinks he knows all about RTL and
Arabic.
After all, the team had already
added a whole bunch of languages
to the site!!!
26
“Boss, I’ve already read about
this! The browser handles it all!”

26. Demo
RTL and the DOM
2

27. “
Let’s play it safe
28
John, this time, was cautious and
contracted a native speaking
consultant

28. Born and raised in Saudi Arabia.
The external consultant
29
Meet Amir

29. 30 Modern Varieties
Ex: Some varieties from
Northern Africa are
incomprehensible to an
Arabic speaker in the Persian
gulf
Modern Standard Arabic
MSA - a formal language
Based on classic arabe
Learned at school 30
Arabic

30. 31
Arabic Alphabet
It is written from right to left in a
cursive style and includes 28
letters. Most letters have more
than one shape.

31. Pluralization
32
English has two rules
1 day
2 days
1.5 days
Arabic has six rules
٠‫كتاب‬
‫ولد‬‫واحد‬‫حضر‬
‫ولدان‬‫حضرا‬
٣‫أوالد‬‫حضروا‬
١١‫ًا‬‫د‬‫ول‬‫حضروا‬
١٠٠‫ولد‬‫حضروا‬
0
1
2
n % 100 = 3..10
n % 100 = 11..99
100~102, 200~202, ...

32. 33
What happens to images?

33. 34
Are All images mirrored?

34. What about video?
35

35. Applying changes
Manually
explicitly write
rules for RTL and
LTR
CSS post-
processing (e.g.
with PostCSS.)
postcss-rtl
duplicates each
needed rule, with
selector for rtl/ltr
[dir=ltr] .foo
[dir=rtl] .foo
rtlcss
rewrites file
Less/Sass pre-processing
replace *-left/*-right
properties with functions
requires rewriting the
original files
if-ltr('left-to-right',
'right-to-left');
@include if-ltr {
p {
// some css...
}
}
36

36. Demo
RTLCSS
3

37. So is Arabic text RTL?
38
No
It’s actually bidi
Yes
bidirectional

38. Arabic is bidi
39
Translates to
The presence of the new USB 3.1 or USB Type-C in some phones this year was
a warning that this standard will be present on all telephones next year at
least high-end phones.

39. Unicode Bidirectional Algorithm
40
bidi algorithm
is part of the Unicode
Standard
widely supported by
web browsers and
other applications
base direction
we need to establish the
directional context of that text
dir attribute, or, in absence
inherited from the default
direction of the document,
which is left-to-right (LTR).

40. BIDI ALGORITHM BASICS
41
Directional runs
text is displayed
depends on the base
direction assigned
<p dir="ltr">bahrain ‫مصر‬kuwait</p>
<p dir="rtl">bahrain ‫مصر‬kuwait</p>
Characters may be
- strongly typed (letters)
- weak/neutral (numbers,
punctuation)

41. Let’s make this more exciting
42
spaces and punctuation are classed as neutral or weak characters
between two strongly typed characters with same directional type
assume that directionality
egypt, kuwait
LTR
<p dir="ltr">egypt, kuwait</p>

42. Neutral or weak characters
43
between two strongly typed characters with different directionality
same direction as the prevailing base direction.
egypt, ‫,البحرين‬ kuwait
LTR RTL LTR
<p dir="ltr">egypt, ‫,البحرين‬ kuwait</p>

43. LTRRTLLTR
Run direction changes
44
Hello World! is ! ‫مرحبا‬‫بالعالم‬ in Arabic
<p>Hello World! is <span dir="rtl"> ‫مفتاحمرحبا‬‫بالعالم‬ !</span>
in Arabic. </p>
<p>Hello World! is ‫مفتاحمرحبا‬‫بالعالم‬ ! in Arabic.</p>
at times it’s essential to change the direction run

44. What about numbers?
45
Weak characters don’t break
directional runs
Numbers are LTR even in RTL runs

45. Demo
Working with bidi
4

46. Editors with bidi support
47
Do Not
Atom
Visual Studio (PC + MAC)
Visual Studio Code (PC +
MAC)
Sublime text
Do
Emacs
Notepad++ (meh!)
Vim

47. Back to Brian
After a while, the team managed to add
another language.
48
Are they ready to launch another stable
version?
ARABIC

48. Big success
just a few minor issues...
49
Launching V.1.8

49. 50
TASSE is a market
leader
Everyone’s happy!
<- SEE ->

50. 51
And they all lived
happily ever after!

51. 52
Always Use UTF-8 (or UTF-16 for asian languages) and nvarchar for the Database
Create localizable strings
● Don't assume grammar structures $“{singular} {plural}s”
● Don’t concatenate strings
● Date, time, units formats (don’t hard code structure) $“{day}{month}{year}”
● Don't reuse strings in different contexts
● Don't hardcode characters not even white spaces, commas, or other separators
Don’t forget
When translating, context is crucial

52. How About
a Test?
?

53. 54
What’s wrong with this text?
there’s letter-spacing! it must be disabled
(thank you so much for coming)

54. Thank you!
Any Questions?
gil.faria@gmail.com
‫شكرا‬

55. 56