Windows font sizes messes up UI element's position

Posted on 2002-03-15
Medium Priority
Last Modified: 2013-12-02
I have created a UI that looks exactly the way I want under all tested windows platforms.  However when the windows fontsize (Display -> Settings -> Advanced -> Font Size) is set to "Large Fonts" it messes up the size and position of all the UI elements. (Mainly images, which make up most of the interface).

How would I make sure that everythig keeps it's exact size and position reguardless of the windows font size?

If you need a sample of the program or a screenshot, let me know.
Question by:Jhawk

Assisted Solution

SteveWaite earned 450 total points
ID: 6869957
  Compile_PixelsPerInch = 96; // set this to what your desktop is set to when you compile.

procedure TForm1.FormCreate(Sender: TObject);
  Form1.Scaled := True; // a lot of components size properly

procedure TForm1.FormShow(Sender: TObject);
  MyScaleFactor := (PixelsPerInch / Compile_PixelsPerInch); // when app is run, actual value is obtained from PixelsPerInch
// multiply all dimensions by MyScaleFactor for those components that do not scale properly;

LVL 17

Accepted Solution

inthe earned 150 total points
ID: 6869963
an annoying problem,probably seting scaled to false on your controls is going to help some but bear in mind it may look small to user with large font.
i have a copy of a borland tech document to do with scaling etc for resolution changes etc that may give some pointers.
its quite long but i cant find original url so i post it here:

2861:Form display with different screen resolutions.

KEYWORDS: screen resolution AREA: VCL Programming

When designing forms, it is sometimes helpful to write the code
so that the screen and all of its objects are displayed at the
same size no matter what the screen resolution is.  Here is
some code to show how that is done:

  ScreenWidth: LongInt = 800; {I designed my form in 800x600 mode.}
  ScreenHeight: LongInt = 600;

{$R *.DFM}

procedure TForm1.FormCreate(Sender: TObject);
  scaled := true;
  if (screen.width <> ScreenWidth) then
    height := longint(height) * longint(screen.height) div
    width := longint(width) * longint(screen.width) div ScreenWidth;
    scaleBy(screen.width, ScreenWidth);

Then, you will want to have something that checks to see that
the font sizes are OK.  You can iterate over each child
control's font to adjust its size as necessary.  This can be
done as follows:

  TFooClass = class(TControl); { needed to get at protected }
                               { font property }

  i: integer;
  for i := ControlCount - 1 downto 0 do
    TFooClass(Controls[i]).Font.Size :=
        (NewFormWidth div OldFormWidth) *

Note:  The following are issue to bear in mind when scaling
Delphi applications (forms) on different screen resolutions:

  * Decide early on in the form design stage whether you're
going to allow the form to be scaled or not.  The advantage of
not scaling is that nothing changes at runtime.  The
disadvantage of not scaling is that nothing changes at runtime
(your form may be far too small or too large to read on some
systems if it is not scaled).

  * If you're NOT going to scale the form, set Scaled to False.

  * Otherwise, set the Form's Scaled property to True.

  * Set AutoScroll to False.  AutoScroll = True means 'don't
change the form's frame size at runtime' which doesn't look
good when the  form's contents do change size.

  * Set the form's font to a scaleable TrueType font, like
Arial.   MS San Serif is an ok alternate, but remember that it
is still a  bitmapped font.  Only Arial will give you a font
within a pixel of the desired height.  NOTE: If the font used
in an application is not installed on the target computer, then
Windows will select an  alternative font within the same font
family to use instead.  This font may not match the same size
of the original font any may cause problems.

  * Set the form's Position property to something other than
poDesigned.  poDesigned leaves the form where you left it at
design time, which for me always winds up way off to the left
on my 1280x1024 screen -  and completely off the 640x480 screen.

  * Don't crowd controls on the form - leave at least 4 pixels
between  controls, so that a one pixel change in border
locations (due to  scaling) won't show up as ugly overlapping

  * For single line labels that are alLeft or alRight aligned,
set AutoSize to True.  Otherwise, set AutoSize to False.

  * Make sure there is enough blank space in a label component
to allow for font width changes - a blank space that is 25% of
the length of the current string display length is a little too
much, but safe. (You'll need at least 30% expansion space for
string labels if you  plan to translate your app into other
languages) If AutoSize is  False, make sure you actually set
the label width appropriately.  If AutoSize is True, make sure
there is enough room for the label  to grow on its own.

  * In multi-line, word-wrapped labels, leave at least one line
of blank space at the bottom.  You'll need this to catch the
overflow when the text wraps differently when the font width
changes with scaling. Don't assume that because you're using
large fonts, you don't have to allow for text overflow -
somebody else's large  fonts may be larger than yours!

  * Be careful about opening a project in the IDE at different
resolutions.  The form's PixelsPerInch property will be
modified as soon as the form is opened, and will be saved to
the DFM if you save the project. It's best to test the app by
running it standalone, and edit the form at only one
resolution. Editing at varying resolutions and font sizes
invites component drift  and sizing problems.

  * Speaking of component drift, don't rescale a form multiple
times, at design time or a runtime.  Each rescaling introduces
roundoff errors which accumulate very quickly since coordinates
are  strictly integral.  As fractional amounts are truncated
off control's origins and sizes with each successive
rescaling,  the controls will appear to creep northwest and get
smaller. If you want to allow your users to rescale the form
any number  of times, start with a freshly loaded/created form
before each  scaling, so that scaling errors do not accumulate.

  * Don't change the PixelsPerInch property of the form, period.

  * In general, it is not necessary to design forms at any
particular resolution, but it is crucial that you review their
appearance at 640x480 with small fonts and large, and at a
high-resolution with small fonts and large before releasing
your app.  This should be  part of your regular system
compatibility testing checklist.

  * Pay close attention to any components that are essentially
single-line TMemos - things like TDBLookupCombo.  The Windows
multi-line edit control always shows only whole lines of text
-  if the control is too short for its font, a TMemo will show
nothing at all (a TEdit will show clipped text). For such
components, it's better to make them a few pixels too large
than to be one pixel too small and show not text at all.

  * Keep in mind that all scaling is proportional to the
difference  in the font height between runtime and design time,
NOT the pixel resolution or screen size.  Remember also that
the origins of your controls will be changed when the form is
scaled - you can't very  well make components bigger without
also moving them over a bit.

>>end TI


Assisted Solution

SteveWaite earned 450 total points
ID: 6870005
you may also want to use:

    { Private declarations }
    procedure WMDisplayChange(var Msg: TMessage);
      message WM_DISPLAYCHANGE;

procedure TForm1.WMDisplayChange(var Msg: TMessage);
  inherited; // allow to continue

if it needs to respond to user changes.


Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.


Assisted Solution

SteveWaite earned 450 total points
ID: 6870264
minor omissions included:

MyScaleFactor: Extended;
and to use
but i'm sure you would have sussed!


Expert Comment

ID: 6870449

Expert Comment

ID: 9343262
This old question needs to be finalized -- accept an answer, split points, or get a refund.  For information on your options, please click here-> http:/help/closing.jsp#1 
Post your closing recommendations!  No comment means you don't care.

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Have you ever had your Delphi form/application just hanging while waiting for data to load? This is the article to read if you want to learn some things about adding threads for data loading in the background. First, I'll setup a general applica…
Introduction Raise your hands if you were as upset with FireMonkey as I was when I discovered that there was no TListview.  I use TListView in almost all of my applications I've written, and I was not going to compromise by resorting to TStringGrid…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question