From the Archive: Regarding Resolution Independence

The last of three articles I have decided to resurrect from the Hard Six archives. I’ve added some minor addendum’s as well.

Resolution independence. There’s a good chance you’ve heard of this. Mac OS 10.5 “Leopard” supports it, and Windows Vista partially supports it. What is it, and does it matter to you? I’ve added some corrections and notes as well.

How We Got Here

Way back in the day, before I was even sucking down oxygen, most computers had monochrome displays with resolutions on the order of 320×200. No joke. When the first Mac came out in 1984 with a screen resolution of 512×342, it was a big deal. Between the new-fangled GUI and the relatively high screen resolution, Apple engineers needed to make a decision: what would they set as the “normal” Dots Per Inch (hereafter referred to as DPI) on a Macintosh computer? They chose 72 DPI, because at 72 DPI, one pixel was equal to exactly one point. They used a monitor that output exactly 72 DPI for the Macintosh. Put it all together, and this meant that things on the screen and things that were printed out were exactly the same size. It was a beautiful thing, and it was also one of the last computers to accomplish this.

Monitor technology advanced quickly, and few monitors after the original Macintosh had a maximum resolution that output 72 DPI, instead landing between 85-100 DPI. There was no consistent DPI between monitors, because resolutions and sizes varied so greatly. However, because those monitors DPIs weren’t high enough to cause any real scaling problems, to this day the Macintosh still assumes your monitor is at 72 DPI, even though this is never the case. This can cause things to look “small” on the Macintosh, because Macintoshes think that inches are smaller than they actually are. My monitor has 94 DPI. My Mac, like every other Mac, thinks the DPI is 72. Therefore, while an inch on my screen is really 94 pixels, the Mac measures an inch as 72 pixels, and each inch is 22 pixels too small.

Then Windows came along and decided to impose a “solution” for the problem of varying monitor DPIs. Windows assumes, in most cases, that your monitor has 96 DPI. As a result, most monitors aim for 96 DPI, mine included. This solution had advantages and drawbacks, the scope of which is outside this article. The point is that because of the differences between monitors and operating systems, virtually no modern computer has any idea how large an inch actually is, nor do they even know how other operating systems measure an inch.

It is important to point out that neither solution is right. In fact, both are wrong. In an ideal world, your computer would communicate with your monitor and adjust the DPI of it’s video output automatically. In this whimsical scenario, an inch would be an inch no matter where you were. But we don’t live in a perfect world.

Until now, however, the problems were manageable. But we are now running into a new problem that is more serious than varying inch size.

Monitors don’t need to be any bigger. Have you seen a 30″ monitor? They’re huge. While you might need to have a wider working space, which is easily accomplished by having multiple 30″ monitors, the need for a taller monitor is virtually non-existent. This is even more apparent when you are dealing with notebook computers: nobody wants to carry around a 20″ luggable, but the need for more pixels is a tangible one.

As a result of hitting this physical limit, monitor manufacturers have been toying with high resolution screens. A 17″ widescreen monitor at 96 DPI clocks in close to 1440×960, which isn’t that much, especially for creative pros. Pro level 17″ inchers are at 1680×1050 these days, which is normally the resolution of a 20″. As you can imagine, this makes for a pixel-packed screen: the DPI on a brand new 17″ MacBook Pro is a whopping 117 DPI. This is obviously pushing the limits of human vision, especially if your eyes are less than perfect. But it gets worse. Dell offers a Latitude (D820) which, at 1920×1200 on 15.4 inches works out to a retina-scarring 147 DPI!

So, the need for a larger monitor, especially on notebooks, is nearly at an end. But the need for a sharper monitor is not. However, sharper monitors won’t work on todays operating system because of the age-old assumption regarding DPI that all modern OS’s make.

The solution to stratospheric screen DPIs is, you guessed it, resolution independence.

What Is Resolution Independence?

