Summary of HTML AutoLayout Rules

This section summarizes HTML AutoLayout rules. Each rule's description contains links to PT application code that implements the rule.

• Do not use absolute positions for any user interface element. If you specify an absolute position, the element cannot be automatically positioned and sized; however, you can use absolute positions if they are based on CSS expressions. See ActivityList.htm, ActivityTypeList.htm, GroupList.htm, LocationList.htm, and PersonList.htm in Code Listings and Object Reference for examples of how the PT application implements this rule.
• Web pages and dialog boxes should use the width and height that is available. The width and height of the user interface is not fixed—it can change to use the available space effectively; for example, a Web page localized for German can be resized on the fly to accommodate longer text strings in labels and buttons. See Forms.css, the cascading style sheet, for how the PT application implements this rule.
• Place each control in a separate cell. When you place only one control in a cell, the text on the control can wrap; for example, a check box and its label should be in separate cells to allow the label text to wrap independently of the check box. Separating labels from controls allows the labels for check boxes and option buttons to wrap correctly; that is, to wrap without writing text underneath the button. Ideally, you should provide enough space for translated label text to display on one line. If you place each control in a separate cell, handling right-to-left text direction and alignment for Middle Eastern languages requires no additional effort. There are a few exceptions to this rule; you can place rows of buttons that always remain the same size or labels next to drop-down list boxes in one cell. See Activity.htm, ActivityType.htm, Group.htm, Location.htm, and Person.htm in Code Listings and Object Reference for examples of how the PT application implements this rule.
• Allow text to wrap. When coding Web pages, do not use the NOWRAP attribute for cells containing text because it prevents the text string from wrapping as it grows longer. You should use the NOWRAP attribute only if you want the text to remain on one line and the cell is large enough to accommodate text in all languages.
• Leave room for growth and avoid fixed widths. To provide adequate width for translated text, allow for 300 percent growth for text strings of fewer than 10 words, 200 percent growth for text strings between 10 and 20 words, and 100 percent growth for text strings of more than 20 words.
• Use classes to size sets of buttons. When several buttons are the same width, they should not resize independently of one another because this can result in buttons of different sizes. Create a class and assign all buttons of the same size to that class. Do not specify a width for the class; instead, use a function to calculate the width. See Forms.css for classes (for example, Text) that are implemented throughout the PT application. Activity.htm and Group.htm in Code Listings and Object Reference contain code that use classes.
• Use sized cells to manage resizing of list boxes. To keep several list boxes the same size, place the list box controls in similarly sized cells and set the size of the control to a percentage of the cell (usually 100 percent). The cell, which is a percentage of the table size, grows when the table grows. The label for a list box should be sized to display the text on one line in any language. An alternative approach is to create a class, assign list boxes of the same size to that class, and use a function to calculate the width. See Activity.htm and Group.htm in Code Listings and Object Reference for examples of how the PT application implements this rule.
• Avoid fixed-height table cells. Do not set the height for cells containing text. Localizers may need to change the font size, which could result in text being cropped. PT application code does not set the height for cells; the font size that is specified in the cascading style sheet (Forms.css) dictates the height of a particular cell. The cascading style sheet specifies relative font sizes (xx-small and x-small), which do not need to be changed during localization.
• Do not specify left or right alignment for table cells. If you specify an alignment for table cells, you cannot adjust the text or placement of controls correctly for Middle Eastern languages whose text runs from right to left. Though the PT application is not targeted for Middle Eastern locales and therefore does not explicitly support right-to-left text, left and right alignments are not specified in application code.
• Avoid inline cascading style sheets (CSS). It is much easier to localize style sheet values if they are isolated in one style sheet file instead of sprinkled throughout an ASP page, HTML document, or XML document. The PT application implements a cascading style sheet, Forms.css.