OpenJS Foundation OpenJS World 2020, 25 Jun 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: The Trials and Tribulaciones of Internationalising your ẨṔṔŁîÇåŤḯṏÑ - Robin Dykema

Description

Sacré Bleu! The Trials and Tribulaciones of Internationalising your ẨṔṔŁîÇåŤḯṏÑ - Robin Dykema, Taulia

A

Hi good morning, everyone welcome to my talk on internationalization, but my lovely assistant, coconuts, who is also an internationalization expert. She may or may not make an appearance, we'll see how she feels, but will let's get talking about internationalization?

A

So quick note before I start on the topic of internationalization is super huge, there's, so much I could talk about and I only have 30 minutes. So I'm gonna go kind of quick through a lot of different topics. I recommend, if you want to follow along so you grab those slides, you can find them on my Twitter or my personal website may Twitter handle is just my first and last name.

A

Just Robin taken mine and I encourage you to look up things after this talk because I don't have a lot of time to go into great depth about this, but I encourage you to start researching things on your own. After this talk, so as I mentioned, my name is Robin.

A

I am a UI engineer at a company called Talia in Austin Texas, and my journey to want to learn more about internationalization, comes from the fact that prior to moving to Austin I actually lived in Asia for six years, so I lived in Taipei and Sue Joanne in Shanghai. Prior to that, you know, I kind of take it for granted.

A

How most of the web was built for people like me, Americans English speakers, and so when I moved to China and Taiwan I found that oftentimes I would go to order food or purchase something online and I get really frustrated or really confused or sometimes like. The translations would be silly or inappropriate, and it kind of got me thinking about how we should internationalize our applications in the US for non-english speakers and for people who weren't Americans and as I was learning more and more about this.

A

There were just so many things that I didn't know that I didn't know, and so I wanted to share those things with you so that you can make more applications so that your users don't feel this frustration and this confusion when they're using your application. So what I wanted to cover is the following. So first of all, what is internationalization a people myself included when I first started learning about this confused internationalization with localization or some people think well.

A

My application is only going to ever be in English, or maybe it's only going to be used by Americans. So I don't need to worry about that. Not true! There's still some things you have to think about, even if your app is only in English or even, if you're absolutely going to be used in the United States. So we'll talk about.

A

You know how is internationalization different from localization, and why is internationalization important then we're going to kind of dive into five different categories of internationalization issues that might arise so I've kind of divided it into the following categories. First of all, translations dates times and numbers non-latin characters and validations.

A

Designing with only English figures in mind and then aren't yell support, which stands for right to left language support. So, let's just start off with what is internationalization.

A

So there are three terms that are going to come up a lot when researching the topic of internationalization, mature internationalization, localization and globalization, and just a quick note, if you ever see them shortened like I 18n, those are called Nero names in the same way that we often certain accessibility to a11y or Ally. It's the same thing, so it's just a shortened shortened version of that. So these three terms: let's talk about what they mean and how they're different.

A

So here's a chart here that I have with internationalization and localization so we're gonna focus on internationalization and as developers most of what we're doing is going to be on the internationalization side of things, not the localization side of things, and what I mean by that is internationalization is the idea of not hard coding, something to a specific language or a specific region, and the easiest example I can think of is when we're talking about dates now in the US, while we format our dates as month day year.

A

Now, if you're in another country, you might expect that date to be in dead month year, instead of month, day year, and so that could be really confusing. So if we're building our application, we don't want to hard-code that date to be always in the american format. We want to make sure that we are making a function that will spit out the date depending on the location or depending on the users. Preference.

A

So internationalization is a process of making sure that all those aspects- and it's far more than just dates or far more than just adding a language tag at the top of your HTML and we'll go over what that means. But internationalization is the process of making sure that everything is not hard-coded to a specific language or region.

A

Now, hopefully we do this when we first start developing our application as we build new components, we make sure we're building them with internationalization in mind and therefore we only have to do that once now, we might start with just English and then eventually a product manager, or someone comes up to us and says we want to also add Spanish, and so we localize into Spanish or we localize into Russian or Spanish from Latin America versus Spanish from Spain.

A

So we can localize multiple times, and ideally, we've done such a good job at internationalizing that that localization process goes very smoothly. Now, unless you're fluent in that language, you probably won't have too much to do with the actual localization part of things. So our job as developers is the internationalized zation part of things. This entire process, internationalization and localization together, is called globalization.

