2011 年 9 月 11 日，星期日
如果想在網站上為世界各地的使用者提供本地化內容，似乎只要翻譯文字就能輕鬆大功告成了，對吧？事情可能沒有想像中那麼簡單。Google 網站管理員團隊經常打造需翻譯成超過 40 種語言的網站，以下是我們在針對其他語言和地區推出網頁時考量的事項。
(您或許會認為自己的網站僅提供英文內容，因此不會受到下列問題影響，但如果訪客慣用英文以外的語言，就可能透過 Google 翻譯等工具將網站內容翻譯成該語言來查看。這種流量應該會顯示在數據分析資訊主頁中，方便您瞭解有多少訪客並未以預期的方式瀏覽網站)
語言版本數量不等於 HTML 範本數量
我們特別建議針對所有語言版本使用同一份範本，而且隨時都要維持範本 HTML 的簡潔。
將每種語言的 HTML 程式碼保持一致具有易於維護的優點，這樣在修正錯誤時，就不必漫無目的耗費過多時間調整各語言的 HTML 程式碼。請盡可能確保網頁程式碼的簡潔，並在 CSS 中處理所有樣式問題。大多數翻譯工具都會從 HTML 文件中剖析可翻譯的內容字串，保持程式碼簡潔的好處之一就是能在 HTML 有效且結構良好的情況下，大幅簡化剖析工作。
字串長度
如果您的網站設計要求文字必須與固定大小的元素適當搭配，翻譯文字的行為可能會嚴重破壞協調性。比如，網站左側的導覽文字翻譯成多種語言後，文字字串長度都有可能大幅增加；以內容相同的英文版和荷蘭文版導覽文字為例，這兩種語言的字串長度就有所不同。為了應對導覽標題在翻譯後可能因為字串過長而換行的情況，請找出適當的行高；如果您最先設計的是英文版導覽文字，也應該將行高列入考量。
變數文字長度會導致表單標籤和控制項發生特定問題。舉例來說，如果表單版面配置是在左側顯示標籤，並將欄位列於右側，較長的文字字串可能會在換行後占據兩行，而較短的文字字串看起來可能會與相應的表單輸入欄位沒有關聯，這兩種情況都會破壞設計成果，造成表單難以閱讀。此外，若版面配置是採用由右至左 (RTL) 的文字書寫方向 (稍後會進一步說明)，也請考慮必要的額外樣式設定。基於上述原因，我們在設計表單時會將標籤列於欄位上方，這種做法可讓內容更易於閱讀，並確保樣式方便調整，無論表單翻譯成哪種語言都不成問題。
此外，請勿使用固定高度的欄；如果您嘗試透過高度相同的方塊背景確保版面配置井然有序，文字在翻譯後會發生變化，進而超出高度原本只夠容納英文內容的範圍。請思考您打算用於網站設計中的 UI 元素是否在文字增加或減少後依然適用，例如比較橫向和直向排列的分頁標籤。
另一種書寫方向
許多編輯器並不支援萬國碼 (Unicode) 雙向演算法 (相關問題和解決方案的更多研究資料)，因此編輯雙向 HTML 的原始碼時可能會發生問題。簡單來說，標記可能會以亂碼顯示：
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
根據我們自身的日常使用經驗，下列編輯器目前針對雙向編輯作業提供了不錯的解決方案：Coda (特別推薦使用)、Dreamweaver、IntelliJ IDEA 和 JEditX。
設計以 RTL 語言呈現的內容時，您可以將所需的大部分支援功能整合至核心 CSS，並合併使用 html 元素 (用於回溯相容性) 的方向屬性與 body 元素的類別。同樣地，將所有樣式保存在同一份核心樣式表中可讓內容更易於維護。
請留意下列的主要樣式問題：所有靠右浮動的元素都必須靠左浮動 (反之亦然)；如果元素的任一邊套用額外的邊框間距寬度或邊界寬度，您必須覆寫及切換該寬度；任何文字對齊屬性都應該復原。
我們通常會採取下列做法 (包括使用 body 標記的類別，而非 html[dir=rtl] CSS 選取器)，因為這種做法與舊式瀏覽器相容：
元素：
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
書寫方向由左至右 (預設) 的樣式：
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
書寫方向由右至左的樣式：
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
最後還要提醒一件有關這個主題的事項：當網頁語言的書寫方向是由右至左時，用於該網頁的內容在大多數情況下都會雙向 (不完全是 RTL 方向) 顯示，因為部分字串可能需要保留原本的 LTR 方向，例如電話號碼，或者拉丁字母組成的公司名稱。如要確保瀏覽器在書寫方向以 RTL 為主的文件中妥善處理上述情形，請將嵌入的文字字串納入以屬性設定方向的內嵌元素中，如下所示：
<h2>עוד ב- <span dir="ltr">Google</span></h2>
如果您沒有可加入 dir 屬性的 HTML 容器 (例如標題元素，或 JavaScript 針對訊息提示產生的原始碼)，您可以使用下列效果相同的程式碼設定方向，其中 ‫ 和 ‬ 是萬國碼 (Unicode) 控制字元，用於由右至左嵌入文字：
<title>‫הפוך את Google לדף הבית שלך‬</title>
JavaScript 程式碼的應用實例：
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
(詳情請參閱 W3C 的文章，瞭解如何透過阿拉伯文、希伯來文和其他由右至左書寫的字母建立 HTML，以及如何編寫由右至左書寫的指令碼)
無法理解的內容
如果您從未處理拉丁文以外的字元集 (西里爾字母、希臘字母，以及印度文字和亞洲地區的許多文字)，可能會發現編輯器和瀏覽器均未按照預期顯示內容。
請確認編輯器和瀏覽器的編碼已設為 UTF-8 (建議做法)，並考慮在 HTML 範本中加入 <span> 元素以及html 元素的 lang 屬性，讓瀏覽器瞭解在轉譯網頁時可能發生的情況。這種做法的另一項優點是可確保所有萬國碼 (Unicode) 字元都正確顯示，如此一來，您就不必使用 é (é) 等 HTML 實體，可省下寶貴的位元組！如果遇到問題，可以參考 W3C 的字元編碼教學課程，其中含有各項問題的詳細說明。
關於命名的訣竅
最後，如要建立多種語言版本，建議可以參考一項有關命名慣例的實用訣竅，那就是依據 ISO 639-1 語言代碼等標準來命名，這種做法可在剛開始處理同一文件的多種語言版本時派上用場。
採用大家普遍遵循的標準不僅可協助使用者瞭解您的網站結構，還能讓所有可能參與開發網站的網站管理員更輕鬆完成維護工作。此外，針對其他網站資產 (標誌圖片、PDF 文件) 使用語言代碼也有助於迅速識別檔案。
請參閱網站管理員中心先前的文章，進一步瞭解網址結構，以及有關使用多地區版本的網站和使用多語言網站的問題。
以上簡單說明了我們每天必須克服的主要挑戰，不過如果您能夠事先努力規劃及打造結構良好的 HTML 和可靠的 CSS，肯定會在進行本地化作業時看到成效！