HTML Layout Guidelines for ASP.NET Web Page Globalization

Avoid using absolute positions.

Specifying absolute positions prevents elements from being automatically positioned and sized.

Use the available width and height for forms.

Use a separate table cell for each control.

Doing this allows text to wrap independently and ensures correct alignment for cultures in which text layout flows from right to left.

Allow wrapping text and avoid using the nowrap attribute for table cells that contain text.

Use the nowrap attribute only 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 cells that are separate from the controls. This allows the text to wrap correctly when the text expands. 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 can expand when translated into other languages. A good rule of thumb is to leave room for 300 percent growth on short strings (less than 10 characters), 200 percent growth on medium strings (from 10 through 20 characters), and 100 percent growth on large strings (more than 20 characters).

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

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 the height as seldom as possible.

Do not set the cell height for any table cell or control that contains text. (You can set the line height for cascading style sheet elements.) Otherwise, the look of the page changes, 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 settings can interfere with the layout of forms for cultures in which text layout flows from right to left.

Avoid inline cascading style sheet values that might need to be changed.

Keep all cascading style sheet values that localizers might need to change in style sheets, rather than inline. This includes setting the font for a page.