Right now, just about everything on your screen is a bitmap image. A bitmap image is simply a grid of pixels with varying colors and transparencies which creates a picture. JPEG, GIF, and PNG file formats are different ways of storing bitmap images. You can see the “grid” of pixels if you open any old JPEG in preview and zoom way in. The chunkiness you see is called pixelation, and it is a result of the image file not having enough pixels to fill the size you have specified by zooming in.

An even better example can be conjured up if you have the latest version of Mac OS X, 10.4.8. While holding control, use your scroll ball (or wheel) to zoom in and out. If you have a portable, hold control and use two-finger scrolling on your trackpad. The same “chunkiness” will occur, this is because the screen in front of you is rendered using bitmaps.1

We need to convert things to vector images in order to be able to scale them smoothy, and therefore make super-high resolution screens usable.

A vector image is a completely different animal from a bitmap image. Rather than store a grid of pixels, a vector image is a collection of equations that define lines, curves, colors, and transparencies. Because the image is formed with sets of lines and curves, they are theoretically infinitely scalable, because they simply need to be redrawn. The master logo file for The Hard Six is stored as a vector image, so it can be scaled as necessary:

This is the logo for The Hard Six. It is a PNG image at 114×75 px.

Unscaled Logo

This is the exact same PNG file, scaled to 342×225 px. As you can see, it has scaled poorly and pixelated.

Scaled Bitmap Logo

This is a 342×225 PNG file, created from the original vector image file. The edges are smooth because it has been scaled properly.

Vector-rendered logo

Addendum - 12/3/2007 I considered bringing this logo back, but decided against it. I’m still thinking up a new one.

A good example of something that already uses vectors are fonts. You can change the size of a (good) font from anywhere between 8 pt and 144 pt, and higher, with no pixelation. Another good example of vectors are Flash animations. You may have noticed that Flash animations, assuming they haven’t imported bitmap images, scale perfectly. This is why.

Of course, it isn’t enough for an operating system to simply have vector images, the operating system needs to know how to use it, that is, there needs to be a way to change the DPI of the screen. Windows XP has this feature, but it’s really pretty half-assed, because without the vectors or the high-res bitmaps to back it up, things look like hell when you change the DPI off 96.2 Similarly, the Tiger developers tools shipped with a debug feature that allows you to change the interface’s DPI on an application-specific basis. This feature hasn’t been given to the user because the vectors aren’t there to back it up, and things are pixelated, like they are in Windows in high-DPI mode.

How Do We Use Resolution Independence?

An operating system needs two things to be resolution independent: the ability to scale UI elements, and the use of vector images and high-res bitmap images to ensure scaling occurs properly. It is a huge shift from the way things work now, because it allows the OS to be perfectly usable at DPIs other than 72. (Or 96, in Windows case.) With 150+ DPI screens right around the corner, this is especially important. On a 150+ DPI screen, things would be about half the size they were meant to be. This is a problem.

Apple recently confirmed after much speculation that Mac OS X Leopard is resolution independent. Perhaps more important than the presence of resolution independence in the operating system itself is it’s presence in the frameworks. All you need to know about a framework in this context is that it is a group of common elements that applications use to ensure compatibility and consistency with the OS. This is part of the reason why many applications developed by third parties work so well with Mac OS X. By including resolution independence in the application frameworks, resolution independence is available to most Mac OS X applications as well.

Windows Vista works similarly, but the problem is that not as many developers use the frameworks provided by Microsoft, or they only use bits and pieces of them. So, even though Vista itself is mostly resolution independent, many of its applications won’t be for a while.

Addendum - 12/3/2007 Neither Leopard nor Vista shipped with real, user accessible resolution independence controls. Leopard has the necessary frameworks, vector-images, and high-res bitmaps to make this happen, though, which leads me to believe that this functionality is coming in a 10.5.x patch.

Resolution Independence and the Internet

If you aren’t a web designer, you can safely skip this part without missing anything.

