Twips, pixels, and points, oh my! - user-interface

or "How I learned to stop worrying and learned to love measurement systems"
I wanted a central spot that I can refer to later to give me a quick low-down on various units of measurement used in programming. SO seemed the best place to put it, and while I could go ahead and answer the question myself, y'all are a much smarter bunch than I, so I might as well let you do it.
Please pick one unit that you're familiar with, use "#name" in the first line to give it as the heading (making it easy to find) and define it within your answer. Please do not duplicate - add comments or edit existing answers rather than adding a new answer. Similar units are still seperate - so please don't define em and en in the same answer. If a unit is exactly the same as another unit, add a line for "aliases" below the heading.
If it's a particularly obscure measurement type, please link to a second reference so people don't downvote you because they've never heard of it.
Point
Pica
Twips
Pixel
Em
En
CPI
DPI
I'm seeing a lot of downvoting - I suppose people believe this doesn't add value to StackOverflow's community. Please consider commenting below if you feel this doesn't add to the community, or if you think this is a bad question. I'm interested in improving it if you have any suggestions.
The great thing about standards is there are so many to choose from!
-Adam

I recommend to ammend the above answers using the following descriptions
PICA
Pica Typographic unit of measurement in the anglo-american point system. One pica is 1/72 Inch (0,351 mm) and equals 12 pica points. The didot equivalent of a pica is a cicero. A standard unit of measure in newspapers. There are 6 picas in one inch, 12 points in one pica.
PICA POINT
Pica Point 1/12 of a pica
POINT
996 points are equivalent to 35 centimeters, or one point is equal to .01383 inches. This means about 72.3 points to the inch. We in electronic printing use 72 points per inch
1 point (Truchet) = 0.188 mm (obsolete today)
1 point (Didot) = 0.376 mm = 1/72 of a French royal inch (27.07 mm)
1 point (ATA) = 0.3514598 mm = 0.013837 inch
1 point (TeX) = 0.3514598035 mm = 1/72.27 inch
1 point (Postscript) = 0.3527777778 mm = 1/72 inch
1 point (l’Imprimerie nationale, IN) = 0.4 mm
EM
An old printing term for a square-shaped blank space that’s as wide as the type is high; in other words, a 10-point em space will be 10 points wide.
EN
Half an em space; a 10-point en space will be 5 points wide.
DPI
The number of dots per inch a printer prints. The higher the dpi, the finer the resolution of the output.
PIXEL
The smallest dot you can draw on a computer screen
CPI
Counts per inch for Mouse properties and The number of horizontal characters that will fit in one inch for Printer properties
PITCH Alias CPI
Pitch describes the width of a character. Pitch equals the number of characters that can fit side-by-side in 1 inch; for example, 10 pitch equals 10 characters-per-inch or 10 CPI. Pitch is a term generally used with non-proportional (fixed-width) fonts.
TWIPS
A twip (derived from TWentieth of an Imperial Point) is a typographical measurement, defined as 1/20 of a typographical point. One twip is 1/1440 inch or 17.639 µm when derived from the PostScript point at 72 to the inch, and 1/1445.4 inch or 17.573 µm based on the printer's point at 72.27 to the inch
Additional Units:
LPI
The number of vertical lines of text that will fit in one inch
PPI
Thickness of paper, expressed in thousandths of an inch or pages per inch.
or sometimes no of horizontal pixels closely printed or displayed per inch.
FONT SIZE
Font size or Type size is the baseline distance for which the font was designed. A font should normally be identified and selected by this size, because the intended baseline distance is much more relevant for practical layout work than the actual dimensions of certain characters.
FONT HEIGHT
Font height is the height in mm of letters such as k or H. Typically, the font height is around 72% of the font size, but this is of course at the discretion of the font designer.
X-HEIGHT
x-height indicate typesize of lower-case letters excluding ascenders and descenders (from the height of the lower-case x)
H-HEIGHT
h-height or cap height refers to the height of a capital letter above the baseline for a particular typeface. It specifically refers to the height of capital letters that are flat—such as H or I—as opposed to round letters such as O.

Pixel
One of the little colored squares on your screen.

Pica
A typographical measure of 12 points, sometimes (incorrectly) called an Em. (in fact, an em is actually a horizontal distance the same as the point size of the type).

Twips
'Twentieth of an Imperial Point'. A measure used for marking up positions of widgets in Visual BASIC user interfaces. It was used this way so that positions could be specified precisely using integers. One Twip = 1/20 point = 1/1440 inch.

EM
An old printing term for a square-shaped blank space that’s as wide as the type is high; in other words, a 10-point em space will be 10 points wide.

