This documentation is archived and is not being maintained.

HTML Layout Guidelines for Web Forms Globalization

The best practice for HTML layout is to ensure that localizers only need to translate strings, since the user interface will automatically size all controls to fit. The step of resizing is removed from the localization process, thereby removing the errors and bugs that usually result. The following are recommendations for designing Web Forms for globalization.

  • Never use Cascading StyleSheet (CSS) properties for absolute positions. Specifying absolute positions prevents elements from being automatically positioned and sized.
    <!-- Do not do this -->
    <DIV id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">
  • Forms should take advantage of the available width and height. There are two ways to do this. First, size major elements such as tables to width=100%. Second, size elements using CSS expressions based on the overall size of the form.
    <!-- Table sized to take up entire width of the form-->
      <table width=100%>
    <!-- div sized to take up half the width and height of the form -->
    <div style='position:absolute; left: 0; top: 0; 
      height: expression(document.body.clientHeight / 2);
      width: expression(document.body.clientWidth / 2); '>
  • Each control should be in a separate table cell. This allows text to wrap independently and ensures correct alignment for cultures in which text layout flows from right to left.
  • Allow wrapping text. Avoid the "nowrap" attribute for table cells that contain text. Only use this attribute when you want the text to stay on one line and there is enough room for the text to expand to accommodate any language.
  • Separate check boxes and radio buttons from their label text. Place the labels for check boxes and radio buttons in separate cells from the controls. This allows the text to wrap correctly when the text grows longer. However, you should still design the form so that the text has a reasonable chance of staying on one line when it is translated.
  • Leave room for growth, and avoid fixed widths. Text may expand when translated into other languages. A good rule of thumb is to leave room for 300% growth on short strings (fewer than 10 characters), 200% growth on medium strings (10-20 characters), and 100% growth on large strings (more than 20 characters).

    One acceptable solution is to set table cell width to a percentage of the form width so the cell can expand relative to the entire table. However, try to specify as few relative sizes (other than 100%) as possible, because you want the HTML layout engine to do most of the work for you.

    <!-- Table cell sized to take up one quarter width of the table -->
     <td width=25%>
  • Size buttons in as few places as possible. Often there is a set of buttons that should have the same size. Set this size in one place for the entire set of buttons, if possible. Allow room for the text to expand in list boxes and group boxes.
  • Set height as seldom as possible. Do not set the cell height for any table cell or control that contains text. (You may set the line height for CSS elements.) Otherwise, the look of the page will change if the user sets the text size in the browser.
  • Do not use left or right align in HTML tags. In general, avoid setting "align=left" or "align=right" for any table cell. These properties may interfere with the layout of forms for cultures in which text layout flows from right to left.
  • Avoid inline CSS values that may need to be changed. Keep all CSS values that localizers may need to change in style sheets, rather than inline. This includes setting the font for a page.

See Also

Working With CSS Styles | Globalizing Web Forms Pages | Globalizing and Localizing Applications