ASP.NET 网页全球化的 HTML 布局准则

ASP.NET 网页全球化的 HTML 布局准则 

HTML 布局的最佳做法是确保本地化人员只需翻译字符串，因为用户界面会调整所有控件的大小以适合字符串包含的文本。这是一个优点，因为从本地化过程中去除了手动 调整控件大小的步骤，从而可以避免由此产生的 bug。但是，控件的布局是随字符串长度的不同而变化的，因此需要仔细测试经过本地化的网站。

下面的列表提供了设计全球化 ASP.NET 网页的建议准则。

• 避免使用绝对位置。

  指定绝对位置将使元素不能被自动定位和确定大小。下面的代码示例演示应避免的行为。

  <!-- Do not do this. -->
  <div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">

• 将可用的宽度和高度用于窗体。

  有两种方法实现此目标，如下所示：

  • 将主要元素（如表）的宽度调整为 100%。

    例如：

    <!-- A table sized to take up entire width of the form.-->
      <table width=100%>

  • 基于窗体的整体大小使用级联样式表表达式调整元素的大小。

    例如：

    <!-- A div element sized to take up half the width and height of the form. -->
    <div style=' 
      height: expression(document.body.clientHeight / 2);
      width: expression(document.body.clientWidth / 2); '>

• 对每个控件使用单独的表单元格。

  这使得文本可以独立换行，并确保对于其文本布局是从右向左显示的区域性的对齐方式正确。

• 对于包含文本的表单元格，允许文本换行但不要使用 nowrap 属性。

  仅当您希望文本保留在一行中并且有足够的空间来对该文本进行扩展以适合任何语言时，才使用 nowrap 属性。

• 将复选框和单选按钮与其标签文本分隔开。

  将复选框和单选按钮的标签放置在与控件不同的单元格中。这使得文本在变得更长时可以正确换行。但是，您还应对窗体进行设计，以便在对文本进行翻译后在适当的情况下文本还可以保留在一行中。

• 留出增长空间，并且避免采用固定的宽度。

  文本在被翻译为其他语言后可能会扩展。一个很好的经验是为短字符串（少于 10 个字符）留出 300% 的增长空间，为中等长度的字符串（10-20 个字符）留出 200% 的增长空间，为大型字符串（超过 20 个字符）留出 100% 的增长空间。

  一个可接受的解决方案是将表单元格宽度设置为窗体宽度的百分比，这样单元格就可以相对于整个表进行扩展。但是，应尽可能少地指定相对大小（100% 除外），因为您希望 HTML 布局引擎为您执行大多数此类工作。

  <!-- The table cell is sized to take up one quarter of the width of the table. -->
  <td width=25%>

• 在尽可能少的地方设定按钮大小。

  经常有一组按钮应具有相同的大小。如果可能，应在一个地方为全组按钮设置此大小。为在列表框和分组框中扩展文本而保留空间。

• 尽可能少地设置高度。

  不要为包含文本的任何表单元格或控件设置单元格高度。（可以为级联样式表元素设置行高度。）否则，如果用户在浏览器中设置了文本大小，页面的外观将发生更改。

• 不要在 HTML 标记中使用左或右对齐。

  通常，应避免为任何表单元格设置 align="left" 或 align="right"。这两个设置会影响文本布局从右向左显示的区域性的窗体布局。

• 避免使用可能需要更改的内联级联样式表值。

  将本地化人员可能需要更改的所有级联样式表值保留在样式表中，而非内联。这包括设置页面字体。