A

If that still doesn't make sense, here's one more visual internationalization is everything under the surface and localization is what you see so again going back to that example, with the dates we're going to actually see the final date. If we are an American and we see that date format, it is a month date here, we're probably never gonna see it format it in another way. We're not going to see everything that goes under the surface to make sure that date is formatted in the correct way.

A

So that is the what is internationalization and how it's different from localization. Again we'll be talking about internationalization in this presentation, sukh about the. Why so I mentioned earlier, that I was pretty lucky and that because I'm American and because I'm, a native English speaker most of the web, was built for people like me and here's some stats to back that up. So on the Left we have languages found on the web. It's probably surprises nobody that most of it is found in English over 50%.

A

Now, if you look on the right says: Internet users by language, so on the right we have still English as a top, but we have 50% of the web is found in English, and yet only 25% of Internet users are speaking in English.

A

So there's this discrepancy in terms of how much is available in English and how many people actually speak English and you can even look at Chinese, so you can see Chinese on the right on the right graph, it's the second most common I, sorry, the second largest group of Internet users and yet they're, not even on the top ten of languages found on the web.

A

So from a financial standpoint, it makes a lot of sense to be able to translate into these languages, because these non English users might not find similar applications in their own language. Now you might think to yourself. Well, my application is only in the US, so I don't really need to worry about this, and actually in the US and 21% of people speak a language other than English.

A

An eight point: five speak English less than very well so you're missing out on a huge user base, if you're only making your app available in English and furthermore, I've been talking about this from a financial standpoint, but I think it's really important from a moral standpoint as well. So we often talk about accessibility in terms of people with visual impairments or people who can't use a mouse and therefore we're making our websites keyboard. Accessible. Internationalization is also part of that umbrella. Accessibility term.

A

I personally, believe that the Internet is a human right and that everyone deserves to have access to the web, and it's not really fair that just because someone doesn't speak English or just because someone is an American that they don't have that access, and so we as developers have a moral duty to make sure that we are making our websites accessible and including internationalization under that accessibility umbrella term.

A

So let's go into those five categories that I was talking about about common internationalization pitfalls and how to avoid them. So how I will structure? This is the following: I will give you issues that might come up while you're developing your application and then I will tell you how to solve them at the end, so it will be like problem solution. Go to the next category problem solution, so first problem is translations.

A

So I told you at the beginning that the very definition of internationalizing your application is to not hard code, something to mean language or a region. So obviously the first thing that comes to mind when talking about translations is not hard coding text.

A

So when you're building a personal project or maybe something super small, you often will just type your English words right into your HTML, which is fine like with small applications, but we just want to keep in mind that we shouldn't be doing that for larger scale applications and what I mean by hard coding text is just something as simple as this just having the English write in the HTML. This is gonna be really difficult.

A

If, in some in the future, we want to go and translate that into Spanish we're gonna have to rip out all the English. It's gonna be a huge hassle, so what I mean by not hard coding?

A

The text is the following, so we might have a function called T and I'll talk about internationalization frameworks that will give you this functionality later on, but just to give you an example of what I mean by not hard coded text is the following: so having a function that goes to a location and pulls out the text, even if it's all English text at the moment at least you have that stored. So in the future, you would be able to translate into different languages.

A

The next issue that comes up a lot is getting the correct translations and again, as someone who lived in China I is all the time. Google Translate is not going to cut it for a professional application, because a machine cannot understand context and it's often going to give you confusing or incorrect or inappropriate text. So here's some examples, I'm sure you all have seen things similar to this. Seeing a sign that says beware of safety which, by the way this is everywhere.

A

If you go hiking, these signs are everywhere in China, something like child shredded meat eat your fingers off or use the Queen to invite powerful water. Now, I'm sure all those people who made the signs did not actually mean that exact sentence. So we want to avoid relying on machine translations.

A

The next issue that is going to come up a lot is plurals. Now in English the rules of pluralization are the following. You have one of something you don't have an S if you have zero or two or more of something you have an S and I chose cat. Just because I want an excuse to put my kitty this into the slides, pepper and coconut. So we've got two forms of plurals in English. Now in Chinese, it's the same, regardless of how many you have. If you have zero its Mao, that's one! It's a mouse.