DPI
Dots per inch. A dimensionless number used to measure the resolution of something in space, i.e. with respect to real occupied physical size.
dds complexity and headache since the standard/default DPI of a computer screen varies with the operating system. Macintosh screens generally have 72 DPI, while Windows favors 96. If you don't compensate for this when displaying images (and text), you will get unexpected variations.
Always amusing when people start talking of "the DPI of this image", for digital images such as PNG or JPEG. To me, they only have absolute pixels in them, unconnected to any physical size. If you want to print the image on a (for instance) 300 DPI printer, then you need to adapt and scale to get it correct, but the image itself only has pixels.

EN
Half an em space; a 10-point en space will be 5 points wide.

CPI
Counts per inch for Mouse properties and
The number of horizontal characters that will fit in one inch for Printer properties
PITCH Alias CPI
Pitch describes the width of a character. Pitch equals the number of characters that can fit side-by-side in 1 inch; for example, 10 pitch equals 10 characters-per-inch or 10 CPI. Pitch is a term generally used with non-proportional (fixed-width) fonts.

PostScript Point
1/72th of an inch.

Related

Is it possible to calculate dots per degree of visual angle without the object size?

Suppose i have been given the reading distance of 12 inches and the dpi is say around 600. Is there anyway to calculate the dots per visual angle without the object size or any other information?
Yes, the size of the object is not important -- you can consider it to be an infinite plane of pixels extending in all directions at 600 DPI. This works because you want the dots per degree. It's like asking for density (mass per volume) of an object instead of the total mass - you need to know the size for the total mass, but not for the density.
So the answer to your problem would be the area (in square inches) of the base of a 12" tall cone with a 1-degree point, times the DPI.

Core Text glyph placement and em values

