Skip to content

Latest commit

 

History

History
79 lines (54 loc) · 1.82 KB

MultilinguismShortIntroduction.md

File metadata and controls

79 lines (54 loc) · 1.82 KB
Raw

Multilinguism a short introduction

When we are developing a website we might have to take into account that the visitors might come from different regions and use different languages.

Google Developers guide gives some suggestions to increase the usability of the website:

  • Use different URL for each page:
    • example.com/de/ ✅
    • de.example.com ✅
    • example.de ✅
  • Don't use cookies or query parameters:
    • site.com?loc=de 🚫
  • Use herflang annotations for different versions of the same page.
<link rel="alternate" hreflang="x" href="https://esempio.com/pagina-alternativa" />
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">

Javascript

Many of the localization procedure can be performed client-side using javascript.

Numbers

123.4.toLocaleString('ar-EG')

Currency

data.toLocaleString('it-IT', {style: 'currency', currency: 'EUR'})

Dates

const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(event.toLocaleDateString('de-DE', options));

Quotes

Quotes vary depending on the region a particular case are the German quotes.

Make sure quotes are set to auto in your CSS file:

quotes: auto;

Part in different languages

<p lang="fr">Ceci est un paragraphe.</p>

@@part in a different lang@@[it]

Region vs language

Some users might use a different language that is not spoken in the region.

In this case we can use the time zone:

Intl.DateTimeFormat().resolvedOptions().timeZone

Checks

You can check for problems using: https://validator.w3.org/i18n-checker/