Could someone explain how pages work?

OmniGraffle OmniGraffle for Mac
#1

I’m a long time Omnigraffle user, and the relationship between canvases and and pages has always been confusing to me. I wasn’t able to find an answer to my question, so here goes:

In Page Setup, you can define the paper size as Letter, Legal, etc. and the unit of measure is inches.

I usually use pixels as my unit of measure, and depending on how large the elements on the canvas are, sometimes Omnigraffle draws them on multiple pages and creates page breaks. To me, this implies that there’s some relationship between pixels and inches, but I can’t figure what that conversion is. Since my printer can print 600dpi, and my drawings are never even close to being 8.5 inches x 600 pix/inch = 5100 pixels, I’m not sure why Omnigraffle is creating page breaks.

I know I can set the canvas to print on one page, but the problem is that it messes with the page numbering for multi-page documents. If a canvas suddenly spans 4 pages, then the page number value jumps by 4 for every printed page.

Any thoughts?

#2

One of the better explanations exists at http://sebastien-gabriel.com/designers-guide-to-dpi/. A printers dpi capability does not correlate to the printable page size. It only defines how many dots will be in each square inch (density) of that page when you do print.

OmniGraffle takes the printable area specified in your printer settings show in the Page Setup dialog to define where page breaks belong. Even if you do select print canvas as one page, your page breaks remain defined by Page Setup. You can override the canvas orientation by selecting Landscape or Portrait in the canvas inspector, but by default we use Page Setup.

I hope this helps! Screen resolution vs print resolution is a complex topic and it’s a good question.

#3

Thank you for the link! I read the article and I almost understand. :)

I played around with object and page sizing a little more, and I’ve come to the conclusion that Omnigraffle uses 72ppi as its default. If I set the ruler units to inches, and I create a 10" x 10" square, it converts the size to 720px x 720px if I then change the ruler units to pixels.

If the page size is set to 8.5 in x 11 in (standard US letter size), the usable area is a little smaller than that because of the page margins, so let’s say for the sake of argument it’s actually 8 in x10 in. If the object is larger than 10 inches, which is to say larger than 720 px, it will trigger a page break.

#4

Yes! I’m glad you got the chance to investigate the default. 72ppi could easily be called a legacy screen resolution default, but if you consider how many people have documents from the past, any changes have to be carefully considered.

The printable page for US Letter is usually less than the full 8.5" x 11" because most printers still have a margin where your printer grips the paper to control the motion as it moves through the printing process. I think of that area as space for robot fingers, although I’m pretty sure that isn’t technically accurate. Anytime you exceed the maximum printable page (page size minus the margin), a new page is added. That is so you can effectively print a tiled document that will line up as a whole multiple page diagram including your canvas. The canvas is part of your document, even if it doesn’t have content on it and there is no canvas fill set. 2 pages wide by 1 tall is ok, 2 pages tall by 1 page wide is fine, but your canvas will be a rectangle of some sort, which is why larger designs tend to have blank pages as well as pages with content.

#5

I started this thread a while back, but I’m still wrestling with the same sort of problem.

Here’s the (what seems like a simple) use case:

I’m working on some wireframes that show interactions for an app on a Full HD screen (1920x1080). I’d like to make the diagram 1:1 in pixels with the actual screen so I can see how various elements will fit. In and of itself, this is pretty easy to do.

Where it gets tricky is trying to print it. Omnigraffle seems hellbent on using a 72ppi resolution for printing which means that there’s no way to get a 1920x1080 shape onto a piece of paper without spanning page breaks (and that’s not even counting white space around the edges for annotations, etc) because the long edge of a 8.5"x11" piece of paper will only support 792 pixels.

I can sort of work around this problem by checking the “Print canvas on one page” option in the Inspector, but if I want to use page numbers they get all screwed up because now Omnigraffle thinks I just want to print 4 pages on one piece of paper, and numbers them accordingly.

I made a quick diagram to show what I’m trying to do:

One partial solution that I came up with is to constrain my diagrams to less than 792 pixels so they fit. What is really sub-optimal about this is that now I have to do math to convert each element to the right size. For example, if I want to design a 250 px button for the HD screen, and my graffle object is 1/4 size, I have to make a 250/4 = 62.5 px button to get the scale right.

The other partial solution is to manually add page numbers to the bottom of each page which I suppose is easier overall but if I have to add a page in the middle of a 30 page deck then it’s a lot of work to manuall fix all of those page numbers.

Surely there must be a way to make this better!

#6

This may help. https://graphicdesign.stackexchange.com/questions/199/point-vs-pixel-what-is-the-difference, so yes, a point is always 1/72nd of an inch in applications regardless of what resolution (dpi) your printer prints at.

As you mentioned, “…the long edge of a 8.5"x11” piece of paper will only support 792 pixels." This should hold true across applications. If you measure in pixels, inches, centimeters or postscript points, the numbers change in the measurement increments used in the inspectors and the ruler, but what fits on the printed page hasn’t changed. It is the same size, no matter which increments you chop it into. If you print 14pt Helvetica from TextEdit, Pages, and OmniGraffle, you should have the same text at the same size from all of them. That is because there are 72 points in each inch no matter where you are printing from or what increment you set the ruler to. Part of the reason this is so confusing is many written resources use dpi and ppi interchangeably, although they aren’t the same.

Printers have points (can be imagined as dots of ink) and never pixels. That means pixels have to be converted into points when you print. That conversion isn’t changed with screen resolution or by what resolution your printer can output. When talking about printer dpi (dots per inch) we are talking about how many dots fit inside one inch, which is more like density than size. It is still one inch total, no matter how many dots go inside of that inch.

Surely there must be a way to make this better!

Canvas Scale in OmniGraffle Pro
In OmniGraffle Pro, you have the option to change the Units including the scale. This means you can try setting the Scale in the Canvas Inspector to 1pt = 10px or whatever ratio you want. 1pt = 2.43px is about as close as you can get for the example above. There’s more information in the OmniGraffle Help if you search for “Changing Ruler Units to Suit Your Design Needs” and “Canvas Scale”.

Page numbers that use the page number variable are based on how many pages will print. The printer you target in Page Setup defines how much content can fit on a page based on the page size set, as well as the margin required at each edge that the printer needs to grip the paper internally (to move it through the printing process).

When you set your scale to Pixels, the default Scale is 1pt =1px which means there are 72 points per inch, therefore where you have 72 pixels you get 1 inch of content on the defined page. When you set your scale to Inches-Fractional, you still have 72 points per inch. In OmniGraffle Pro you can change from that default to define a scale either exactly or as a ratio.

Page Setup Scale Percentage in OmniGraffle Standard
If using a different scale in Units doesn’t suit your needs, or if you are using OmniGraffle Standard, try using the scale percentage (Under the File Menu, choose Page Setup) at lower than 100% temporarily, only while you are printing. That way you can set it to 100% for pixel usage, and scale it down so more contents will fit on the page when printing. For your example, try somewhere between 40%-45%. Give that a try, and see if it gives you a bit more control than the Print canvas on one page checkbox. If you want to define your pages based on the content, try making a layer for each “Page” and use the <%layer%> variable. That way your numbering is controlled by the layer name and not by the printed page definition.

These are some techniques that could work, but I know there are many UX designers who measure in pixels & also need to print. Hopefully some other OmniGraffle users will share what works for them in case I missed a useful tip.

#8

My Answer All about Canvases; Pages; Templates; Printing in another thread Template with portrait and landscape canvases, may be helpful.

Cheers