I am trying to draw some musical notes using the Bravura font from http://blog.steinberg.net/2013/05/introducing-bravura-music-font/ using core text functions.
A metadata json file accompanying this font has an "attach" coordinate in em unit fractions for where stems should be attached to certain musical notes. This attachment point is relative to a bounding box around the note glyph again with the dimensions in fractions of em unit.
My crude ASCII picture shows the attach point of the stem to the musical note:
|
|
|
/---\* <- attach point here
| |
\---/
From wikipedia:
"An em is a unit of width in the field of typography, equal to the currently specified point size. For example, one em in a 16-point typeface is 16 points wide. Therefore, this unit is the same for all typefaces at a given point size."
I would like to use the Core Text function CTFontDrawGlyphs which takes a coordinate in pixels to use for the glyph placement.
I would also like to use the Core Graphics functions CGContextMoveToPoint, CGContextAddLineToPoint to draw the stems that attach to the musical note glyphs.
I'm a bit unclear how to go from a coordinate in em unit fractions to a particular coordinate in pixels for a glyph of a particular point size so that I can accurately place these stems to the musical note glyph.
In the absence of a text transformation matrix (CGContextSetTextMatrix), 1 em will the be the same number of points as the font size. So for a 12 point font with the default identity text matrix, 1 em = 12 pt.
Note that almost nothing in Core Graphics is given in pixels. They're in points (Core Graphics points, not PostScript points). For a retina display, 1 point contains 4 pixels (2x2). This is probably what you mean anyway, but if you interact with images, the point/pixel conversion is very important.
(I kind of feel like I've repeated what you already know; is there more to the question? From a given origin, you would compute the coordinate by multiplying the em unit offset by the font size.)

Point to pixel conversion

On Mac OS X, I need to convert a point measurement to pixel measurement.
The formula which I know is
pixel = point * resolution (in terms of dpi) / 72
I have few measurements which I want to convert to pixels. Although reverse cases would also be possible.
How to do this in Cocoa or Quartz?
Does it depend on axis? Means would 5 pixels in Y-axis would be same as 5 pixels in X-axis in terms of points? Or is it safe to assume that resolution is same for both X and Y axis?
Please note that I do not want to make any assumption about resolution.
You probably don't want to convert anything to pixels. OS X now works in points; so for example when you draw a rectangle you are giving its dimensions in points, not pixels.
A OS X Quartz point is related to, but not the same as, a (computer) printing point - the two used to be the same, 72 points = 1". However WYSIWYG has become "some scale of" and 72 points (note not pixels) on screen is not a physical inch as screen pixel densities have increased. However 72 points is still an "abstract" inch.
In OS X you draw in points, the OS takes care of mapping those points to the physical pixels on the screen; which roughly translates to screens up to a certain density being treated as 72ppi (pixels/inch) or 1 pixel/point, and higher density screens being treated as 144ppi or 2 pixel/point - for example these are the ppi assigned to standard and Retina screenshots.
If you really, really need to know what a point translates to in pixels you can find out, but this changes depending on what screen a window is on.
For details of all of this you can start with Points Don’t Correspond to Pixels and then read the rest of the High Resolution Guidelines for OS X that reference is part of. How to find point to backing store mapping, if you really, really need to know, is covered.
HTH
There is an opportunity for confusion when your user specifies a length in 'points' as to whether they mean typography points of size 1/72" or lenghts compared to Mac UI points, which vary with the display resolution.
In Mac OS, "points" are pixels, unless you are in high resolution mode, in which case points are 2x2 pixels. The "Points Don't Correspond to Pixels" page says "on a high-resolution display, there are four onscreen pixels for each point," indicating a 4:1 correspondence in hi-res, and 1:1 correspondence in standard res. It also notes:
Note: The term points has its origin in the print industry, which defines 72 points as to equal 1 inch in physical space. When used in reference to high resolution in OS X, points in user space do not have any relation to measurements in the physical world.
To convert a typographer's point size to something physically the same size on a Mac screen in Mac points, your formula is exactly correct. You might rename 'pixel' to Mac points:
MacPoints = (TypesettersPoints/72)*ResolutionInDotsPerInch
Best to stick with points.
First you would need to know where the point is coming from. Views, Windows and Screens all have their own coordinate systems.
You would need to do several things to translate this to the pixel grid of a given screen.
First you need to convert your point to the screen coordinates.
Then to coordinates of pixel grid of the screen.
You will also need to find out the current display properties to know if it's a retina display or not. ( makes a big difference.)
All of the methods are in NSView, NSWindow, NSScreen.
All of the functions are part of Quartz Display services. You will need ones for CGDisplay you might need ones for CGWindow.
You will also need to have your app observe notifications for display configuration changes and figure out the hard part, when a point is in a coordinate space that overlaps two screens.
I leave it to you to do the rest and decide if you really need this.

Element x, y, width, height translation to different dimensions

My math must be very rusty. I have to come up with an algorithm that will take a known:
x
y
width
height
of elements in a document and translate them to the same area on a different hardware device. For example, The document is being created for print (let's assume 8.5"x11" letter size) and elements inside of this document will then be transferred to a proprietary e-reader.
Also, the known facts about the e-reader, the screen is 825x1200 pixels portrait. There are 150 pixels per inch.
I am given the source elements from the printed document in points (72 Postscript points per inch).
So far I have an algorithm that get's close, but it needs to be exact, and I have a feeling I need to incorporate aspect ratio into the picture. What I am doing now is:
x (in pixels) = ( x(in points)/width(of document in points) ) * width(of ereader in pixels)
etc.
Any clues?
Thanks!
You may want to revert the order of your operations to reduce the effect of integer truncation, as follows:
x (in pixels) = x(in points) * width(of ereader in pixels) / width(of document in points)
I don't think you have an aspect ratio problem, unless you forgot to mention that your e-reader device has non-square pixels. In that case you will have a different amount of pixels per inch horizontally and vertically on the device's screen, so you will use the horizontal ppi for x and the vertical ppi for y.
assuming your coordinates are integer numbers, the formula x/width is truncating (integer division). What you need is to perform the division/multiplication in floating point numbers, then truncate. Something like
(int)(((double)x)/width1*width2)
should do the trick (using C-like conversion to double and int)

Calculating pixel length of an image

May I know what are the ways to calculate the length of 1 pixel in centimeters? The images that I have are 640x480. I would like to compare 2 pixels at different places on the image and find the difference in distance. Thus I would need to find out what's the length of the pixel in centimeters.
Thank you.
A pixel is a relative unit of measure, it does not have an absolute size.
Edit. With regard to your edit: again, you can only calculate the distance between two pixels in an image in pixels, not in centimeters. As a simple example, think video projectors: if you project, say, a 3×3px image onto a wall, the distance between the leftmost and the rightmost pixels could be anything from a few millimeters to several meters. If you moved the projector closer to the wall or farther away from it, the pixel size would change, and whatever distance you had calculated earlier would become wrong.
Same goes for computer monitors and other devices (as Johannes Rössel has explained in his answer). There, the pixel size in centimeters depends on factors such as the physical resolution of the screen, the resolution of the graphical interface, and the zooming factor at which the image is displayed.
A pixel does not have a fixed physical size, by definition. It is simply the smallest addressable unit of picture, however large or small.
This is fully dependent on the screen resolution and screen size:
pixel width = width of monitor viewable area / number of horizontal pixels
pixel height = height of monitor viewable area / number of vertical pixels
Actually, the answer depends on where exactly your real-world units are.
It comes down to dpi (dots per inch) which is the number of image pixels along a length of 2.54 cm. That's the resolution of an image or a target device (printer, screen, &c.).
Image files usually have a resolution embedded within them which specifies their real-world size. It doesn't alter their pixel dimensions, it just says how large they are if printed or how large a “100 %” view on a display would be.
Then there is the resolution of your screen, as others have mentioned, as well as the specified resolution your graphical interface uses (usually 96 dpi, sometimes 120)—and then it's all a matter of whether programs actually honor that setting ...
The OS will assume some dpi (usually 96 dpi on windows) however the screens real dpi will depend on the physical size of the display and the resolution
e.g a 15" monitor should have a 12" width so depending on the horizontal resolution you will get a different horizontal dpi, assuming a 1152 pixel screen width you will genuinely get 96 dpi

Resources