High DPI: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

Old	New		Line
1	1		## Introduction
2	2
3	3		DPI (Dots Per Inch) is the relation between size in pixels and the actual display size. Here dot is an equivalent for pixel in printing terminology. Applications can either use pixel sizes, or take into account the actual display size. In this second case, sizes are given in points.
4	4
5	5		Most of today operating systems use default DPI set to 96 and allow to change it to higher value manually. The physical DPI can be determined from display through [EDID](http://en.wikipedia.org/wiki/Extended_display_identification_data) protocol from physical size data and actual resolution. But the physical DPI is not used automatically by system so if you connect video output to monitor with different size then sceen resolution and visual size of controls are not automatically changed.
6	6
7	7		Usually DPI is presented as one value but it can be different for horizontal and vertical axes if pixel is not square.
8	8
9	9		In addition to basic application DPI awareness you can add own DPI options to your application to allow users to set custom per application DPI to overcome wrong system DPI setting.
10	10
11	11		### Lazarus DPI related properties
12	12
13	13		- Graphics.ScreenInfo.PixelsPerInchX
14	14		- Graphics.ScreenInfo.PixelsPerInchY
15	15		- Forms.Screen.PixelsPerInch
16	16		- Forms.TForm.DesignTimePPI (See: [DPI auto-adjustment and absolute layout auto-adjustment](http://wiki.lazarus.freepascal.org/Autosize_/_Layout#DPI_auto-adjustment_and_absolute_layout_auto-adjustment))
17	17
18	18		### Pixels and points
19	19
20	20		For example 300 DPI means that there are 300 pixels (or dots) per inch. There are 72 points per inch, so :
21	21
22	22		300 pixels ↔ 1 inch
23	23
24	24		300/72 pixels ↔ 1 point
25	25
26	26		4.16 pixels ↔ 1 point
27	27
28	28		Now with 96 DPI :
29	29
30	30		96 pixels ↔ 1 inch
31	31
32	32		1.33 pixel ↔ 1 point
33	33
34	34		Now with 144 DPI :
35	35
36	36		144 pixels ↔ 1 inch
37	37
38	38		2 pixels ↔ 1 point
39	39
40	40		## Setting High DPI
41	41
42	42		### Windows
43	43
44	44		On Windows 95 and later, it is possible to change the DPI ratio to make elements bigger. High DPI means any custom DPI setting with more than 96 DPI (the default setting) \[<http://msdn.microsoft.com/en-us/library/ee318406(VS.85>).aspx *\].
45	45
46	46		High DPI awareness means that an application takes this DPI setting into account.
47	47
48	48		#### Windows Vista and Windows 7
49	49
50	50		In Windows 7 go to "Control Panel \> Appearance and Personalization \> Display" (or just Control Panel \> Display in recent updates).
51	51
52	52		Select Smaller 100% (default), Medium 125% or Larger 150%. If you select 100% (96 DPI) this is the default Windows DPI setting, (High DPI is not the default).
53	53
54	54		If you select 125% (120 DPI) the option "Use Windows XP style DPI scaling" is enabled. Applications you run under this setting are scaled as if running under Windows XP.
55	55
56	56		If you select 150% (144 DPI) the option "Use Windows XP style DPI scaling" is disabled (DPI Virtualization is enabled), and applications you run under this setting must be High DPI Awareness to prevent system scaling which will produce a blurred image.
57	57
58	58		You can also set your custom DPI setting via the option "Set custom text size (DPI)" and enable/disable the DPI Virtualization.
59	59
60	60		#### Windows 8 Metro Applications
61	61
62	62		For Windows 8 Metro Applications read this <http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx>
63	63
64	64		#### Windows 10
65	65
66	66		Windows 10 "Control Panel \> Appearance and Personalization \> Display" have more options. You can have different font sizes for each element: Title bar, Menu, Dialog box and so on. Ensure you test twice in order to check if everything works under different sizes.
67	67
68	68		Now is based on Font Size, not DPI. The DPI option is not recommended, but still there. So, instead of changing the size of all elements in desktop, this will change just the font size (And of course everything else is changed to fit).
69	69
70	70		Remember that under Windows 10 there are Universal Applications (WinRT) and the classic desktop applications (Win32). We're talking here about desktop applications.
71	71
72	72		### Linux
73	73
74	74		On Linux DPI setting is more complicated and depends on used software and their version.
75	75
76	76		You can discover your current monitor DPI by command:
77	77
78	78		``` bash
79	79		xdpyinfo\|grep dots
80	80		```
81	81
82	82		You can change DPI to new value by command:
83	83
84	84		``` bash
85	85		xrandr --dpi 144x144
86	86		```
87	87
88	88		To preserve setting after reboot you need to add the command as script to /etc/X11/Xsession.d/77set_dpi.
89	89
90	90		More information:
91	91
92	92		- [How to find and change the screen DPI?](http://askubuntu.com/questions/197828/how-to-find-and-change-the-screen-dpi)
93	93		- [Xorg Display size and DPI](https://wiki.archlinux.org/index.php/xorg#Display_size_and_DPI)
94	94		- [Change fixed 96dpi on Ubuntu with high DPI LCD](https://help.ubuntu.com/community/AsusZenbook#LCD)
95	95
96	96		## Examples
97	97
98	98		### Fixed Font Sizes (not HighDPI)
99	99
100	100		Here is a form with an undefined font size (set to zero, which is the default value). It has been designed at 96 DPI (100%), and it looks like this :
101	101
102		-	~~<figure>~~
103		-	~~<img src="Testdpi100.png" title="Testdpi100.png" />~~
104		-	~~<figcaption>Testdpi100.png</figcaption>~~
105		-	~~</figure>~~
	102	+	![](/wiki-images/7/75/Testdpi100.png)
106	103
107	104		Now, at 120 DPI (125%), it becomes :
108	105
109		-	~~<figure>~~
110		-	~~<img src="Testdpi125.png" title="Testdpi125.png" />~~
111		-	~~<figcaption>Testdpi125.png</figcaption>~~
112		-	~~</figure>~~
	106	+	![](/wiki-images/0/03/Testdpi125.png)
113	107
114	108		As you can see, the font gets bigger and so the text is clipped. The window title gets bigger, but the client area of the window remains the same size. Note that these changes in size can occur by using an application with a different Windows theme, or with another operating system.
115	109
116	110		To avoid this, you must set the font size to a non-zero value. Note that Font.Size is expressed in points and Font.Height is expressed in pixels. In fact, only the value of Font.Height is stored, and Font.Size changes according to current DPI value. So if we set the font size, it will be fixed to a certain size in pixels.
117	111
118	112		If we try again with a fixed font size of 9 points, then at 96 DPI (100%), we get this :
119	113
120		-	~~<figure>~~
121		-	~~<img src="Testdpi100fixedM12P9.png" title="Testdpi100fixedM12P9.png" />~~
122		-	~~<figcaption>Testdpi100fixedM12P9.png</figcaption>~~
123		-	~~</figure>~~
	114	+	![](/wiki-images/f/fe/Testdpi100fixedM12P9.png)
124	115
125	116		Now if the same program is run at 120 DPI (125%), it becomes :
126	117
127		-	~~<figure>~~
128		-	~~<img src="Testdpi125fixedM12P9.png" title="Testdpi125fixedM12P9.png" />~~
129		-	~~<figcaption>Testdpi125fixedM12P9.png</figcaption>~~
130		-	~~</figure>~~
	118	+	![](/wiki-images/a/a1/Testdpi125fixedM12P9.png)
131	119
132	120		The result is the almost the same. The title bar is bigger, but the client area and the font size is the same. Note that in fact, the size in points of the font has changed.
133	121
134	122		The conclusion from this is that it is possible to avoid inconsistency in the display by fixing font sizes. But we do not take into account that the graphical elements may be smaller according to actual DPI of the screen. With DPI awareness, it is possible to make an application behave as if it knew the real size of the pixels.
135	123
136	124		### DPI Aware Application (For Vista +)
137	125
138	126		[CPickSniff](http://sourceforge.net/projects/cpicksniff2/) is an application to capture screen colors. We will use it as an example to see how High DPI works in Windows.
139	127
140	128		Default DPI
141	129
142	130		This is the app running at 96 DPI (100%). It's the default mode, when scaling isn't necessary.
143	131
144		-	~~<figure>~~
145		-	~~<img src="cpicksniff_defaultdpi.png" title="cpicksniff_defaultdpi.png" />~~
146		-	~~<figcaption>cpicksniff_defaultdpi.png</figcaption>~~
147		-	~~</figure>~~
	132	+	![](/wiki-images/4/4b/Cpicksniff_defaultdpi.png)
148	133
149	134		Windows DPI Scaling
150	135
151	136		This is the same app running at 144 DPI (150%) without a manifest, so Windows scales it like a bitmap. The result is a blurred image.
152	137
153		-	~~<figure>~~
154		-	~~<img src="cpicksniff_blured.png" title="cpicksniff_blured.png" />~~
155		-	~~<figcaption>cpicksniff_blured.png</figcaption>~~
156		-	~~</figure>~~
	138	+	![](/wiki-images/5/54/Cpicksniff_blured.png)
157	139
158	140		With Manifest
159	141
160	142		Running at 144 DPI (150%). This time the app includes a manifest but the application contains no code to handle scaling. Items aren't scaled whereas fonts are scaled (Windows does this automatically), so text is clipped.
161	143
162		-	~~<figure>~~
163		-	~~<img src="cpicksniff_nohighdpi.png" title="cpicksniff_nohighdpi.png" />~~
164		-	~~<figcaption>cpicksniff_nohighdpi.png</figcaption>~~
165		-	~~</figure>~~
	144	+	![](/wiki-images/1/1b/Cpicksniff_nohighdpi.png)
166	145
167	146		High DPI
168	147
169	148		Finally with both a manifest and a LCL scaling, the app is in High DPI.
170	149
171		-	~~<figure>~~
172		-	~~<img src="cpicksniff_highdpi.png" title="cpicksniff_highdpi.png" />~~
173		-	~~<figcaption>cpicksniff_highdpi.png</figcaption>~~
174		-	~~</figure>~~
	150	+	![](/wiki-images/b/bd/Cpicksniff_highdpi.png)
175	151
176	152		## High DPI in Lazarus 1.8 and above
177	153
178	154		To handle High DPI using new features in 1.8, follow these steps:
179	155
180	156		- On Windows: enable DPI awareness in Project Options -\> Application. Decide if you want to support per monitor DPI awareness or not.
181	157		- Enable LCL scaling for your application DPI awareness in Project Options -\> Application -\> "Use LCL scaling (Hi-DPI).
182	158		- Set TForm.Scaled=True for all your forms (it is the default value). All WYSIWYG should work automatically. Also the designer scales the forms accordingly.
183	159		- Set Application.Scaled=True.
184	160		- If you create controls run-time, scale all coordinates, sizes etc that have to be DPI-aware with TControl.Scale96ToForm() or ScaleDesignToForm() (depending on your choice of default PPI) or prepare your container (e.g. panel with controls) as it was with 96 PPI and then call TControl.AutoAdjustLayout(lapAutoAdjustForDPI, 96, ParentFormOfTheContainer.PixelsPerInch, 0, 0);
185	161		- If some of your components don't scale their inner sizes, override DoAutoAdjustLayout and scale the sizes (see TToolBar) - it has to be done for all controls. If a LCL control misses DoAutoAdjustLayout please report to mantis and provide a patch if you can.
186	162		- Hint: Do not develop under HighDPI Mode, always develop under normal mode and only test under HighDPI. Otherwise Lazarus IDE will set DesignTimePPI of the different forms to different values.
187	163
188	164		### Lazarus IDE high DPI
189	165
190	166		The Lazarus IDE is DPI-aware itself.
191	167
192	168		## High DPI in older Lazarus
193	169
194	170		Is not as nice as 1.8 but it works, call on each form OnCreate event:
195	171
196	172		Self.AutoAdjustLayout(lapAutoAdjustForDPI, 96, Screen.PixelsPerInch, Self.Width, ScaleX(Self.Width, 96));
197	173
198	174		## See also
199	175
200	176		- [[Autosize / Layout]]
201	177		- [[Anchor Sides]]
202	178
203	179		## External Links
204	180
205	181		- \[<http://msdn.microsoft.com/en-us/library/dd464646(v=VS.85>).aspx High DPI (Windows)\] MSDN article about High DPI
206	182		- [Guidelines for scaling](http://msdn.microsoft.com/en-us/library/windows/apps/hh465362) Windows Dev Center - User experience guidelines for scaling Metro style apps
207	183		- [[Windows Icon]] How to create icons that work with High DPI.
208	184
209	185		---
210	186		From the Free Pascal wiki, page "High DPI", as it stood on 2022-08-19 after a change by El Salvador, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history