HTML Layout Best Practices

While implementing Globalization in our ASP.NET application, some languages(i.e Arabic) requires different layout because text flows from right to left. Some languages requires more spaces to represent the same word and some language requires less space to represent the same thing.

To allow webpages to support by widest variety of cultures dynamically, following are few guidelines to follow.

1. Size elements should be relative to overall size of the form:
When we need to provide a specific size for a control, use relative proportions to allow the entire form to be easily resized. We can achieve this by using style sheet expressions. Following is one sample.

<div style='height: expression(document.body.clientHeight / 2); 
width: expression(document.body.clientWidth / 2); '>

2. Avoid defining the Align property in tables:
Setting a left or right alignment in a cell can override layout in cultures that use right-to-left text.

3. Avoid absolute positioning and sizes for controls:
Rather than specifying control locations in pixels, allow the web browser to position your controls auto-matically. You can do this by simply not specifying a size or location. The easiest way to determine whether any controls have absolute positions is to view the source for a webpage. For example, the following illustrates a control that uses absolute positioning (which should be avoided).

<div id = idLabel style = "position: absolute; left: 0.98em; top:
 1.21em; width:4.8em; height: 1.21em;">

4. Use entire width and height of forms:
Although many websites specify the number of pixels for the width of a form or table column, this can cause formatting problems for languages that use more letters or a different text layout. Instead of indicating a specific width, use 100 percent of the width of the web browser, as the following sample demonstrates.

<table width=100%>

5. Use a different table cell for every control:
This allows text to wrap independently and ensures correct alignment for cultures in which text layout flows from right to left.

6. Decouple check boxes and radio buttons from their text descriptions and put it in separate table cell:
Putting the text that describes a radio button or check box in a separate table cell allows that text to wrap to accommodate larger text when translated

7. Do not enable the noWrap property in tables:
Setting HtmlTableCell.NoWrap to true disables word wrapping. Although word wrapping might work well in your native language, other languages can require more space and might not display correctly.

HTML Layout Best Practices
1 vote, 4.00 avg. rating (84% score)

Leave a Reply