what is the deal with internationalisation?

Eli schütze ramírez

WEB ENGINEER

@elibelly

👋

  👶🏽    ❤️    🤓    📝    🏡

🇲🇽🇳🇮🇺🇸🇨🇳🇬🇧

united kingdom

nicaragua

InternationaliSation?

INTERNATIONALIZATION?

 

WHAT IS THE DEAL WITH

It's a piece of cake!*

*JK it's very complex

@elibelly

i18n? wtf?

🤔

@elibelly

Numeronym

A number-based word, for example:

  • Numbers as sounds: K9, l8r

  • numbers as meaning: 007, 24/7, 911

  • adding up the number of letters between the first and last and then using that number instead of the middle of the word, wow, what a good idea : i18n, l10n, a11y

  • ... n7m

@elibelly

i18n? wtf?

🤔

@elibelly

the internet ™

@elibelly

Icon made by Dot on Paper from www.flaticon.com 

Languages of Websites

internet users by language

🌍🌎🌏

@elibelly

internationaliSation

is part of accessibility

 

 

💡

@elibelly

InternationaliZation

If you internationalise, you design or develop your content, application, specification, and so on, in a way that ensures it will work well for, or can be easily adapted for, users from any culture, region, or language.

W3C Standards

@elibelly

You might do something like...

🇪🇸

🇬🇧

Your code
except with templates or placeholders

instead of strings

localised string "resources"

🇮🇹

@elibelly

Store some String Resources (e.g. JSON)

REFER TO THEM BY ID IN THE CODE

Handlebars :

React :

JavaScript :

@elibelly

think about...

  • Language

  • Writing System and line breaks - é, โลก, 世界

  • Formatting Date, Time, Currency - 08/01/19

  • Writing Direction - LTR, RTL, bidi

  • Ordering, Pluralisation - one, few, many

  • Grammar and sentence structure

  • Relative time - 'days ago'

  • *BONUS: COLOR THEORY, RESPONSIVE DESIGN

@elibelly

THANKS, unicode!

☕️

咖啡

قهوة

coffee

@elibelly

 

 develop, extend and promote use of the Unicode Standard and related globaliSation standards

THE UNICODE CONSORTIUM

  • Unicode Standard: One number for one character - UTF-8
  • CLDR and ICU Technical committees 
  • Bidirectional Text Algorithm

@elibelly

Unicode bidi algoritm

  • Each character is either strongly or weakly typed with a direction (LTR, RTL, neutral)
  • The characters are displayed with reference to the document's or parent's base direction

💡TIP: If you are using bidirectional text make sure your html tags have a 'dir' attribute

<p dir="ltr">bahrain مصر kuwait</p>
<p dir="rtl">bahrain مصر kuwait</p>

👉

👈

@elibelly

BCP 47

Internet Engineering Task Force

best common practice

Tags for Identifying Locales

@elibelly

[Language Tag]-[Subtags]*
en-US, en-GB
mn-Cyrl-MN
zh-Hant-HK
es-419

@elibelly

  👶🏽    ❤️    🤓     📝   🏡

🇲🇽🇳🇮🇺🇸🇨🇳🇬🇧

es_MX      es_NI     en_US  zh_Hans_CN    en_GB

es_419

My Locales

what will you show me?

@elibelly

Always let the user choose THEIR OWN LOCALE

💡

CLDR - COMMON LOCALE DATA REPOSITORY

The most extensive standard repository of locale-specific data

Maintained by Unicode Consortium

Most devs will never see it - usually wrapped in libraries

It's originally in XML 

 

Locale-specific

Formatting

and parsing

Translations of names of things

Language and scripts

Country

info

Dates

Times

Timezones

Numbers

Currency

Languages

Countries/Cities

Timezones

Months/Weekdays

Currency

Characters Used

Writing Direction

Capitalization

Plural Cases

Sorting rules

Language Usage

Currency

Telephone Codes

Calendar conventions

