i18n

Internationalisation des sites

Riviera Dev

Nicolas Hoffmann / @Nico3333fr

WTF
 
 
 

Mais Genève, c’est surtout…

  • Une capitale diplomatique
  • 22 organisations internationales et plus de 250 organisations non gouvernementales (ONG)
  • Une ville cosmopolite
  • Bref, un excellent vivier pour l’internationalisation

Plan-Les… WHAAT?????


ProtonMail
(on recrute, venez en discuter)

L’internationalisation ( = i18n ) des sites ?

  • Souvent cela fait peur…
  • … alors que c’est une destination exotique !
  • L’occasion de découvrir et d’apprendre

Mon objectif

  • Vous amener à réfléchir à ce sujet…
  • … vous éviter certaines gamelles (expérience :) )
  • Montrer que cela peut se faire à plusieurs vitesses
  • Voir comment cela impacte (tous) nos métiers…

Petit plan de bataille

  1. Quelques fondamentaux
  2. Côté créa/design
  3. Côté inté/dév. front (avec du RTL et pas que)
  4. Côté dév. back/fullstack
  5. Côté contenus/CP
  6. D'autres aspects

Quelques fondamentaux

UTF-8, sinon c’est la f�te ! Et le désarroi ensuite.

La dette technique en exemple

Quelques fondamentaux

«L’attwibiou» lang !

Attention aux faux-amis : i18n Checker, W3c Validator, Language subtag lookup

Côté design

La question n’est pas de savoir si ça va varier en i18n, mais quand et comment !

=> faites des designs qui tolèrent les variations

 

Bref

  • De l’air et de la souplesse, que diable !
  • Lâchez prise
  • Attention aux éléments de graphisme qui vont changer
  • Vivent SVG ou les webfonts…

Webfonts, au fait…

Les accents avec la typo Bebas

Dis, ta typo-là…

Côté inté/dév. front

« Votre intégration doit tolérer la différence »

  • Utilisez le flux
  • Évitez les postulats et les chiffres magiques
  • KISS = Keep It Simple and Smart

Surqualité, danger !

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(ja) > q {
  quotes: "\300c" "\300d" "\300e" "\300f";
}
q:before { content: open-quote; }
q:after { content: close-quote; } 

Surqualité, danger !

Une citation en français

An english quote

日本の引用

Bien d’y penser, mais n’en faites pas trop !

Les sites en Right-To-Left

Inversion pas seulement des contenus…
mais du sens de lecture !

Toute notion gauche/droite ou suivant/précédent à prendre en compte

Exemple en LTR

standup4humanrights (standup4humanrights)

Exemple en RTL

standup4humanrights Arabic

Autre exemple en LTR…

Design system Protonmail

Exemple en RTL

Design system Protonmail en RTL

RTL : plusieurs méthodes

  • CSS dédiée uniquement RTL/pour la surcharge RTL
  • Simple surcharge dans la même CSS
[dir="rtl"] .element { … }

RTL : en pratique

  • dir="rtl" sur html
  • float: left => float: right
  • Si spécifié, text-align à inverser
  • Absolu/fixé : left: 0;
    => right: 0; left: auto;

RTL : en pratique (suite)

  • Positionnements dans le flux (inline, inline-block, table-layout, flexbox, etc.) : no problemo !
  • Les animations !
  • margin/padding - left/right !
  • Attention aux helpers, aux surcharges, etc.

RTL (encore)

Exemple rigolo !

Adaptation RTL de flèches

RTL : hé oui !

Notion de précédent/suivant (droite/gauche) au clavier en JS !

¯\_(ツ)_/¯

Etc. voir Introduction à la localisation, RTL et LTR

Vous trouvez ça dur ?

Ce n'était qu’un prélude

CSS Writing modes/Logical properties

CSS writing mode démo

Une page en japonais

CSS Writing Mode demo by Chen Hui Jing

CSS writing mode démo

La même page en japonais, RTL et lecture verticale

Passons au dév. back

Attention aux idées toutes faites !

Voir une excellente ressource : Liste d’articles i18n W3c

Gestion des noms/prénoms

Évitez les hypothèses sur la longueur

Attention, certaines cultures n’ont pas de noms, d’autres des surnoms (Thaïlande), d’autres pas de Melle/M./Mme

Nom du mari/épouse/jeune fille/précédent

Des champs supplémentaires ?

Aux US, pensez à rajouter le champ « State ».

Des adresses n’ont pas forcément de noms de rues, peuvent être longues, etc.

Le temps !

Site événementiel/livestream :
précisez la timezone (CST, CET, etc.)

Stocker les dates en temps UTC (Z), adapter en local

Heures d’hiver/été, fuseaux horaires, etc.

Time and date, The time now (accessible), Le temps c’est compliqué

Les chiffres/devises

CHF 1'291.-, USD 1.25, EUR 1 337,99
CAD 1,234, AED 1٬234٫99 (momayyez)

Decimal Mark, Liste des monnaies

Traductions

Systèmes de traduction/contenus, selon votre cas de figure

Objectif : centraliser vos textes/contenus

La gestion des contenus

  • Pensez à traduire TOUS vos contenus…
  • … vraiment TOUS vos contenus…
  • … vraiment TOUT, j’insiste !
  • Juré, craché ?

Du vécu…

  • Un lien « Contactez-nous »
  • Traduttore = traditore :)
  • Crime de lèse-majesté
  • Politesse chinoise
Fatigue du chat

Organisez-vous !

  • Donnez le contexte, centralisez
  • Dés-ambiguïsez vos textes/contenus
  • Vérifiez si possible in situ
  • Idéalement, vérifiez avec quelqu’un du cru

Outils

CrowdIn

Fini de rire !

Plus possible d’improviser.

  • Attention au légal = renseignez-vous !
  • Commerce : TVA, TVA intra-communautaire (Europe), frais de port/douane, etc.
  • Google n’est pas dispo/n°1 partout…
  • Great Firewall !
  • Sensibilités locales

Trouvez des partenaires ou de l’info avant.

Conclusion

You + i18n = ♥

Ressources

Danke - 谢谢 - very beaucoup !

Pour discuter :
Nicolas Hoffmann / @Nico3333fr