Does this sound familiar? You've finished that elegant form and polished the look and feel of the controls, and you send it off to your end user. And the first thing the user complains about is that the form is unreadable on their Windows PC. They complain that the text labels are chopped off, the edit controls run past the edge of the form, and the bottom of the form isn't even visible. What happened?
You've been caught by the implementation of large fonts. You probably develop in Delphi with small fonts, and when you test the form, everything looks fine. How do you reproduce the problem?
On your workstation, open up the following dialog: Control Panel, Display, then the Settings tab.
On this form, click the Advanced button.
On the General tab of the Display Properties dialog, you will see the drop-down control for Font Size. Change this selection to Large Fonts, and click through the resulting dialogs to reboot your PC.
Your desktop will now be running with large fonts. You will notice that the icon captions may overlap each other. Start up Delphi, and notice how the menus, Object Inspector rows, and form captions are all larger.
If you have your project open, you will most likely see the problems your user mentioned on the form. The steps below will help you fix the interface problems so that the form will appear readable in both large and small fonts:
The Form properties
On every Delphi TForm, there is a property called Scaled. By default, this property is True, and this property controls whether or not the controls will be resized automatically at run time.
The PixelsPerInch property also controls the font and control sizes on the form. By default, this setting is 96, but when large fonts are enabled, this changes automatically to 120.
If you absolutely have to have the form appear in the dimensions you assigned at design time, or the controls must be lined up in the exact positions you designed, set the Scaled property to False, and reset the PixelsPerInch property to 96. This will keep the form from resizing to a different scale at run time.
However, if you want a dynamic form that still looks good when the user resizes it, follow the tips below.
Aligned (or anchored) controls will resize automatically in both font settings. Make a practice of setting the Alignment on all panels, grids, memos, etc. so that they are anchored to an edge of the form (or fill the client area). This corrects many problems that occur when controls resize improperly.
Some fonts look fine in both the small and large font settings. Arial and MS Sans Serif are two of the fonts that look fine in both settings. However, some fonts, like Lucida Sans Unicode, will cause resize problems, especially in grids or list boxes. You will need to test every font you use on your controls.
If you see the text in your labels is chopped off at the bottom, you will need to correct the height of the label. Typically, if you have the AutoSize property set to True, then the label will resize correctly. If not, try toggling the AutoSize setting to False, then True, and the label should resize correctly.
If you have labels that are aligned right next to edit controls, and they are spilling over into the edit control, change the Alignment property to taRightJustify, and make the label Width wide enough so that the label has room to expand to the left of the control. This will correct the spill-over problem.
Sometimes, when you change the AutoSize property, the labels will return to a scrunched-up state. See the Constraints tip below for a solution.
If the text in your label is still chopped off at the right when in large fonts, try the following:
- Set AutoSize to False.
- Set the Height to twice its current value.
- Set WordWrap to True.
Using WordWrap in this way will allow the label text to still appear, but on two lines rather than one. If your label still has to be a single line, you will need to make the form or panel wider for the text to stretch.
All TControl components have a Constraints property. If you have a shrinking or scrunching problem with your controls, try the following tip:
- In small fonts, look at the Width and Height settings when the control looks good. Do the same when large fonts is enabled.
- Assign settings to the MaxHeight, MinHeight, MaxWidth, and MinWidth settings in the Constraints property to the least and greatest dimensions you see in both font settings. This will keep your control from shrinking to a size that looks good in small fonts but scrunched in large fonts. It will also keep the control from growing to a size where it looks good in large fonts, but looks out of alignment in small fonts.
Panels and Buttons
When buttons are on a panel, and the panel is anchored (or aligned) to the form, then both buttons and panels will resize correctly when font settings change. If the button captions don't look right, try implementing the tips above with regards to the Fonts or Constraints.
If you have edit controls on a panel that is aligned to alClient, but some of the controls disappear off of the edge of the panel at run time, try changing the alignments so that the panels are a fixed width or height, by aligning them to alTop, alRight, etc. If you set grids, memos, list boxes, or other rectangular controls to align on alClient, they will still display in a readable manner, although with a smaller work area.
Do you often use transparent bevels on top of labels, to "push" your aligned controls over so that it looks like the edit controls are hanging off of the label? This is common for captions that appear above a TMemo.
In large fonts, even bevels will resize, which may cause labels or other controls "beneath" them to be scrunched or partially hidden. If you need to design a form for large and small fonts, it would be best not to use transparent bevels on top of other controls. Use a panel instead of the bevel in this case.