<days>
  <dayContext type="format">
	<dayWidth type="abbreviated">
		<day type="sun">dom.</day>
		<day type="mon">lun.</day>
		<day type="tue">mar.</day>
		<day type="wed">mié.</day>
		<day type="thu">jue.</day>
		<day type="fri">vie.</day>
		<day type="sat">sáb.</day>
	</dayWidth>
	<dayWidth type="short">
		<day type="sun">DO</day>
		<day type="mon">LU</day>
		<day type="tue">MA</day>
		<day type="wed">MI</day>
		<day type="thu">JU</day>
		<day type="fri">VI</day>
		<day type="sat">SA</day>
	</dayWidth>
	<dayWidth type="wide">
        	<day type="sun">domingo</day>
		<day type="mon">lunes</day>
		<day type="tue">martes</day>
		<day type="wed">miércoles</day>
		<day type="thu">jueves</day>
		<day type="fri">viernes</day>
		<day type="sat">sábado</day>
	</dayWidth>
  </dayContext>
</days>

CLDR 'Days' Section - Spanish Language (en-EN)

@elibelly

ICU

international components for unicode

defines message format for resource strings 

set of C/C++ and Java libraries
wraps cldr

 

@elibelly

  • Welcome, { name } !
     
  • There were { count, number } people there        // 1,000 vs 1.000
     
  • My birthday is { birthday, date , short }      //   04/02/2017 vs 02/04/2017
     
  • { gender, select ,
        male { He likes trains },
        female { She likes trains },
        other { They like trains }
    }
     
  • { count , plural ,
      =0 {No more seats available }
      one {Just a single seat left!}|
      other { # seats left}
    }   // some languages have few and many !

@elibelly

How to write for i18n

Write full sentences when possible

Use complex arguments (ie. select, plural) as the outermost structure of a message

Do not try to build sentences yourself 🙅🏼‍♀️

@elibelly

{ gender, select,
    male {He likes to dance the cha cha in the moonlight},
    female {She likes to dance the cha cha in the moonlight},
    other {They like to dance the cha cha in the moonlight}
}
{ gender, select,
    male {He},
    female {She},
    other {They}
  likes to dance the cha cha in the moonlight

}

{ gender, select,
    male {He likes},
    female {She likes},
    other {They like}
 to dance the cha cha in the moonlight

}

✅

❌

❌

@elibelly

🚨 Javascript Alert 🚨

@elibelly

ECMAScript INTL API

ECMA 402

  • Intl.NumberFormat
  • Intl.DateTimeFormat
  • Intl.Collator

@elibelly

@elibelly

  • Not supported in older browsers 
  • Expensive (esp. in frameworks like React)

@elibelly

*Internationalisation in js

is still a work in progress

 

 

For more information, look up the TC39 ECMA 402 Proposal
or the W3C TPAC Internationalization Working Group

@elibelly

@elibelly

FORMAT JS - CORE

  • Exports Javascript API with more functionality than ECMA
  • Polyfills where needed 

@elibelly

REACT INTL

https://github.com/yahoo/react-intl

@elibelly

@elibelly

@elibelly

i18N has a logistics problem

@elibelly

Continuous Localisation ♻️

It is a way of automatically, seamlessly gathering new source material, publishing it for translation, acquiring translations and integrating them back into the product.

@elibelly

I18n is much easier to integrate into your project early

💡

@elibelly

Swiss Franc in English (en-GB)

Swiss Franc in German (de-DE)

height: 8.57rem

@elibelly

height: 8.57rem 🎉

@elibelly

Swedish krona in French (fr-FR)

British Pound Sterling in English (en-GB)

@elibelly

grid design 🎉

@elibelly

you *can* style for specific languages

note: always make sure to check browser compatibility when using intl tools and tread carefully

@elibelly

css lang pseudo selector

:lang( <language-code> ) {}

Img source: https://css-tricks.com/almanac/selectors/l/lang/

A note on line breaks

  • Not all languages delimit words 
  • Not all languages have obvious places to break a line 
  • It's not always easy for a machine to ​programmatically determine what a word or syllable is like a human can 

https://www.w3.org/International/articles/typography/linebreak

@elibelly

💡

  • i18n is part of accessibility - Internationalise all the things!
  • i18n is supported by a bunch of standards, helps do it "right"
  • Try to start early if you can
  • Always let your user pick their own locale
  • German is a great first test language!

@elibelly

🙏 Thank you 🙏

@elibelly

What's the deal with internationalisation?

By Eli Schütze Ramírez

Made with Slides.com

What's the deal with internationalisation?

While about 51% of the world’s websites are in English, only about 25% of web users are English speakers. With half of the world’s population online, internationalisation is as relevant as ever! Let’s explore how i18n gets made on the web.

  • 968

More from Eli Schütze Ramírez