石家莊網(wǎng)絡(luò)公司已經(jīng)真正成為全球性的網(wǎng)站，這意味著您的客戶現(xiàn)在可以將其產(chǎn)品銷售給世界各地的數(shù)百萬(wàn)人。技術(shù)使向新市場(chǎng)擴(kuò)展變得相對(duì)容易，并且其中一些正在以驚人的速度增長(zhǎng)。這是一個(gè)很好的機(jī)會(huì)，不容錯(cuò)過(guò)。難怪我們將國(guó)際化確定為任何電子商務(wù)增長(zhǎng)戰(zhàn)略的基本趨勢(shì)。
現(xiàn)在，全球約有一半的人口可能在線，但是只有大約25％的網(wǎng)絡(luò)用戶是說(shuō)英語(yǔ)的人，因此您需要使客戶的網(wǎng)站適應(yīng)其他人的需求。轉(zhuǎn)換網(wǎng)站或應(yīng)用程序，或轉(zhuǎn)換僅英語(yǔ)的舊代碼庫(kù)以支持多種語(yǔ)言，都帶來(lái)了許多挑戰(zhàn)。但這還不是全部：您還需要考慮文化差異，這是許多品牌無(wú)法做到的。
在本文中，我們將討論國(guó)際化（i18n）（一種設(shè)計(jì)應(yīng)用或網(wǎng)站，使其無(wú)需進(jìn)行工程更改即可適應(yīng)各種語(yǔ)言和地區(qū)的過(guò)程）以及本地化（l10n）（一種適應(yīng)應(yīng)用程序或網(wǎng)站的過(guò)程）的過(guò)程。通過(guò)翻譯文本并添加特定于語(yǔ)言環(huán)境的組件來(lái)針對(duì)特定地區(qū)或語(yǔ)言的國(guó)際化應(yīng)用程序或網(wǎng)站。我們還將與設(shè)計(jì)師和開(kāi)發(fā)人員交談，以了解他們用于為國(guó)際用戶創(chuàng)建數(shù)字產(chǎn)品的UX最佳實(shí)踐和工具。
通過(guò)Shopify合作伙伴計(jì)劃發(fā)展您的業(yè)務(wù)
無(wú)論您是提供網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)服務(wù)，還是想為Shopify應(yīng)用商店構(gòu)建應(yīng)用程序，Shopify合作伙伴計(jì)劃都將使您成功。免費(fèi)加入并獲得收益共享機(jī)會(huì)，開(kāi)發(fā)人員預(yù)覽環(huán)境和教育資源。
在設(shè)計(jì)過(guò)程中國(guó)際化和本地化的重要性
正如Shopify專注于國(guó)際UX營(yíng)銷的Robyn Larsen所指出的那樣，目標(biāo)是建立一種體驗(yàn)，以支持世界各地的所有用戶，并且當(dāng)這種體驗(yàn)不符合特定的文化時(shí)，就可以對(duì)其進(jìn)行定制。
在SmashingConf Freiburg 2019上查閱她的演講，了解為什么International is the New Mobile First。
對(duì)于Uber的產(chǎn)品設(shè)計(jì)師Femke van Schoonhoven而言，內(nèi)容和本地化在設(shè)計(jì)過(guò)程中（包括原型設(shè)計(jì)和用戶研究階段）發(fā)揮著巨大作用。她的設(shè)計(jì)需要能夠擴(kuò)展并足夠靈活，以支持被翻譯成30多種語(yǔ)言。
在2018年，她正在為巴西和墨西哥市場(chǎng)開(kāi)發(fā)項(xiàng)目，并與另一位設(shè)計(jì)師一起用英語(yǔ)撰寫內(nèi)容。
她回憶說(shuō)：“天真地，我們認(rèn)為我們可以將最后的翻譯留到最后，我們可以在測(cè)試的早晨對(duì)原型進(jìn)行更新。” “我們創(chuàng)建了一個(gè)包含三列（英語(yǔ)，西班牙語(yǔ)和葡萄牙語(yǔ)）的電子表格，并開(kāi)始在電子表格中逐字逐句地翻譯內(nèi)容。我們幾乎不知道這是我們的第一個(gè)錯(cuò)誤。”
Femke知道，不考慮視覺(jué)效果而翻譯內(nèi)容是沒(méi)有意義的。他們?cè)隗w驗(yàn)的流程和層次結(jié)構(gòu)的上下文中丟失了，這在用戶測(cè)試期間導(dǎo)致了錯(cuò)誤。
國(guó)際化：兩種語(yǔ)言的付款確認(rèn)
“在上面的示例中，我們正在確認(rèn)用戶是否要再次開(kāi)始付款過(guò)程，” Femke解釋說(shuō)。“右側(cè)是左側(cè)屏幕的葡萄牙語(yǔ)翻譯不佳，其含義完全不同。當(dāng)我們?cè)诓稍L中邁出這一步時(shí)，用戶就陷入了困惑。
Femke和她的設(shè)計(jì)合作伙伴意識(shí)到，他們完全忽略了對(duì)內(nèi)容進(jìn)行本地化的重要性。他們未能給予內(nèi)容應(yīng)有的重視，并低估了內(nèi)容對(duì)無(wú)法完成目標(biāo)的設(shè)計(jì)和用戶的影響。
“他們沒(méi)有給予內(nèi)容應(yīng)有的關(guān)注，并低估了它對(duì)無(wú)法完成目標(biāo)的設(shè)計(jì)和用戶的影響。”
“本地化不只是翻譯，” Femke警告說(shuō)。“您需要考慮消息的意圖，設(shè)計(jì)的目標(biāo)以及本地環(huán)境。我們忘了考慮轉(zhuǎn)譯，即如何在保持原始意圖，樣式，語(yǔ)氣和上下文的同時(shí)，將消息從一種語(yǔ)言適應(yīng)到另一種語(yǔ)言。”
您可能還會(huì)喜歡： 重新設(shè)計(jì)設(shè)計(jì)過(guò)程：今年如何更有效地工作。
為避免犯同樣的錯(cuò)誤，F(xiàn)emke建議在設(shè)計(jì)過(guò)程中本地化客戶內(nèi)容時(shí)始終考慮上下文和含義。僅僅等到結(jié)束或產(chǎn)品發(fā)布還不夠。在用戶研究過(guò)程中，正確本地化的內(nèi)容至關(guān)重要，因?yàn)樗兄诟嬷蛻魯?shù)字產(chǎn)品的設(shè)計(jì)。
計(jì)劃文字?jǐn)U展
Luke Murphy-Wearmouth是語(yǔ)言學(xué)習(xí)平臺(tái)Memrise的設(shè)計(jì)經(jīng)理，假設(shè) UI中支持盡可能多的語(yǔ)言。設(shè)計(jì)師還應(yīng)優(yōu)雅，體貼地處理所有語(yǔ)言邊緣案例。
“文字的長(zhǎng)度在不同的語(yǔ)言中可能會(huì)千差萬(wàn)別，”盧克解釋說(shuō)。“例如，像“立即開(kāi)始學(xué)習(xí)！”之類的短語(yǔ)。是“ Empieza的aprender ahora！” 西班牙語(yǔ)和“現(xiàn)在開(kāi)始學(xué)習(xí)！” 用普通話，因此我們必須確保頁(yè)面中使用的所有模塊（從按鈕到頁(yè)面部分）都具有足夠的響應(yīng)能力，并且可以容納多行。”
對(duì)于關(guān)鍵區(qū)域，例如標(biāo)題或課程中的學(xué)習(xí)提示，團(tuán)隊(duì)使用一小段JavaScript來(lái)計(jì)算短語(yǔ)中的字符數(shù)，并放置不同的類（“小”，“中”和“大”）在短語(yǔ)上更改大小。如果您需要開(kāi)箱即用的解決方案，Luke建議使用Jeremy Keith的非jQuery版本的FitText。
有時(shí)候，簡(jiǎn)單的策略并不適用。當(dāng)團(tuán)隊(duì)最近重構(gòu)Memrise的學(xué)習(xí)課程時(shí)，他們發(fā)現(xiàn)某些語(yǔ)言中的長(zhǎng)單詞存在問(wèn)題。例如，在意大利語(yǔ)中，數(shù)字串在一起而沒(méi)有空格，因此2,345個(gè)字母變成了milatrecentoquarantacinque。雖然很少會(huì)寫出數(shù)字，但是如果您正在為一家德國(guó)餐廳設(shè)計(jì)一個(gè)移動(dòng)網(wǎng)站并必須考慮Nahrungsmittelunverträglichkeiten（食物不耐癥）怎么辦？
在這種情況下，Luke建議使用斷字法來(lái)解決問(wèn)題，但這是最好的方法。
他解釋說(shuō)：“不幸的是，CSS連字符沒(méi)有考慮明顯的連字符位置，這會(huì)使您的文本顯得很笨拙。”
目前，石家莊網(wǎng)絡(luò)公司針對(duì)可能存在問(wèn)題的語(yǔ)言的最佳策略是使用語(yǔ)言選擇器將連字符設(shè)置為自動(dòng)，如下所示：
css
span:lang(de) {
hyphens: auto;
}
然后使用來(lái)容納麻煩的單詞，這會(huì)添加一個(gè)看不見(jiàn)的連字符，使瀏覽器可以根據(jù)需要中斷單詞。否則，它將呈現(xiàn)時(shí)不帶連字符。
偽本地化和偽翻譯
當(dāng)Shopify開(kāi)始著手翻譯產(chǎn)品（現(xiàn)已提供21種語(yǔ)言）時(shí)，他們?cè)诹鶄€(gè)月內(nèi)交付了前六種新語(yǔ)言。
“在此過(guò)程中，我們看到了產(chǎn)品許多方面的設(shè)計(jì)突破，” Robyn回憶道。“我們觀察到文本開(kāi)始超出按鈕邊界框的出血，我們觀察到網(wǎng)格開(kāi)始進(jìn)入排水溝，并且觀察到導(dǎo)航對(duì)于非英語(yǔ)用戶來(lái)說(shuō)變得難以辨認(rèn)。”
我們觀察到文本開(kāi)始超出按鈕邊界框的出血，觀察到網(wǎng)格開(kāi)始進(jìn)入排水溝，并且觀察到導(dǎo)航對(duì)于非英語(yǔ)用戶來(lái)說(shuō)變得難以辨認(rèn)。
Robyn Larsen，Shopify
為了幫助對(duì)客戶的設(shè)計(jì)進(jìn)行壓力測(cè)試并假定最壞的情況下進(jìn)行文本擴(kuò)展，Robyn建議使用一種稱為偽本地化的技術(shù)（一種軟件測(cè)試實(shí)踐，使您可以通過(guò)復(fù)制語(yǔ)言來(lái)擴(kuò)展文本）。另外，在您進(jìn)入瀏覽器之前，請(qǐng)查看適用于Sketch的偽翻譯插件，該插件非常適合測(cè)試設(shè)計(jì)在各種語(yǔ)言中的外觀。
“作為最佳實(shí)踐，請(qǐng)考慮使用德語(yǔ)進(jìn)行壓力測(cè)試，” Robyn建議。“它通常比英語(yǔ)長(zhǎng)30％，或者使用中文，日語(yǔ)或韓語(yǔ)等基于字符的語(yǔ)言，這往往會(huì)破壞核心功能。”
國(guó)際化偽本地化熱插拔工具
Shopify的國(guó)際團(tuán)隊(duì)構(gòu)建了一種語(yǔ)言熱交換工具，使開(kāi)發(fā)人員可以使用各種語(yǔ)言或偽翻譯對(duì)瀏覽器中的UI進(jìn)行壓力測(cè)試。
計(jì)劃可維護(hù)性
Robyn建議在圖像處理方面采用全球化方法，以確保可以輕松地維護(hù)客戶的網(wǎng)站，擴(kuò)展其規(guī)模，并且由于所有翻譯工作而不會(huì)導(dǎo)致加載速度緩慢。
“讓我們舉一個(gè)非常簡(jiǎn)單的例子，”羅賓解釋。“對(duì)于我們導(dǎo)出到臺(tái)式機(jī)，平板電腦和移動(dòng)設(shè)備的每種視覺(jué)，我們還需要導(dǎo)出該圖像以支持視網(wǎng)膜顯示。相當(dāng)于六個(gè)圖像。將語(yǔ)言添加到混合中，這是多達(dá)42張圖像以支持7種語(yǔ)言。這對(duì)網(wǎng)站的性能不利！”
如果您使用的是沒(méi)有文字的視覺(jué)圖像，則只需處理六張圖像，而不是可用于所有語(yǔ)言的42張圖像。
“可以在Slack.com上找到生產(chǎn)中可維護(hù)性的一個(gè)很好的例子，” Robyn指出。“他們的團(tuán)隊(duì)創(chuàng)建了一個(gè)HTML / CSS框架，該框架可以復(fù)制其產(chǎn)品，從而可以輕松地交換翻譯和圖像。在Shopify，它啟發(fā)了我們?cè)贒otcom屬性上的多個(gè)頁(yè)面上實(shí)現(xiàn)UI插圖，使我們能夠在顯示本地相關(guān)內(nèi)容的同時(shí)顯示管理員的簡(jiǎn)化版本。”
國(guó)際化：文化上獨(dú)立的形象
創(chuàng)建文化上獨(dú)立的圖像（例如在Shopify的電子郵件營(yíng)銷頁(yè)上使用這些英語(yǔ)，德語(yǔ)和日語(yǔ)版本）可確?？删S護(hù)性并節(jié)省時(shí)間和精力。
計(jì)劃文化差異
使產(chǎn)品適應(yīng)用戶的文化差異也很重要，這不僅僅是將客戶的網(wǎng)站或應(yīng)用翻譯成另一種語(yǔ)言而已。
“當(dāng)今，大多數(shù)現(xiàn)代網(wǎng)站設(shè)計(jì)都具有簡(jiǎn)潔明了的外觀，并帶有很多負(fù)面空間，” Robyn解釋說(shuō)。“但是，在日本，網(wǎng)站上有很多密集文本。這并不是因?yàn)槿毡菊军c(diǎn)隨意地本地化，這種外觀實(shí)際上是日本消費(fèi)者所喜歡的，他們更喜歡在首頁(yè)上看到所有內(nèi)容！”
例如，在加拿大，Shopify能夠使用較少的傳統(tǒng)圖像來(lái)傳達(dá)多樣性主題，而這種方法在日本仍然行不通，因?yàn)槿毡镜奈幕匀环浅鹘y(tǒng)，并且對(duì)更自由的圖像很敏感。
國(guó)際化：西方與亞洲文化偏好
西方文化偏向于更簡(jiǎn)單的外觀，而亞洲國(guó)家/地區(qū)的網(wǎng)站往往很繁忙，此處以星巴克的.com和.co.jp版本為例。
與說(shuō)英語(yǔ)作為第二語(yǔ)言的人一起組織您創(chuàng)建的內(nèi)容
當(dāng)跨文化設(shè)計(jì)的作者，插畫家Senongo Akpem在內(nèi)容長(zhǎng)或用戶界面復(fù)雜的頁(yè)面上工作時(shí)，他發(fā)現(xiàn)保持視線以英語(yǔ)為第二語(yǔ)言的用戶非常有用。
Senongo解釋說(shuō)：“即使您能說(shuō)流利的英語(yǔ)，在屏幕上閱讀也會(huì)使人迷失方向，而在閱讀印刷品時(shí)卻沒(méi)有視覺(jué)提示。” “一種策略是在頁(yè)面頂部為人們提供內(nèi)容細(xì)分。您的讀者可以掃描此列表以獲取上下文，并快速進(jìn)入所需的部分。對(duì)于更長(zhǎng)的報(bào)告或?qū)W術(shù)內(nèi)容，這些可能是鏈接到不同章節(jié)的一句話關(guān)鍵摘要。”
一種策略是在頁(yè)面頂部為人們提供內(nèi)容細(xì)分。您的讀者可以掃描此列表以獲取上下文，并快速進(jìn)入所需的部分。
Senongo Akpem
作為第二種國(guó)際化策略，Senongo建議在與客戶合作時(shí)提供清晰的用戶入門信息。這包括為UI的組織原理和功能提供透明，圖解的視圖，這可以幫助可能不太了解英語(yǔ)的人準(zhǔn)確地了解他們所要學(xué)習(xí)的內(nèi)容。
國(guó)際化：英國(guó)護(hù)理人員津貼信息網(wǎng)站
由英國(guó)政府?dāng)?shù)字服務(wù)局（Government Digital Service）創(chuàng)建的英國(guó)信息網(wǎng)站gov.uk ，在護(hù)理津貼的頁(yè)面頂部顯示了一個(gè)目錄。
讓客戶的用戶選擇自己的語(yǔ)言環(huán)境
伊萊Schütze拉米雷斯，在一個(gè)網(wǎng)絡(luò)工程師Monzo，國(guó)際化時(shí)所使用的語(yǔ)言環(huán)境來(lái)區(qū)分網(wǎng)站版本。語(yǔ)言環(huán)境是語(yǔ)言和地區(qū)的組合。例如，en-US是美式英語(yǔ)，en-GB而是英式英語(yǔ)（“ en”是英語(yǔ)的語(yǔ)言代碼）。但是，當(dāng)您對(duì)客戶的應(yīng)用或網(wǎng)站進(jìn)行本地化時(shí)，如何確定將顯示其客戶的用戶的語(yǔ)言環(huán)境呢？
Eli解釋說(shuō)：“您可以通過(guò)幾種方法來(lái)猜測(cè)用戶的首選語(yǔ)言環(huán)境。” “例如，使用他們的IP地址推斷他們的位置，但是這種方法僅在某些時(shí)候是正確的。您永遠(yuǎn)無(wú)法真正知道您的用戶是本地人，正在旅行，已移民還是什至只是在學(xué)習(xí)一種新語(yǔ)言！”
Eli建議讓客戶的用戶選擇自己的語(yǔ)言環(huán)境。使語(yǔ)言環(huán)境切換器易于在您的站點(diǎn)上找到，并記住下次的選擇。避免僅將語(yǔ)言表示為標(biāo)志，并確保用該語(yǔ)言寫出語(yǔ)言名稱，以便用戶可以輕松識(shí)別。
選擇合適的國(guó)際化圖書館
Taulia的UI工程師Robin Dykema建議，在為客戶設(shè)置好翻譯后，i18n庫(kù)可以根據(jù)用戶的語(yǔ)言環(huán)境幫助提取正確的文本。
她承認(rèn)：“在處理性別和多元化規(guī)則時(shí)，決定顯示哪種文字會(huì)變得非常棘手，性別和多元化規(guī)則會(huì)因語(yǔ)言而異。” “使用圖書館可以最大程度地減少這種痛苦，并有助于傳遞動(dòng)態(tài)文本。”
有幾個(gè)優(yōu)秀的國(guó)際化框架和庫(kù)可供選擇。對(duì)于較小的應(yīng)用程序，Robin建議使用輕量級(jí)的庫(kù)（例如Polyglot），該庫(kù)可以提供足夠的功能以進(jìn)行正確的本地化。對(duì)于更大，更復(fù)雜的應(yīng)用程序，像i18next這樣的成熟的國(guó)際化框架可能更合適，并提供其他國(guó)際化支持，例如檢測(cè)瀏覽器語(yǔ)言和緩存翻譯功能。其他流行的庫(kù)包括Format，Lingui和Globalize。
國(guó)際化：國(guó)際化圖書館
國(guó)際化庫(kù)i18next與流行的前端框架（例如React，Angular和Vue）以及Node.js，PHP，iOS，Android等集成在一起。
格式化日期，時(shí)間和數(shù)字
即使本地化的應(yīng)用程序只會(huì)使用英語(yǔ)，本地化時(shí)格式化日期，時(shí)間和數(shù)字也是必不可少的。
羅賓指出：“美國(guó)的日期格式與歐洲的日期格式不同。” “例如，像'2/3/2020'這樣的日期將根據(jù)用戶的原籍國(guó)做出不同的解釋。不同的國(guó)家/地區(qū)也喜歡使用不同的時(shí)鐘（24小時(shí)和12小時(shí)），因此計(jì)算時(shí)區(qū)可能非常困難。數(shù)字的格式也將因地區(qū)而異。例如，在美國(guó)，您將格式123456.78設(shè)置為123,456.78，而在西班牙，相同的數(shù)字格式將設(shè)置為123.456,78。”
一些國(guó)際化庫(kù)可能已經(jīng)具有日期和數(shù)字格式設(shè)置功能。對(duì)于那些沒(méi)有的人，Robin建議使用本機(jī)瀏覽器API intl —一種用于簡(jiǎn)單格式設(shè)置的輕量級(jí)選項(xiàng)。對(duì)于更復(fù)雜的格式，較重的庫(kù)（例如Moment或Moment Timezone）可能更有用。替代品包括世昕，日期FNS和Day.js。
確保您為客戶的項(xiàng)目創(chuàng)建的在線表單包含所有內(nèi)容
如果您的名字包含特殊字符，變音符號(hào)或變音符號(hào)，或者用與英語(yǔ)字母不同的腳本書寫，那么您會(huì)熟悉一些人在在線填寫表格時(shí)遇到的問(wèn)題。
正如Eli所指出的那樣，開(kāi)發(fā)人員臭名昭著地對(duì)人們的名字做出了許多假設(shè)。從歷史上講，在為全球受眾群體服務(wù)時(shí)，字符編碼一直是頭疼的問(wèn)題，這無(wú)濟(jì)于事。過(guò)去，計(jì)算機(jī)很難識(shí)別字母以外的字符，但幸運(yùn)的是，情況已不再如此。
“請(qǐng)確保您的網(wǎng)站使用Unicode編碼，即UTF-8確保您的網(wǎng)站支持所有腳本，字母，特殊字符，以及重要的是emoji表情，” Eli建議。“一旦有了這些，就可以讓您的表單（尤其是用戶輸入姓名的表單）接受的不僅是AZ字符，還可以創(chuàng)建一個(gè)包含所有內(nèi)容的用戶體驗(yàn)。如果您要提供諸如銀行或教育等基本服務(wù)，這將變得至關(guān)重要。”
國(guó)際化：Jet2無(wú)效名稱問(wèn)題
英國(guó)休閑航空公司Jet2（左）將EliSchützeRamírez的名字稱為“無(wú)效”，甚至不接受撇號(hào)，這可能是災(zāi)難性的，尤其是對(duì)于愛(ài)爾蘭人的名字。另一方面，EasyJet（右）則采用了更為全球化的方法。名稱沒(méi)有問(wèn)題。
考慮與語(yǔ)言相關(guān)的CSS和CSS邏輯屬性
當(dāng)提到國(guó)際化時(shí)，CSS可能并不是想到的第一件事，但是設(shè)計(jì)師和開(kāi)發(fā)人員Chen Hui Jing指出，由于CSS的目的是在網(wǎng)絡(luò)上呈現(xiàn)內(nèi)容，因此它實(shí)際上起著重要的作用。 ，尤其是對(duì)于多語(yǔ)言網(wǎng)站。
您可能還會(huì)喜歡： 使用HTML和CSS擁抱本地化和多語(yǔ)言內(nèi)容。
她建議特別注意:lang()偽類和CSS邏輯屬性。
該:lang()偽類
該:lang()偽類選擇識(shí)別即使語(yǔ)言元素之外聲明的內(nèi)容的語(yǔ)言。
例如，一行帶有兩種語(yǔ)言的標(biāo)記，如下所示：
html
We use italics to emphasize words in English, 但是中文則是用著重號(hào).
…可以使用以下樣式：
css
em:lang(zh) {
font-style: normal;
text-emphasis: dot;
}
如果您的瀏覽器支持text-emphasisCSS屬性，則應(yīng)該能夠看到在內(nèi)的每個(gè)漢字上添加了強(qiáng)調(diào)標(biāo)記（傳統(tǒng)上用于強(qiáng)調(diào)東亞文字的印刷符號(hào)）。Chrome需要-webkit-前綴。
盡管lang屬性未應(yīng)用于元素，但是應(yīng)用于其父元素，偽類仍然有效。如果我們使用更常見(jiàn)的屬性選擇器，例如[lang="zh]，則此屬性必須在元素上才能生效。
CSS邏輯屬性
CSS邏輯特性是寫入模式無(wú)關(guān)，因?yàn)樗鼈儾灰蕾囉谖锢矸较騮op，right，bottom，和left。當(dāng)頁(yè)面的書寫模式垂直或從右到左運(yùn)行時(shí)，使用物理方向可能會(huì)造成混淆。
方向不是物理方向，而是基于block方向（即在特定書寫模式下堆疊的方向框（例如，段落））和inline方向（即在一行上排序內(nèi)容的方向）。
有用于大小調(diào)整，定位和浮動(dòng)以及邊界，邊距和填充的對(duì)應(yīng)映射。
用于大小調(diào)整的映射如下：widthto inline-size和heightto block-size。
使用容器的邏輯頂部inset-before，而使用容器的邏輯底部inset-after。使用容器的邏輯左側(cè)inset-start，而使用容器的邏輯右側(cè)inset-end。
邊框，邊距和填充也有對(duì)應(yīng)的映射，它們是：
top 至 block-start
right 至 inline-end
bottom 至 block-end
left 至 inline-start
有關(guān)CSS和國(guó)際化的更多信息，請(qǐng)查看Hui Jing的相應(yīng)博客文章。
使用Shopify Plus翻譯您的國(guó)際商店
當(dāng)你的客戶國(guó)際市場(chǎng)銷售，他們就會(huì)有不同的選擇排序與Shopify加上翻譯，取決于其國(guó)際化的做法是多店或多種貨幣，或者你推薦作為合作伙伴。
Shopify Plus代理機(jī)構(gòu)We Make Websites的聯(lián)合創(chuàng)始人Alex O'Byrne挖掘了利弊：
多店
您為每個(gè)區(qū)域設(shè)置單獨(dú)的商店，每個(gè)商店使用一種語(yǔ)言：
整個(gè)前端只有一種語(yǔ)言
不需要額外的翻譯應(yīng)用程序，因此沒(méi)有額外的成本，也沒(méi)有與其他前端應(yīng)用程序不兼容的風(fēng)險(xiǎn)
對(duì)于SEO來(lái)說(shuō)更好，因?yàn)樵摼W(wǎng)站是真正的本地語(yǔ)言
主要缺點(diǎn)是需要更多的資源來(lái)維護(hù)整個(gè)商店的內(nèi)容和主題翻譯。您還需要一種方法來(lái)維護(hù)同一主題代碼庫(kù)的多個(gè)副本，例如針對(duì)所有商店的腳本化部署。
多幣種
您可以通過(guò)以下兩種方式運(yùn)行一家商店，將其翻譯成多種語(yǔ)言：
1. Shopify多語(yǔ)言API
這是最新的，更有利的選擇。
它需要安裝受支持的第三方翻譯應(yīng)用程序和兼容的主題。
受限的應(yīng)用程序與多國(guó)語(yǔ)言兼容。
它允許Shopify商家翻譯成五種其他語(yǔ)言，而Plus商家翻譯成20種語(yǔ)言。
這種方法對(duì)您的SEO很友好：
每種語(yǔ)言都托管在您網(wǎng)站的子文件夾中，使搜索引擎可以獨(dú)立地對(duì)其進(jìn)行爬網(wǎng)。
hreflang 標(biāo)簽是自動(dòng)實(shí)現(xiàn)的，可幫助搜索引擎了解每種語(yǔ)言的定位。
2.第三方應(yīng)用程序，動(dòng)態(tài)翻譯商店
這是一種過(guò)時(shí)的策略，在Shopify的多語(yǔ)言API發(fā)行之前很流行
通過(guò)JavaScript進(jìn)行翻譯，從而獲得本地化的客戶體驗(yàn)
這種方法對(duì)SEO可能是致命的
有你的快照！哦，這里有一些翻譯提示：
谷歌翻譯是行不通的。如果可能，請(qǐng)堅(jiān)持以母語(yǔ)為母語(yǔ)的人，以幫助您進(jìn)行翻譯。
在翻譯方面，應(yīng)優(yōu)先考慮客戶的最暢銷產(chǎn)品。
正確翻譯語(yǔ)音語(yǔ)調(diào)至關(guān)重要。
為多樣性而設(shè)計(jì)
網(wǎng)絡(luò)在比以往更多的地方聯(lián)系了更多的人，現(xiàn)在許多人來(lái)自印度，印度尼西亞，巴西和尼日利亞等新興市場(chǎng)。僅考慮西方受眾的設(shè)計(jì)和開(kāi)發(fā)是不夠的。如果您的客戶想打入新市場(chǎng)，至關(guān)重要的是他們的網(wǎng)站和應(yīng)用程序能夠反映世界的真實(shí)多樣性。
為了在不疏遠(yuǎn)（甚至使他們感到沮喪和冒犯）的情況下吸引更多用戶，請(qǐng)學(xué)習(xí)國(guó)際化和本地化技術(shù)（如本文中介紹的技術(shù)），即使您客戶的客戶可能主要是講英語(yǔ)的人。不要依賴假設(shè)，請(qǐng)記住，許多文化與您的文化完全不同。從一開(kāi)始就考慮到這些差異進(jìn)行設(shè)計(jì)和開(kāi)發(fā)，您將改善客戶網(wǎng)站的用戶體驗(yàn)，最終將增加轉(zhuǎn)化。
