添加時間:2007-4-22　

　　簡介：

　　我們將網(wǎng)頁或HTML應(yīng)用程序國際化時，需要將它們翻譯成多種語言版本。如何做到文本在轉(zhuǎn)化后，自動調(diào)整頁面中各個單元位置，間距和尺寸呢？這聽起來似乎很難，但是如果按照本文講述的幾條法則去建立HTML頁面，你就會相信這是事實，這幾條法則能夠省去本地化工作人員的很多麻煩。
　　　注：本文中的對話框是指包含基本交互控件的WEB頁面，由于其風格與WIN32的對話框非常相似所以也稱之為對話框。

　　引言：

　　不久前大多數(shù)在Windows平臺上的用戶界面使用的還是WIN32的或其他可視化編程工具做出的彈出式窗口，但是目前很多開發(fā)人員利用HTML強大的功能來創(chuàng)建應(yīng)用程序的用戶界面。這是一種新的思路和方法，它易學易懂，編寫方便，利于開發(fā)。但由于頁面中的文本在轉(zhuǎn)化為其它語言版本時會出現(xiàn)許多調(diào)整大小和位置的問題，這就給本地化工作帶來很大的困難。對于整體采用層疊式表單（CSS）的普通Web頁面，這種轉(zhuǎn)化也絕對是一場噩夢。但如果所有的HTML用戶界面元素都使用正確的編碼標準構(gòu)建，那么留給本地化工作人員可做的事情就微乎其微了。HAL（即HTML自動排版）的編碼標準給我們提供了HTML國際化應(yīng)用時避免調(diào)整的一種方法。本文就此列舉了一系列法則和法則的主要依據(jù)。法則后附有編碼樣例。

　　　備注：HAL兼容大部分HTML對話框，特別是對于可以調(diào)整大小的對話框或窗口。

　　HAL幾大優(yōu)點：

　　1、本地化工作人員只需翻譯文本部分。用戶界面會自動調(diào)整所有控件來匹配它的大小。
　　2、準備工作在最初的版本中做一次（通常為英語）即可，不需要為多種語言版本重復(fù)做多次。
　　3、完全省略了本地化過程中設(shè)定對話框尺寸的步驟，也省略了其它易出錯的步驟，如試圖從產(chǎn)品的前一版本或其它語言中重復(fù)使用對話框尺寸。
　　4、不會產(chǎn)生顯示方面的錯誤，從而使本地化的對話框質(zhì)量與原英文版本無異。
　　5、本地化工作人員不必修改由于對話框尺寸重新調(diào)整而引起的錯誤。如果在轉(zhuǎn)換用戶界面時出現(xiàn)任何問題，應(yīng)交給開發(fā)人員修改這些錯誤，修改完的結(jié)果就會應(yīng)用到所有其它語言上。這就避免了在其它語言上重新出現(xiàn)這些錯誤，即使在最壞的情況下，本地化工作人員也僅僅需要重新翻譯一遍。
　　6、因為字符串改變時本地化工作人員要調(diào)整對話框，所以做的調(diào)整工作可能比直接設(shè)置大小花的的時間還要多。 如果處理不當，也易添加新的錯誤。HAL完全解決了這個問題。
　　7、由于無需調(diào)整其它控件就可以給對話框快速加入新的控件，因此對于開發(fā)人員來說，對話框變得更易于管理。HAL法則特別適用于創(chuàng)建可重新調(diào)整大小的對話框。如果對話框規(guī)格需要改變，只需在一個地方改動（一個全局樣式表單），而不需在每個對話框上都做改動。對話框尺寸的全局控制保證了產(chǎn)品用戶界面的整齊和一致性。

　　HAL的不足之處：

　　當然，沒有什么是十全十美的，采用HAL法則也會帶來一些其它問題。

　　1、頁面/對話框的構(gòu)建變得有些復(fù)雜，因此原始對話框很有可能比以前有更多的初始化錯誤。
　　2、在頁面的加載處理過程中需要一些額外的代碼（調(diào)整按鈕的大?。?，這會使加載速度降低，但用戶對此并不會太敏感。
　　3、控件的對齊不一定會很一致，并且當對話框大小改變時它們的大小也會隨之改變。

　　HAL法則：

　　法則一：不使用絕對位置

　　不要在CSS屬性中設(shè)置為絕對位置。最不當之處的是設(shè)置成絕對位置的同時也把左上角設(shè)置為固定值。
　　對頁面中元素使用絕對位置將使其不能夠自動定位和確定尺寸。絕對位置只適用于層疊式表單（CSS）。position，left和top是層疊式表單中控制位置的關(guān)鍵屬性。

　　以下代碼是絕對不允許的：

＜DIV id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;"＞  Fi＜U＞n＜/U＞d what: ＜/DIV＞

　　絕對位置的使用特例：

　　所有HAL法則都有特例。如果用表達式表示的絕對位置就可以使用，可以參考法則二。

　法則二：對話框應(yīng)當匹配最大可用寬度和高度

　　使用最大可用寬度和高度設(shè)計對話框。這有兩種方法：

　　1、用width=100%的表格來構(gòu)建對話框。

　　代碼樣例如下：

＜body＞ ＜table width=100%＞ ＜… can contain other tables …＞ ＜/table＞  ＜/body＞

　2、使用基于表達式的位置和基于對話框大小的尺寸（即body.clientHeight）。

　　代碼樣例如下：

＜div style='position:absolute; height: 　 　expression(document.body.clientHeight / 2); width: 　 　expression(document.body.clientWidth / 2); '＞  ＜/div＞

　　當表里嵌有多個表格時，最好的解決方法是正確設(shè)置元素的大小再放入表中，并且維持它們的相對位置。
在操作過程中需要考慮：

• 哪些控件有相同的尺寸。它們必須位于相同的表格單元中，可以不在一行。
• 哪些控件有相同的對齊方式。
• 哪些控件會將其它控件擠到右邊。
• 哪些控件有固定的尺寸。
  

　　多數(shù)情況下本地化人員只允許給對話框設(shè)置初始化的寬度和高度。只有非常必要時才使用固定的對話框?qū)挾龋ɡ鐚υ捒虮仨毱ヅ淦渌鼘υ捒虻闹票矸?br>

　　法則三：每個控件都應(yīng)位于分離的表格單元中

　　盡量使每個控件位于分離的表格單元中。這樣做文本可以單獨換行，并且在中東語言環(huán)境下也可以進行翻轉(zhuǎn)和定位調(diào)整的工作。
有些情況下可以忽略這條法則：

• 多行按鈕有相同尺寸。
• 上下緊鄰的標簽。
  

　　法則四：允許文本換行

　　在包含文本的表格單元中不要用"nowrap"屬性（如＜td nowrap＞），否則文本變長時就不能換行。當想讓文本占用一行并保證為翻譯成其它語言留有足夠的空間時，才能使用這一屬性。
　　有時為了保持對話框整體比例平衡，需要用到"nowrap"屬性。

　　錯誤的換行方法：

＜td nowrap＞  Fi＜U＞n＜/U＞d what: ＜/td＞

　　最好的辦法是給表格設(shè)置一個初始化尺寸，如下：

＜td width=20%＞  Fi＜U＞n＜/U＞d what: ＜/td＞

　　另一種方法是在詞間使用不中斷的空格符（ ）。

＜td＞ Fi＜U＞n＜/U＞d what:  ＜/td＞