A

If it's two its mouth, it's all the same now other languages have even more than two plurals polish, for example, has three and I'm not going to try to pronounce this and confession? I did the exact thing: I told you not to do left side and I pulled this from Google Translate. So if any Polish people are watching this and that's wrong, I apologize. But the point is that you don't know the pluralization rules of every single language that you ever might translate into. So this is.

A

This can be something that you really need to be cognizant of. Also more cat photos. Some languages have gendered nouns. So in English we don't have this, but, for example, in Spanish there is a masculine form and a feminine form and so cat. If it's a boy cat, you would have an O at the end and if it's a girl cat, you would have an A at the end and all the nouns either have a masculine or feminine form in some languages, such as German actually also have a neutral noun.

A

So these are again things that we don't have in English, but you need to think about if you're going to translate into another language, so I've, given you a bunch of problems, what is the solution so, first of all, obviously don't hard-code your text. So if there's even like a remote possibility that you might want to add another language, it'll be so much easier if you just store your translations elsewhere and don't hard-code anything. So it's gonna be really hard to find that.

A

So just keep that in mind when you're starting an application, hire a proper translation service, so don't rely on Google, Translate or other AI to provide your translations um it'll, be fine. If you have like short and common phrases, say, submit and turn you can actually look for, like a check mark, a verified check mark to see if it's a good translation but anything that's like a sentence. Just you need a translation service and you might be wondering.

A

Okay, if I'm not hard-coding my text, how am I going to pull out this text and the solution most people use is an I 89, our internationalization framework that will help you to pull in the correct text based on the language that the user has selected, and it can also help you with those things like pluralization and gender rules.

A

So here's some internationalization frameworks or libraries and I tried to keep this like not framework specific. So these are just JavaScript ones, not like react, specific ones or angular specific ones. If you have a smaller application, you can use something like polyglot.

A

If you have a larger application and need something that is heavier lifting you could use a 18 X, that's actually what I use that my companies react: I, 18, X and here's some other libraries, if those two aren't doing it for you um or react I 18 next. This is how we set up florals. So here's just an example. So at my company we support 18 different locales, so I've listed them here in the chart. Most of them have two plural versions, but Japanese Korean and Chinese. Just have one version.

A

Check and Polish have three and Slovenian has four, and so the internationalization library just expects the translations to look something like this.

A

So in my translation file like say, I'm, just storing it in a JSON file, I would just store it as cat cat, plural and then I pass in the count. And then the framework does the lifting for me the framework figures out how many cats, I'm speaking out, there's pepper again.

A

Finally, just a note and don't make assumptions on grammar grammatical structure is not the same in all languages, especially the further away from English you get, so you like, Spanish and French and Italian. They all have like similar roots, but if you're working with something like Korean in our Arabic, there's, probably not going to be a ton of similarities between so don't concatenate your strings again, it might work in English and Spanish, but that possibly is gonna work in all languages. So just be aware of that. Okay, the next problem.

A

So after translation, the thing that comes up a lot I think, like dates times, calendars time, zones numbers all that and now we're kind of getting into the point of yeah. Okay, the translation thing. If you're only going to use English, you probably don't have to worry about your translations, but this is really where we're gonna start talking about issues that come up for people who only have English it only apps. So first of all, I mentioned this earlier.

A

If I showed this date to a group of Americans a one-of to 2020 most, the Americans would probably say that this is January 2nd. If I showed this to a group of British people, they would probably say this is February 1st. So here's your your first huge issue this date can be confusing, even though these people speak the same language.

A

Another thing in the US. We generally prefer 12-hour clock so 3:00 p.m. or 3:00 a.m. in a country like Germany. They might prefer a 24-hour style clock time zones are super frustrating and if you've ever worked with time zones, I'm sure you feel white shirts paying here.

A

So the time zones are super tricky not only just doing the math between time zones, but also some time zones start at the 30 minute mark some time zones observe daylight savings time, some don't the ones that do they don't change their clocks on the same date, and sometimes one country such as the u.s., not all of the country, observes daylight savings, so it can be super confusing something that can cause a lot of headaches.

A

