Utforma för alla marknader

En funktion är redo för världen när den fungerar på alla språk och följer varje läsares konventioner utan att koden behöver ändras. Den här sidan följer Microsofts checklista för internationalisering: varje avsnitt beskriver vad som skiljer marknader åt, hur du skriver kod som hanterar det rätt och vilken kod i Globalisering-kontrollen som markerar vanan som gör fel.

Det mesta kokar ner till en regel: låt läsarens språkvariant avgöra. Webbläsarens Intl API:er, ramverkets formaterare och data från Globalisering känner till varje marknads konventioner; kod som hårdkodar en marknads konventioner gör det inte.

Text och meningar#

All text som en person läser ska finnas i källkatalogen under en nyckel och visas med projektets översättningsfunktion. Det gäller etiketter, rubriker, knappar, meddelanden, fel som visas för användare, platshållare, alt text och ARIA-etiketter. Koder: hardcoded_text.

En mening är ett meddelande. Ordföljden skiljer sig mellan språk, så en mening som sätts ihop av delar går inte att översätta. Skicka värden som platshållare och antal som pluralformer. Koder: concatenated_text.

// Not world-ready: English word order and English plurals
'You have ' + count + ' new ' + (count === 1 ? 'message' : 'messages');

// World-ready: one ICU message
t('inbox.new', { count });
// "inbox.new": "{count, plural, one {You have # new message} other {You have # new messages}}"

Språk behöver olika pluralformer: engelska har två, arabiska sex och japanska en. Skriv källmeddelandet med ICU-pluralformer, så lägger motorn till de former som varje språk behöver.

Tal#

Marknader skriver samma tal på olika sätt: 1,234.5 i USA, 1.234,5 i Tyskland, 1 234,5 i Sverige och Frankrike, och med andra siffror i vissa arabiska marknader. Formatera enligt läsarens språkvariant. Koder: locale_number.

new Intl.NumberFormat(locale).format(1234.5);
new Intl.NumberFormat(locale, { style: 'percent' }).format(0.25);

Läs ett tal som en person har skrivit in med samma språkvariant, eller använd ett numeriskt inmatningsfält, där webbläsaren normaliserar värdet. parseFloat('1,5') är 1, inte ett och ett halvt. Koder: locale_parsing.

Datum, tider och tidszoner#

Datumordning, avgränsare, månadsnamn, 12- eller 24-timmarsklocka och kalender skiljer sig åt. Formatera enligt läsarens språkvariant och använd aldrig ett fast mönster som MM/dd/yyyy. Koder: locale_date.

new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short', timeZone }).format(when);

• Lagra tidpunkter i UTC, som ISO 8601 med en tidszonsförskjutning, och formatera dem i läsarens tidszon. Beräkna ”i dag” och dygnsgränser i den tidszonen, inte serverns.
• Veckor börjar på olika dagar: söndag i USA, måndag i större delen av Europa och lördag i delar av Mellanöstern. Även helgerna skiljer sig åt. Hämta båda från språkvarianten (new Intl.Locale(locale).getWeekInfo() där det finns tillgängligt, eller från datum-bibliotekets lokaldata), aldrig från en konstant. Koder: calendar_names.
• Veckodags- och månadsnamn hämtas från språkvarianten (Intl.DateTimeFormat(locale, { weekday: 'long' })), inte från en lista i koden. Koder: calendar_names.
• Kalendrar. Saudiarabien, Israel och Japan använder den gregorianska kalendern parallellt med kalendrarna Umm al-Qura, hebreisk och japansk kalender. Thailand och Iran har den buddhistiska respektive persiska kalendern som standard. Globalisering visar vilken kalender varje marknad använder.

Pengar#

Formatera belopp med valutan och läsarens språkvariant, aldrig med en symbol bredvid talet. Samma belopp visas som $1,234.50, 1.234,50 $ eller US$1,234.50 beroende på läsaren, och många marknader delar valutasymbol. Koder: hardcoded_currency.

new Intl.NumberFormat(locale, { style: 'currency', currency }).format(1234.5);

Valutan är ett affärsbeslut, inte en formateringsfråga: om läsarens språkvariant ändras ska priserna inte räknas om. Globalisering registrerar vilken valuta varje marknad betalar i.

Sortering, jämförelser och skiftläge#

Varje språk sorterar på sitt eget sätt: på svenska kommer å, ä och ö efter z, på tyska sorteras ä med a och på kinesiska sorterar man efter pinyin eller streck. Sortera läsbar text enligt läsarens språkvariant. Koder: ordinal_sort.

names.sort(new Intl.Collator(locale).compare);

Även skiftlägesomvandling beror på språket: på turkiska är versalen av i İ. Använd toLocaleUpperCase(locale) för läsbar text. Koder: case_mapping.

Listor#

”Anna, Ben och Chen” skrivs på olika sätt i olika språk. Sätt ihop listor enligt språkvarianten. Koder: joined_list.

