{"id":107318,"date":"2022-10-25T07:00:00","date_gmt":"2022-10-25T14:00:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/oldnewthing\/?p=107318"},"modified":"2022-10-24T18:29:17","modified_gmt":"2022-10-25T01:29:17","slug":"20221025-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20221025-00\/?p=107318","title":{"rendered":"Why are many Windows user interface elements positioned at multiples of 4 or 8 pixels?"},"content":{"rendered":"<p>Some time ago, we learned that Windows 95 <a title=\"Why did Windows 95 keep window coordinates at multiples of 8?\" href=\"https:\/\/devblogs.microsoft.com\/oldnewthing\/20210517-00\/?p=105217\"> positioned windows at multiples of 8 pixels<\/a> in order to make bit block transfers more efficient. Is that why many Windows user interface elements are still positioned at multiples of 4 and 8 pixels? (And why four as well as eight?)<\/p>\n<p>No, it&#8217;s not about bit block transfer efficiency.<\/p>\n<p>Oh, do designers just have this compulsion about multiples of four and eight, to the point where they can glance at a screen, and if something is not at a multiple of four pixels, they get this odd feeling that the screen is somehow <i>wrong<\/i> and needs to be <i>fixed<\/i>?<\/p>\n<p>No, that&#8217;s not it either. Or at least I don&#8217;t think that&#8217;s true.<\/p>\n<p>The reason for positioning elements at multiples of four or eight comes down to screen scaling.<\/p>\n<p>As the screen pixel density increases, Windows applies a scaling factor so that objects on the screen appear at roughly the same visual size. If you have a 192 pixels-per-inch display, it will show a rectangle at the same physical size as the same rectangle on a 96 pixels-per-inch display, but with four times as many pixels (twice horizontally and twice vertically).<\/p>\n<p>I say approximately, because Windows doesn&#8217;t go down to the last pixel to match sizes. If your screen pixel density is 193 pixels per inch, Windows will treat it as 192 pixels per inch for scaling purposes. If it had used the exact value of 193 pixels per inch, then all of your screen elements would be scaled by 201%, and that extra 1% is going to make things blurry: A box that started out as 100 pixels wide will end up scaled to 201 pixels wide, and that means that almost none of the source pixels land on an exact pixel boundary when scaled up.<\/p>\n<p>The missing piece of the puzzle is the fact that Windows recommends scaling factors in multiples of 25%: 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, 400%, 450%, 500%.\u00b9<\/p>\n<p>Now it all comes together.<\/p>\n<p>If you arrange for all of your unscaled pixel coordinates to be multiples of 4 (or, for added safety, multiples of 8), then after scaling, they will still be exact integers.<\/p>\n<p>\u00b9 If you look at the <a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/win32\/api\/shtypes\/ne-shtypes-device_scale_factor\"> <code>DEVICE_<wbr \/>SCALE_<wbr \/>FACTOR<\/code> enumeration<\/a>, you&#8217;ll see values that aren&#8217;t multiples of 25%. Those are old values left over from Windows 8 and Windows Phone. They&#8217;re not used any more.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It depends on whose pixels you&#8217;re talking about.<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[2],"class_list":["post-107318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-history"],"acf":[],"blog_post_summary":"<p>It depends on whose pixels you&#8217;re talking about.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/107318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=107318"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/107318\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=107318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=107318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=107318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}