Another thing to think about is calendars, so in the u.s. we generally prefer that our calendar to start on a Sunday in the UK they generally prefer that their calendars start on a Monday numbers are another thing. So if I gave this number to a group of Americans and said hey, can you format this with commas and decimal points? They would probably format it like so 1 2, 3, comma 4, 5, 6 decimal point, 7 8 I gave it to a group of people from India.

A

They might format it 1, comma 2, 3, ,, 4, 5, 6, decimal points, 7 8 and then in Spain. They swap the decimal point in the coma from how we're used to it in the US, so 1 2, 3 decimal point 4, 5, 6, comma 7 8. This can be super confusing again, if you are expecting the number in one format and you receive it in another. Another thing is currency.

A

We want to make sure that we're showing currency that makes sense to the user and also keep in mind that the word dollars could be US dollars could be Canadian dollars could be Australian dollars. Lots of people use the word dollars so just make sure to be clear on your currency and make sure that it makes sense for your user.

A

So what is the solution to all this? Well, first of all, don't try to solve this yourself. This is way too hard for one person or one team to work on do not reinvent the wheel. There are so many open-source libraries that you can choose from moment. J/S is probably the most notoriously known, date/time library. However, it does get a lot of flack because of the de bundle size.

A

So there are alternatives, and actually, as I was researching for this presentation, I found a github repo called you don't need moment JX, and it compares all the different libraries that you can use so keep in mind. Some of them don't support timezone. So if you need that functionality, you probably do need a bigger library, but yeah. There are alternatives. If you don't want to use moment j/s another thing you can use- and this was something that was new to me as I- was researching, for this is the Intel object.

A

So this is something you don't need to download a library. It is a native JavaScript object that you can open up your dev tools and use it right now, and it gives you a lot of things like it gives you relative time, format, list format, number format, plurals and when I see plurals I don't mean like what we talked about in the translation category I mean like words like few or many, and it gives you those in different languages.

A

Here's an example. So if I wanted the relative time format for es MX, which means Spanish from Mexico and I wanted one month so one month ago, it would give me a Satan ace back. If I wanted to format a number and I tell it J a for Japanese I want it in the style, currency and I, give it the currency that I want it to format and then I pass in the integer. It will format that number for me. So has a lot of great options for something that you don't need to download.

A

um Finally, just some last tips stay consistent, keep your communication open between the front end and the back end make sure that you're sending everything in the same format. If you can store your dates in the UTC, which is coordinated, Universal Time, it's not a time zone. It's just a standard that we've all agreed upon is zero and store your memories as integers.

A

There's no worries to store them format it and just let whatever library are using format it for you and if all else fails call in ryan gosling and have him give you pickup lines like hey girl? Did you lose a timestamp because I'm pretty sure it's date, time done now? I know those are super old, I, don't care so third problem, non-latin characters and validation, I've kind of pushed these together, because they're somewhat related.

A

So, first of all, if you've ever seen, characters like this, maybe in the Internet in the 90s or you've received an email with like funky characters, usually means that they haven't encoded their characters properly and they have some non-latin characters in there. This is one example: I created it's a fake example, but we don't ever want to have a form and have someone put their name in Zoe with an umlaut, the two dots over the E and tell her that her name is invalid and you might think to yourself yeah, that's silly!

A

I would never do that. No respectable company would ever do that, but actually, just this month, the US government did it so yeah. That was my silly example. This is a real-life example where somebody tried to put in their last name which had an accent over the e and the US government said: hey, your name is invalid. Please don't do this. It can be very harmful and really offensive to people to tell them that their name is invalid.

A

So again, even if your application is only used in the US and it's only in English, you still need to think about internationalization issues such as this is. This should not happen, especially on the US government's website.

A

So what is the solution to this? Obviously encode, your your characters, there's a few ways you can do this. You can set it in your HTML set. The charts, that's utf-8 use Unicode, so Unicode is great, because not only does it have the alphabet A through Z accent, marks mumps everything, it's got, Chinese characters, Cyrillic alphabet, Arabic, characters, emojis and your emojis are properly encoded. It's important be aware, when you're sorting using non-latin characters, if you're writing like a sorting algorithm by hand, just be aware of that, be careful with your routing.

A

So if you have dynamic, routing and you're supporting, do you supporting Chinese and you pull in the route of a Chinese character and then in the URL you have a Chinese character. Actually that will work, but it's not that standard.