new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' }).format(names);

Namn, adresser, postnummer och telefonnummer#

• Namn. I många marknader skrivs efternamnet först, och många personer har ett namn eller fler än två. Samla in en persons namn i ett enda fält om inte en marknad behöver namnets delar. Acceptera alla skriftsystem: Åsa, José, 王 och Мария är alla namn. Koder: latin_only_input.
• Adresser. Fält, deras ordning och benämningar skiljer sig åt: delstat och ZIP-kod i USA, prefektur i Japan och inget postnummer alls i vissa marknader. Globalisering visar varje marknads adress i det format som postväsendet använder. Kräv inte fält som en marknad inte använder.
• Postnummer. Lagra dem som text och validera per land, eller inte alls. Ett mönster med fem siffror underkänner de flesta delar av världen. Koder: postal_code_format.
• Telefonnummer. Lagra dem i E.164-format (+46 8 123 456 78), formatera och validera dem med ett bibliotek som känner till varje lands nummerplan, till exempel libphonenumber. Ett mönster som (555) 555-1234 underkänner alla nummer utanför Nordamerika. Koder: phone_number_format.

Måttenheter och papper#

Större delen av världen mäter i kilometer, kilogram och grader Celsius; USA använder miles, pounds och grader Fahrenheit; Storbritannien blandar båda systemen. Hämta måttenheten från läsarens region och formatera den enligt språkvarianten. Koder: fixed_unit.

new Intl.NumberFormat(locale, { style: 'unit', unit: 'kilometer' }).format(12);

Utskrifter och PDF-filer använder marknadens pappersformat: Letter i Nordamerika, A4 nästan överallt annars. Koder: paper_size.

Inmatningsmetoder och typsnitt#

När människor skriver kinesiska, japanska och koreanska använder de en inmatningsmetod (IME): de trycker på Enter för att välja ett ord, inte för att skicka. En händelsehanterare som skickar när användaren trycker på Enter måste ignorera det medan ett ord skapas. Koder: ime_composition.

onKeyDown={event => {
  if (event.key === 'Enter' && !event.nativeEvent.isComposing) submit();
}}

Välj typsnitt som täcker alla skriftsystem du har stöd för, eller använd systemtypsnitt som gör det. Arabiska, kinesiska, hebreiska, japanska, koreanska och thailändska kräver sina egna. Lämna utrymme i radhöjden för skriftsystem med höga teckenmarkeringar, förlita dig inte på kursiv stil (kinesiska och japanska saknar sådan) och lägg aldrig text i bilder, som inte går att översätta.

Höger till vänster#

Arabiska och hebreiska skrivs från höger till vänster, och hela layouten spegelvänds med dem: navigering, justering, ikoner som visar riktning och kolumnernas ordning.

• Ange dir="rtl" på rotelementet för de språken och lang för varje språk.
• Använd logiska egenskaper: margin-inline-start i stället för margin-left, padding-inline-end, inset-inline-start, text-align: start, float: inline-start, och de logiska hjälparklasserna i ditt CSS-ramverk (ms-4, pe-2, text-start). Koder: physical_direction, unmirrored_layout.
• Spegelvänd ikoner som visar riktning, till exempel pilar och vinkelparenteser, men inte andra ikoner, till exempel en klocka eller en uppspelningsknapp.
• Tal, kod, URL:er och namn skrivna med latinska bokstäver förblir vänster-till-höger inuti höger-till-vänster-text. Isolera text från personer eller data med <bdi> så att den inte ändrar ordningen på texten runtomkring.

Utrymme att växa#

Översättningar är ofta längre än engelska, och korta etiketter växer mest: ett tyskt ”OK” kan bli ett helt ord, och en etikett på tio tecken kan bli dubbelt så lång. Ge texten utrymme: låt den radbrytas, låt knappar och flikar växa med sina etiketter och undvik fasta bredder och höjder för text. Korta inte av etiketter som människor behöver för att kunna agera. Koder: clipped_text.

Den pseudöversättningen förlänger varje sträng med dessa mängder, så att du upptäcker problemet innan en översättare gör det:

Kinesiska, japanska och koreanska texter är oftast kortare men kräver högre rader.

En checklista för varje ändring#

• Text som människor läser hämtas från katalogen, och varje mening är ett meddelande.
• Tal, datum, tid, valuta, måttenheter och listor följer läsarens språk- och regioninställningar.
• Sortering och skiftlägeshantering följer läsarens språk- och regioninställningar.
• Namn, adresser, postnummer och telefonnummer fungerar för alla marknader.
• Enter skickar inte formuläret medan ett ord skrivs.
• Layouten använder logiska egenskaper och ger utrymme för längre text.

Relaterat#

• Kontrollen för Globalisering
• Pseudo-Lokalisering
• Global beredskap och kultur
• Globalisering