Aligning Headings with Columns

You might have noticed that the subfile headings in the WebFaced application do not align very well with the subfile columns themselves . See the misalignments in Figure 17.34.

Figure 17.34: Subfile headings misaligned due to proportional font usage

The headings in the Order Entry Application are implemented in DDS as strings that depend on blank characters to occupy the same space as other characters . This works well in text-based user interfaces but does not work well in environments where you use proportional fonts. Here is an example of the difference between these font types:

Proportional font Times New Roman:

wwwwwww
iiiiiii

Nonproportional font Courier New :

wwwwwww
iiiiiii

You can see that an alignment based on counting spaces for a proportional font does not work, whereas using the same space for all characters works very well for a nonproportional font. In Development Studio Client Version 4 with Service Pack 4 applied and in Version 5, the alignment when using nonproportional fonts should work very well, although you might see minor problems when you have many one-and two-character input fields.

The easiest solution, then, is to use nonproportional fonts. The easiest way to do this is to edit the appaera.css file and change wf_field style class font attribute from Verdana to Courier New. This generally corrects the misalignment. On the other hand, nonproportional fonts make the user interface less attractive. A sample Web page with a nonproportional font and its effect on the heading alignment can be seen in Figure 17.35.

Figure 17.35: Subfile heading with improved alignment using nonproportional fonts

The best way to achieve heading alignment is to split the string that contains the subfile column headings into single fields with fixed positions in the DDS source. With this method, WebFacing conversion aligns the headings correctly regardless of the font style.

Figure 17.36 shows you how to adjust the headings in the ORDCTL record format, using the LPEX editor.

Figure 17.36: Editor with split heading strings positioned at specific column number

Now each heading is positioned exactly on top of the subfile columns.

Figure 17.37 shows the result of this change after saving and reconverting the member.

Figure 17.37: Heading alignment after splitting the headings string

Providing separate strings for heading and positioning them by column provides the most reliable alignment of headings and the corresponding subfile columns.