A

The standard is to use just the through Z alpha bit, be careful when you're choosing your fonts just because, if font looks good in english and spanish and french italian does not mean that it's gonna look good in Russian or Chinese or Japanese, and then talking about validating, be aware of what your regex is checking for. It could be a silly example or it could be something actually offensive. As an example. I showed you before, so you don't want to tell Zoe that her name is invalid.

A

Keep in mind that some languages, so this is trainees, one character can have meaning and some languages, so don't tell someone that their last name is too short and another. No on last names, people can have more than one last name so make sure to check for that. Maybe you have two inputs, or maybe you just make sure that your input doesn't tell someone that, because they have two words in there that it's invalid. You don't want to do that.

A

The problem designing with only English speakers in mind, so this is more of the UX perspective, but still good to be aware of. As developers now, this is like a really simple example, but I promise you it happens. All the time so say, I make a button and it's save, and then it's this big and I hard code. It because I know that this is how big save is and then, two years later we decide to translate into Spanish and suddenly it does not fit in the button again. This happens.

A

All the time here is an example of the width of an English word compared to other languages. So you see that English is actually one of the narrower. In terms of like the width of the word, Korean Chinese, those languages often are around the same size or sometimes shorter, but when you go into languages like Portuguese, French, German, they're oftentimes much longer, and for some reason it's always German that has really long words. I actually asked some German friends to give me some, like really long, word examples. So this is what they gave me yeah.

A

So here's the English word and the German word. So you need to make sure that you are giving enough space for these really long, German words. So what is the solution? Allow for enough flexibility and space that translated text fits into your design.

A

So a rule of thumb is that if the English is fewer than 10, characters leave room for three times that expansion and if it's greater than 10 characters, leave room for 30% that expansion and then for us as developers, we're coding that CSS make sure to not use fixed widths, try to keep your CSS flexible so that things grow and shrink accordingly, all right. Our last thing that might come up is supporting right-to-left languages.

A

Now here is a list of some right-to-left languages, so, as English speakers were very familiar with left-to-right languages and a note here, some languages like Chinese traditionally go up to down, but on the web they go left to right. So you're really only worrying about left to right and right to left. If you have never seen a right-to-left web site. Here is an example. So here is a left-to-right language English and you see, the Wikipedia logo is on the left that pictures the cats are on the right.

A

The inputs on the right when I look at the Arabic version, everything is swamped, so we've got the logo on there on the right. Now we have the input on the left and the photos on the left. So you can see it just goes just swaps back and forth, which is pretty cool if you've never seen that before.

A

And how do you achieve this? Well? First of all, you need to add dirt equals RTL to HTML. You've never seen that before it's, because the default is LTR left-to-right, and but we need to specify if it's going to be right to left what you're gonna have issues with is, if you're using things like float:left, float:right, text-align:left text-align:right, because that's gonna be right in both left to right and I'm right to left, it's gonna be really confusing.

A

What you can use instead is something like flexbox flexbox will, if it's flex star, it will be in the left from a left to right language, and if it's a right to left language, it will be on the right. So it observes the directionality, unlike floats and text, aligns, and just even, if you're not going to support right-to-left languages, something that I think is a good practice is to name things based on what they do and not what they look like, because it doesn't always make sense on the directionality.

A

So here's an example, let's say I've got two pagination arrows um if I was just thinking and left-to-right I might call them left arrow and right narrow, but that doesn't make sense in a right to left language. What does make sense in both is previous and next, so, if I call it that it works in both and previous and next like that's what it actually does is not what it looks like so try to use words like before start beginning backwards above etc.

A

So in conclusion, these are the final takeaways design, your app to be language, region and culture. Independent use, open source projects to help you solve problems that you didn't even know existed and just keep in mind that globalizing means bigger markets, more inclusiveness, I'm better code that is extendable and easier to manage the too long didn't. Listen is to be like pitbull this world wide. So that is all I have for you today again.

A

If you want a copy of these slides, I will be posting them on my Twitter or my website and I do have some resources for you. If you want to look into more of the topics, I know I didn't jump around to a lot of things and I've got a 99 checker for you and yeah we've got some information, so thank you all for listening and I hope you enjoy the rest of the conference and I'm sorry. My cats were running around like crazy during this dog bite.