ASP.NET Web 页面全局化的 HTML 布局指南

HTML 布局的最佳途径就是确保本地化转换器只需要转化字符串，因为用户界面会调整所有控件的尺寸来适合字符串中所包含的文本。并且开发者还能够从中受益，这是因为手动调整控件尺寸的步骤已经从本地化处理中被移除，因此相关的错误与 Bug 也能够被避免。但是，控件的布局会依赖于字符串的长度而发生变化，因此，已经本地化的 Web 网站仍然需要谨慎地进行测试。

下面列出了关于 ASP.NET Web 页面全局化设计的推荐指南。

避免使用绝对定位。指定绝对定位可以防止元素的自动重新定位和尺寸的改变。下列代码示范了哪些事情是不能够做的。

<!-- 不要这样做。 -->
<div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">

为窗体使用有效的宽度和高度。如下所示的两种方式可以完成这个任务：

把主要元素的尺寸（比如 table）改成等于 100% 的宽度。例如：

<!-- 尺寸被调整成整个窗体宽度的表格。-->
<table width=100%>

基于整个窗体尺寸并且使用层叠式样式表单的表达式来改变元素的尺寸。例如：

<!-- 尺寸被调整成只有窗体宽度和高度一半的 div 元素。 -->
<div style='
height: expression(document.body.clientHeight / 2);
width: expression(document.body.clientWidth / 2); '>

为每个控件使用单独的 table 单元格。这样做允许文字被独立包装并且能够确保从右向左流动的文字布局的文化对齐格式是正确的。

允许包装文字并且避免在包含了文字的 table 单元格中使用 nowrap 特性。只在你需要保持一行文字并且拥有足够的文字缩放来扩展任何适应的语言时才使用 nowrap 特性。

从复选框和单选按钮的标签文本中分离出来。把复选框和单选按钮的标准存放到与控件分离的单元格中。这允许文字在扩展的时候能够正确地被包装。但是，你仍然应该设置窗体文字在被翻译之后能够保持一行的合理机会。

离开增长空间并且避免固定的宽度。文字能够在翻译成其他语言的时候被扩展。一个好的缩放规则就是允许 300% 的短字符串（至少 10 个字符）增长空间、200% 的中等字符串（至少 20 个字符）增长空间，和 100% 的长字符串（20 个字符以上）增长空间。

一种可接受的解决方案就是把 table 单元格的宽度设置成窗体宽度的百分比，因此这个单元格能够扩展成与整个 table 相关。但是，你还是应该尽量尝试指定可能的少量相关尺寸（不同于 100%），因为你需要 HTML 布局引擎完成更多的工作。

<!-- 这个 table 单元格的尺寸被调整成整个 table 宽度的四分之一。 -->
<td width=25%>

尽可能地减少按钮的尺寸。通常的情况就是按钮集合应该拥有相同的尺寸。如果有可能的话，可以在同一个位置为整个按钮集合设置这个尺寸。并且允许文字在列表框和分组框中拥有相应的扩展空间。

尽可能地避免频繁的高度设置。不要设置任何 table 单元格的高度或者包含有文字的控件高度。（你可以为层叠式样式表单的元素设置行高。）否则，如果用户在浏览器中设置了文字尺寸的话，页面的外观就会发生变化。

不要在 HTML 标记中使用左对齐或者右对齐。通常，应该避免设置任何 table 单元格的 align="left" 或者 align="right"。因为这些设定能够影响不同文化（比如从右至左的文字布局）的窗体布局。

避免可能会改变的内嵌层叠式样式表单值。保持本地化转换器可能需要在样式表单中被改变的所有层叠式样式表单的值，胜于使用内嵌的样式。这同样包括了为页面所设定的字体。