What does resolution independence mean for the internet? At the moment, not much. There is no good format for storing vector images images for internet use. PDF files are huge, and SVG files are still pretty big.

This isn’t because vector image files are doomed to hugeness forever, its because there’s been no large push to make a web-friendly vector image format. Browsers are just beginning to support SVG. Until operating systems are fully resolution independent, it doesn’t really matter if the internet is, does it?

It would be nice if images could be scalable. I designed this site to be very usable. As such, it scales very well. Go ahead, try it. You can zoom up to 400% on The Hard Six before problems occur. Even then, all that happens is the nav bar breaks, but its still usable. Unfortunately, when you scale the page that big, the header stays the same size. I would love to use an SVG that scales with the rest of the site, but at this point, I can’t.

As they often do, the open-source community has the answer. An upcoming release of a relatively obscure Linux distro called Haiku uses an efficient vector image format for its icons, called HVIF: Haiku Vector Image Format. (Tip of the hat Daring Fireball) Addendum - 12/3/2007 Haiku isn’t GNU/Linux based. Whoops! It depends on the image, but HVIF’s are sometimes even smaller than their bitmap counterparts. While I don’t expect HVIF to become the de facto standard for vector images, HVIF is important because it proves that efficient vector images can be done. Between resolution independence finally making its way to operating systems and the proof-of-concept HVIF provides, perhaps an upcoming SVG revision will be more efficient.

But even if SVG shapes up, browsers need to support its ability to scale up and down, and in all likelihood, images will require new XML markup or CSS properties to dictate how they scale on pages. What this all means is that it is going to be a while before people even start to even care about resolution independence on the web, much less begin to implement it. This is especially true when you consider how slow web standards move, since we are always waiting for IE/Trident to catch up with Mozilla, Webkit, and the W3C.

Why Should I Care?

It depends. If you have weak vision, this is the revelation you have been waiting for since you bought your first computer. You’ll be able to make everything nice and big without making it fuzzy.

If you deal with graphic design, this is exciting because it means screen resolution will eventually catch up with print resolution, which will greatly streamline your workflow. It also means you can match the DPI of your screen and your computer, so things on the screen can be measured in inches, centimeters, picas and everything else accurately.

For the average user, it means that your next screen will be potentially much sharper, assuming you want to spend the money. This is especially true for notebooks which are already packing in pixels on their tiny screens like a college student packing his pockets with free condoms at a university-sponsored sexual awareness event. Images and text will be crisper, but you won’t have to strain your eyes to read tiny text like you would now, if you are using a high-DPI screen and a non-resolution independent OS–which, at the moment, is all of them.3

No matter how you slice it, resolution independence is a good thing for computers to have, and it is one of the most important and ambitious features included in both Vista and Leopard.

  1. Even though fonts are vectored, zooming in OS X seems to render things as bitmaps before it zooms, so pixelation occurs anyway. Theoretically, in Leopard when we have resolution independence, the zoom feature will work properly, by scaling the elements as you zoom. «
  2. Remember that retina-scarring Dell? It and its high-res brethren come in 120 DPI mode out of the box. This is why on a new Dell, images on the screen, including those on web pages, look like they have been run through a lawnmower. «
  3. Linux geeks will tell you that GNOME has supported SVG images since version 2.0. I’ll let you decide whether or not this is significant. «

December 3rd, 2007 | Computing


Thanks !

Comment by emomsappease — August 3, 2008 @ 2:27 am

very interesting, but I don’t agree with you Idetrorce

Comment by Idetrorce — December 15, 2007 @ 8:46 am

True. But in terms of resolution independence, the desktop will most certainly get there before the web does.

Comment by Scott — December 3, 2007 @ 6:27 pm

The OS keeps becoming less relevant because of the browser. IE sucks, cause it doesn’t support SVG like ‘everything else does’ (just one of the many reasons)

Comment by stelt — December 3, 2007 @ 6:24 pm