Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

On the difficulty of getting pixel-perfect layout in Win32 dialog templates


A customer was having trouble getting their dialog box template
to produce exactly what they wanted.




Our designer has specified the UI design in pixels.
When we created a dialog box using DLU units in the .rc file,
we are not able to get the same dimensions which the designer has specified.
We have tried various combinations of dialog font face / size
but have not been to figure out a combination which
does not have rounding off errors.
Also, if we use small font sizes,
the aspect ratio of UI elements changes at higher DPIs.



How can we create this UI to the exact pixel sizes using Win32
dialog templates?
Is there a font face / font size combination which will give a
1 DLU = 1 pixel mapping?




Dialog boxes are not intended for pixel-perfect layout.
They are designed to scale with the font and the user's display
settings.
For example, the user may be on a high-DPI system, or simply
may prefer that the text be larger (so that, y'know, they can see it),
and dialog boxes will scale to accommodate those changes.



It is also the case that fonts do not scale linearly with point size.
Smaller fonts tend to be wider to compensate for the reduced height.



Specifying that a button be exactly 50 pixels tall ignores various
aspects of reality, such as the fact that a 50-pixel-tall button will
be unusable on a 300-DPI display.



DLUs are defined as one eighth of the height of the average font character
and one quarter of the width.
These values may not be exact multiples of eight and four, so you will
experience rounding.¹
Furthermore, you cannot predict exactly how many pixels tall your font
will be on the user's display, because you cannot predict what kind of
display the user will use.
(Assuming you are coding for a general audience and not a
dedicated system, of course.)
And the font you request may not even be the font you get,
due to font substitution or font linking.



You have a few options.



  • Talk with your designer about the realities of modern display
    technology and work to get a design that can be implemented
    using dialog templates.

  • Switch to another technology that allows greater control
    than dialog templates.
    For example, units in WPF can be expressed in "device independent
    pixels" which are defined to be 1/96 inch.

  • Fall back to calculating positions yourself and using
    Create­Window to put the controls exactly where
    you need them.
    You will probably want to invent your own template language for
    this instead of hard-coding the layout for every one of your
    dialogs.



Good luck.



¹
I guess you could get a font where 1 DLU = 1 pixel by creating
a font where the average character height is 8 pixels and the average
character width is 4 pixels.
On the other hand, your designer is unlikely to be happy with such a font!

Share the post

On the difficulty of getting pixel-perfect layout in Win32 dialog templates

×

Subscribe to Msdn Blogs | Get The Latest Information, Insights, Announcements, And News From Microsoft Experts And Developers In The Msdn Blogs.

Get updates delivered right to your inbox!

Thank you for your subscription

×