var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),y=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of u(n))!k.call(a,c)&&c!==s&&l(a,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return a};var f=(a,n,s)=>(s=a!=null?h(N(a)):{},o(n||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),w=a=>o(l({},"__esModule",{value:!0}),a);var r=g((v,i)=>{i.exports=_jsx_runtime});var j={};y(j,{default:()=>d,frontmatter:()=>b});var e=f(r()),b={title:"i18n issues you may meet",date:"2025-04-08",tags:["i18n"]};function p(a){let n={a:"a",br:"br",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",ul:"ul",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:"layout issues"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:["When your users are in ",(0,e.jsx)(n.code,{children:"Arabic"}),", the document will be displayed from right to left. So you need to adjust the layout of the document."]}),` `]}),` `,(0,e.jsx)(n.pre,{className:"language-css",children:(0,e.jsxs)(n.code,{className:"language-css code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token selector",children:"html"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"direction"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," rtl",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"If you use a position absolute property, let element on the left, then when you change the direction of the document, the element still stays on the left. You need to adjust the position of the element to the right."}),` `,(0,e.jsx)(n.pre,{className:"language-css",children:(0,e.jsxs)(n.code,{className:"language-css code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"/* before, direction: ltr */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsx)(n.span,{className:"token class",children:".element"})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"position"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," absolute",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"left"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"/* after, direction: rtl */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsx)(n.span,{className:"token class",children:".element"})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"position"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," absolute",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"right"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"different language has different character length, so you need to adjust the width and height of the element."}),` `]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," en ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:`"What's the weather like today?"`}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," zh ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u4ECA\u5929\u5929\u6C14\u600E\u4E48\u6837\uFF1F"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ar ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u0645\u0627 \u0647\u0648 \u0627\u0644\u0637\u0642\u0633 \u0627\u0644\u064A\u0648\u0645 \u061F"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ja ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u4ECA\u65E5\u306E\u5929\u6C17\u306F\u3069\u3046\u3067\u3059\u304B\uFF1F"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ko ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\uC624\uB298 \uB0A0\uC528\uB294 \uC5B4\uB54C\uC694?"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," es ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\xBFQu\xE9 tiempo hace hoy?"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," fr ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:`"Quel temps fait-il aujourd'hui?"`}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," de ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Wie ist das Wetter heute?"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," it ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Che tempo fa oggi?"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," pt ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Qual a temperatura hoje?"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," nl ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Wat is de weer vandaag?"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," pl ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Jakie jest pogoda dzisiaj?"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ro ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Ce vreme este azi?"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," tr ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Bug\xFCn hava nas\u0131l?"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," vi ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"H\xF4m nay th\u1EDDi ti\u1EBFt th\u1EBF n\xE0o?"'}),` `]})]})}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"different countries have different price format"}),` `]}),` `,(0,e.jsx)(n.p,{children:"For example, in Brazil (pt-BR), prices use commas as decimal separators instead of periods/points:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// US/UK format"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["$10",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token number",children:"50"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"using decimal point",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// Brazil format"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token constant",children:"R"}),"$ ",(0,e.jsx)(n.span,{className:"token number",children:"10"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),(0,e.jsx)(n.span,{className:"token number",children:"50"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"using comma ",(0,e.jsx)(n.span,{className:"token keyword module",children:"as"})," decimal separator",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"sort"}),` `]}),` `,(0,e.jsx)(n.p,{children:"If you want to sort an array that includes en/zh/ja and so on, you should not use Array.sort, it just sort by UTF-16 code unit. Then it will be out of order."}),` `,(0,e.jsx)(n.p,{children:"For example:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:'"Apple"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Google"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"facebook"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u963F\u91CC"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u817E\u8BAF"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u5B57\u8282"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u30BD\u30CB\u30FC"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u30C8\u30E8\u30BF"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u4EFB\u5929\u5802"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"sort"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:'// ["Apple", "Google", "facebook", "\u30BD\u30CB\u30FC", "\u30C8\u30E8\u30BF", "\u4EFB\u5929\u5802", "\u5B57\u7BC0", "\u817E\u8BAF", "\u963F\u91CC"]'}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["So you need to use ",(0,e.jsx)(n.code,{children:"localeCompare"}),":"]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"createStringSorter"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," caseInsensitive ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," order ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:'"en"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"zh"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"ja"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," collator ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,e.jsxs)(n.span,{className:"token class-name",children:["Intl",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"Collator"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"zh"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"sensitivity"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," caseInsensitive ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"base"'})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"variant"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"getGroup"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"str"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token regex",children:[(0,e.jsx)(n.span,{className:"token regex-delimiter",children:"/"}),(0,e.jsxs)(n.span,{className:"token regex-source language-regex",children:[(0,e.jsx)(n.span,{className:"token anchor function",children:"^"}),(0,e.jsxs)(n.span,{className:"token char-class",children:[(0,e.jsx)(n.span,{className:"token char-class-punctuation punctuation",children:"["}),(0,e.jsxs)(n.span,{className:"token range",children:[(0,e.jsx)(n.span,{className:"token escape",children:"\\u3040"}),(0,e.jsx)(n.span,{className:"token range-punctuation operator",children:"-"}),(0,e.jsx)(n.span,{className:"token escape",children:"\\u309f"})]}),(0,e.jsxs)(n.span,{className:"token range",children:[(0,e.jsx)(n.span,{className:"token escape",children:"\\u30a0"}),(0,e.jsx)(n.span,{className:"token range-punctuation operator",children:"-"}),(0,e.jsx)(n.span,{className:"token escape",children:"\\u30ff"})]}),(0,e.jsx)(n.span,{className:"token char-class-punctuation punctuation",children:"]"})]})]}),(0,e.jsx)(n.span,{className:"token regex-delimiter",children:"/"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"test"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"str",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"ja"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token regex",children:[(0,e.jsx)(n.span,{className:"token regex-delimiter",children:"/"}),(0,e.jsxs)(n.span,{className:"token regex-source language-regex",children:[(0,e.jsx)(n.span,{className:"token anchor function",children:"^"}),(0,e.jsxs)(n.span,{className:"token char-class",children:[(0,e.jsx)(n.span,{className:"token char-class-punctuation punctuation",children:"["}),(0,e.jsxs)(n.span,{className:"token range",children:[(0,e.jsx)(n.span,{className:"token escape",children:"\\u4e00"}),(0,e.jsx)(n.span,{className:"token range-punctuation operator",children:"-"}),(0,e.jsx)(n.span,{className:"token escape",children:"\\u9fff"})]}),(0,e.jsx)(n.span,{className:"token char-class-punctuation punctuation",children:"]"})]})]}),(0,e.jsx)(n.span,{className:"token regex-delimiter",children:"/"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"test"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"str",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"zh"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"en"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:["a",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," b"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," groupA ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"getGroup"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"a",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," groupB ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"getGroup"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"b",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"groupA ",(0,e.jsx)(n.span,{className:"token operator",children:"!=="})," groupB",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," order",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"indexOf"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"groupA",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," order",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"indexOf"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"groupB",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," collator",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"compare"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"a",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," b",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," items ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:'"Apple"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Google"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"facebook"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u963F\u91CC"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u817E\u8BAF"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u5B57\u8282"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u30BD\u30CB\u30FC"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u30C8\u30E8\u30BF"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"\u4EFB\u5929\u5802"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// default: en \u2192 zh \u2192 ja"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" items",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"sort"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token function",children:"createStringSorter"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:'// ["Apple", "facebook", "Google", "\u963F\u91CC", "\u4EFB\u5929\u5802", "\u817E\u8BAF", "\u5B57\u8282", "\u30BD\u30CB\u30FC", "\u30C8\u30E8\u30BF"]'}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// ja \u2192 zh \u2192 en"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" items",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"sort"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token function",children:"createStringSorter"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"order"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:'"ja"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"zh"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"en"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.h2,{children:"text transformation"}),` `,(0,e.jsxs)(n.p,{children:["Different languages have different text transformation rules. For example, in Turkish, the uppercase of ",(0,e.jsx)(n.code,{children:"i"})," is ",(0,e.jsx)(n.code,{children:"\u0130"}),(0,e.jsx)(n.br,{}),` `,"(with a dot), not ",(0,e.jsx)(n.code,{children:"I"}),"."]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token string",children:'"i"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"toUpperCase"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "I" \u2717'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token string",children:'"i"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"toLocaleUpperCase"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"tr"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "\u0130" \u2713'}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"So when you need to transform text case, use toLocaleUpperCase / toLocaleLowerCase with the correct locale:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsx)(n.code,{className:"language-js code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Badge"})," text",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token function",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"Beta"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"toLocaleUpperCase"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"i18n",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"language"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"replace"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"_"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"-"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:`Note: toLocaleUpperCase requires a BCP 47 language tag (e.g., zh-CN), but i18next uses underscores (e.g., zh_CN). Passing the wrong format will crash the page:`}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token string",children:'"beta"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"toLocaleUpperCase"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"zh_CN"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// \u274C RangeError: Incorrect locale information provided"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token string",children:'"beta"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"toLocaleUpperCase"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"zh_TW"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// \u274C RangeError: Incorrect locale information provided"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token string",children:'"beta"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"toLocaleUpperCase"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"zh-CN"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// \u2705 "BETA"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token string",children:'"beta"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"toLocaleUpperCase"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"zh-TW"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// \u2705 "BETA"'}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:'Always convert the locale format before passing it: i18n.language.replace("_", "-")'}),` `,(0,e.jsx)(n.p,{children:"Or:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"init"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"lng"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"zh-CN"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"supportedLngs"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:'"en"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"zh-CN"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"zh-TW"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"ja"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"ko"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"tr"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.h2,{children:"plural rules"}),` `,(0,e.jsx)(n.p,{children:"Different languages have different plural rules. For example:"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"English has two forms: singular (1 minute) and plural (2 minutes)"}),` `,(0,e.jsx)(n.li,{children:"Chinese has only one form: 1 \u5206\u949F, 2 \u5206\u949F"}),` `,(0,e.jsx)(n.li,{children:"Russian has three forms: 1 \u043C\u0438\u043D\u0443\u0442\u0430, 2 \u043C\u0438\u043D\u0443\u0442\u044B, 5 \u043C\u0438\u043D\u0443\u0442"}),` `,(0,e.jsx)(n.li,{children:"Arabic has six forms: 0 \u062F\u0642\u064A\u0642\u0629, 1 \u062F\u0642\u064A\u0642\u0629, 2 \u062F\u0642\u064A\u0642\u0629, 3-10 \u062F\u0642\u0627\u0626\u0642, 11-99 \u062F\u0642\u064A\u0642\u0629, 100+ \u062F\u0642\u064A\u0642\u0629"}),` `]}),` `,(0,e.jsxs)(n.p,{children:["You can use libraries like ",(0,e.jsx)(n.code,{children:"i18next"})," to handle plural rules:"]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// English"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"key"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"count"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "1 minute"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"key"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"count"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "2 minutes"'}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// Chinese"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"key"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"count"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "1\u5206\u949F"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"key"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"count"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "2\u5206\u949F"'}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// Russian"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"key"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"count"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "1 \u043C\u0438\u043D\u0443\u0442\u0430"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"key"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"count"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "2 \u043C\u0438\u043D\u0443\u0442\u044B"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"key"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"count"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"5"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "5 \u043C\u0438\u043D\u0443\u0442"'}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"key"})," in i18next is a unique identifier for your translation strings. It's like a variable name that maps to different translations in different languages. Here's how it works:"]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// translation files"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// en.json"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:'"time.minutes"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:'"one"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"{{count}} minute"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:'"other"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"{{count}} minutes"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// zh.json"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:'"time.minutes"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"{{count}}\u5206\u949F"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// Usage"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'time.minutes'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"count"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "1 minute" in English, "1\u5206\u949F" in Chinese'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["i18next",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'time.minutes'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"count"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,e.jsx)(n.span,{className:"token comment",children:'// "2 minutes" in English, "2\u5206\u949F" in Chinese'}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"The key can be:"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:["A simple string: ",(0,e.jsx)(n.code,{children:'"welcome"'})]}),` `,(0,e.jsxs)(n.li,{children:["A nested path: ",(0,e.jsx)(n.code,{children:'"common.buttons.submit"'})]}),` `,(0,e.jsxs)(n.li,{children:["A key with plural forms: ",(0,e.jsx)(n.code,{children:'"time.minutes"'})]}),` `]}),` `,(0,e.jsxs)(n.p,{children:["The plural forms like ",(0,e.jsx)(n.code,{children:"one"})," and ",(0,e.jsx)(n.code,{children:"other"})," are special keys that i18next uses to handle different plural rules:"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"one"}),": Used for singular form (when count is 1)"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"other"}),": Used for plural form (when count is 0 or > 1)"]}),` `]}),` `,(0,e.jsx)(n.p,{children:"Some languages have more plural forms. For example, in Russian:"}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// ru.json"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:'"time.minutes"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:'"one"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"{{count}} \u043C\u0438\u043D\u0443\u0442\u0430"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// 1"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:'"few"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"{{count}} \u043C\u0438\u043D\u0443\u0442\u044B"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// 2-4"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:'"many"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"{{count}} \u043C\u0438\u043D\u0443\u0442"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// 5-20"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:'"other"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"{{count}} \u043C\u0438\u043D\u0443\u0442\u044B"'})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// 21, 22, 25-30, etc."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["The plural rules are based on the ",(0,e.jsx)(n.a,{href:"https://cldr.unicode.org/",children:"CLDR (Common Locale Data Repository)"})," specification, which defines plural rules for different languages. i18next automatically selects the correct form based on the count and the current language's rules."]}),` `,(0,e.jsx)(n.p,{children:"If your translation files don't support nested structure, you have a simple solution:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsx)(n.code,{className:"language-js code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:["minute ",(0,e.jsx)(n.span,{className:"token operator",children:">"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token function",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"{num} minutes) : t("'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"num",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," minute",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"But this approach has several problems:"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"It doesn't work for languages with more than two plural forms (like Russian, Arabic, etc.)"}),` `,(0,e.jsx)(n.li,{children:"It doesn't handle zero correctly in many languages"}),` `,(0,e.jsx)(n.li,{children:"It's not maintainable - you need to write this logic everywhere you need plural forms"}),` `,(0,e.jsx)(n.li,{children:"It doesn't follow the CLDR standards, which means your translations might be incorrect"}),` `,(0,e.jsx)(n.li,{children:"It makes it harder for translators to work with your translation files"}),` `]}),` `,(0,e.jsx)(n.p,{children:"For example, in Russian:"}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// Wrong approach"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["minute ",(0,e.jsx)(n.span,{className:"token operator",children:">"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token function",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"{num} \u043C\u0438\u043D\u0443\u0442"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token function",children:"t"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"{num} \u043C\u0438\u043D\u0443\u0442\u0430"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// This would be wrong for:"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:'// 2-4 minutes (should be "\u043C\u0438\u043D\u0443\u0442\u044B")'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:'// 5-20 minutes (should be "\u043C\u0438\u043D\u0443\u0442")'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:'// 21, 22, 25-30 minutes (should be "\u043C\u0438\u043D\u0443\u0442\u044B")'}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"That's why it's better to use i18next's built-in plural handling:"}),` `,(0,e.jsx)(n.h2,{children:"policy issues"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Don't show strikethrough price in Turkey for legal reasons"}),` `]}),` `,(0,e.jsx)(n.p,{children:`Due to the Turkish government's regulations, we cannot display the strikethrough price on the product page. For example, if you have a product with a original price of 100 TL and a discounted price of 80 TL, you cannot display it as 100 TL \u2192 80 TL. You need to display it as 80 TL.`}),` `,(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:""}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"current-price",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"80",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"del"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"original-price",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"100",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"currency",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\u20BA",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})})]})}function d(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(p,{...a})}):p(a)}return w(j);})(); ;return Component;