Imagine a book with no page margins. The text runs right to the edge of the paper. You’ll have to crack the spine to gain access to characters in the gutter. To access the text at the bottom, you have to move your thumbs our of the way. If the book is a little old, the characters on the outside may be worn off entirely. No header or footer is present, so navigation is a task. To make a note on something you find, you’ll have to write it between the lines. We haven’t even mentioned the fact that the book looks horrible, or has forced the publisher through hoops to produce the book in full bleed.
The margin, then, is an essential element of all paged media. It solves all the horrors above: spinal injuries are greatly reduced; the closed book when dropped has its content protected by a chunk of wood; you can hold it comfortably; page numbers and section titles guide you around; you have space for marginalian comments; the composition is pleasing; and ‘printing on the edge’ is no longer an issue (you can’t do it with your home printer).
So margins are a Good Thing. In implementing them, though, we’ll have to be more specific: how big should the four margins (top, bottom, inside, outside) be, given the size of the book?
This simple question doesn’t have a simple answer. The big reason for this is competing rationales; for each design consideration there is a different optimum:
|Goal||Ideal margin appearance|
|Save the book’s spine||Give precedence to the inside margin, especially in fat books.|
|Blank space for holding the book||Precedence to the bottom and outside margins.|
|Wear does not affect book content||Precedence equally to all but the inside margin, which doesn’t wear.|
|Navigation is easy||Precedence to the top and bottom margins.|
|Ample space for reader’s notes||Precedence to outside margin.|
|Pleasing composition||Printed area vertices lie on page “ley lines”; geometrical ratios.|
|Don’t require print bleed||At least 5mm on all margins.|
So different goals are pushing in different, sometimes opposite, directions. Some goals are independent of the page area; some are not. Some are independent of page ratio, others not. Some are dependent on book length, others not, and so on.
Canons of page construction
Let’s begin with the most complex of the design goals: pleasing composition. Wikipedia calls these considerations the canons of page construction. The geometrical means of constructing an ideal page seem surprisingly long-standing and agreed upon. Surprisingly, though, I couldn’t find implemented algorithms online, so over at github I’m hosting a small library I’ve written for this article.
The first principle is that some ratios are better than others. These ratios should be applied both to the page and to the printable area. The less ratios in the composition, the letter. They are:
- 2 : 3
- 1 : φ (the golden ratio)
- 1 : √2 (the ratio governing A3, A4, A5 paper, etc.)
The second principle is that the rectangle defining the printable area should have vertices that lie on what I would call “ley lines”. If you have a two-page spread in front of you, these lines are those you can draw between five vertices: the four corners of the book plus the top of the gutter.
A third principle, not always applied, is that the print width should be the same as the page height.
A few different methods exist over at Wikipedia, aiming for the above goals. Most actually boil down to the same result: the Van de Graaf canon. This is the most general algorithm, and the two other main methods obtain the same result when the page ratio is 2 : 3. I’ll let you judge for yourself whether the results are pleasing. In order of decreasing page height, these are outputs from my above script:
Let’s say you agree with me that the above are beautiful. Note that, looking at the right-hand page:
- the printed area is the same shape as the page area
- the top left and bottom right vertices of the printed area lie on the diagonal of the right-hand page
- the top right vertex of the print area lies on the diagonal of the two-page spread
- the gutter margins together are the same width as an outer margin
Meditation on the Van de Graaf
I would guess that your first thought after looking at these (other than that they’re attractive), is that they are so liberal in their use of space. I would secondly guess that your thinking that derives from experience: have you ever seen a bottom margin as big as that on the 1:φ ratio? Why not? The answer lies firstly in the competing rationales above, and secondly in more rationales, aiming to reduce margins to nothing, that I now list here:
- Spend less on paper. Paper margins and profit margins aren’t friends.
- Save trees. Publishers and consumers alike are conscious of the environment.
- Save space and weight. Less margin means paying for less shelf space at the bookshop. Volume and weight could be halved, which reduces transportation costs for the publisher and consumer (you’re travelling with your Comprehensive Travel Guide to Asia; decide between buying the Van de Graaf edition, or buying a zero-margin copy letting you squeeze another pastel-coloured holiday novel in your suitcase).
I’ve got about as far as I can with theory. I decided at this point to take some measurements of some books on my shelf. (The data from my twenty samples is in an OO spreadsheet in the about git repo.) Here’s some summary findings:
- Books, and the printable area, are taller and thinner than Jan Tischichold’s use of the 2:3 ratio. The average is 2:3.1 for page size, and 2:3.3 for printable area — hovering around 1:φ but not hitting it.
- The printable area was invariably taller and thinner than the page area, compared to the constant ration of the Van de Graaf.
- Publishers can’t decide between bigger outside margins (space for comments, &c.) and bigger inside margins (saving cracked spines). On average, the ratio of inside to outside was 1:1, but few or not hit that deliberately.
The Typography of Discworld
I found many page constructions that were unappealing, niggardly, and un-functional. However, I did come across a few that were not. One neat one is in the Corgi editions of Terry Pratchett’s Discworld books. The construction is as follows.
Draw the diagonals of the full-page spread. Next draw the ‘V’-shape as in the Van de Graaf, but upside-down. Mark the verticals at the intersections (thus dividing the spread into three equal slices, as in the Van de Graaf). Draw diagonals from the intersections to the bottom of the vertical on the opposite page. The new intersections are the inside bottom of the printable areas. Draw two more diagonals, from the top of the verticals to the outside bottom corners of the same page. From the two known printable area vertices, draw horizontally; the intersection at the new diagonal is the outside bottom of the printable area. Finally, draw vertically until you hit the ‘V’; this marks the top of the printable area. Look at it:
The Discworld canon certainly looks similar in geometric spirit, but they are dissimilar in other ways. The Discworld gives you more page area (66% compared to 44%). It throws most of the outside margin away, disregarding the aesthetic principle that the gutter width should be the same as one outside margin. Take a look at it on the same page ratios I used earlier:
Word processors, and designing a single-page canon
How do today’s word processors implement page margins? The first thing to note is that, by default, all pages are symmetrical: there’s no such thing as left and right pages. Considering that its output will most likely be unbound A4 from a home printer, this makes sense.
Specifically, the following margins are set by default (My figures for Word are based on Google; I don’t have access to an installation myself):
|Word processor||Top margin||Bottom margin||Inside margin||Outside margin|
How were these figures decided upon? My guess is that foremost they’re fetishes for an individual measurement system: Word the imperial, Writer the metric. Neither seems to be a good basis for a sensible default. For example, when working with an A4 page, in which the long side is an irrational figure (210mm × √2), we would expect irrational figures for the margins, too. Word’s decision to go for larger side margins than end margins is especially odd; my survey above put side margins at 60% of end margins.
First attempt at a single-page canon
The reason that word processors don’t have agreed sensible margins is that, seemingly, no canon has been designed for pages that are not part of a two-page spread. So, why not use our principles from above to create one? Let’s proceed:
- We this time only work with four starting vertices: the four corners of a rectangle.
- There are only two ‘ley lines’: the diagonals from one corner to its opposing corner.
- We can (and so will) place the printable area’s vertices on these leylines.
- The less ratios, the better: let’s use the page ratio for the printable area ratio. (So far is equivalent to a scaling-down of the page rectangle on its centre. We just need one principle to fix the scale…)
- The printable height is equal to the page width.
We end up with the following:
Lovely! We’ve just bettered the two biggest word processing packages! Or have we …
A successful single-page canon: the Double-Circle
Working on a 2:3-ratio sheet, I disregarded the other possibilities. The naïve canon above varies the printable area wildly with the page ratio, and it won’t do. We need one that produces sensible results for all page shapes: tall, square, and fat. I’ve developed one that does so, and I call it the Double-Circle Canon. Here it is:
And, as before, let’s see it in action:
Why, this page is superb. I have been researching this on-and-off for years. I can’t believe I never stumbled across this page before.
The idea for a single-page canon is brilliant.
This single page canon is so cool I figured I’d try out the math to be able to bring the design to the desktop so to speak and calculate the actual margin sizes based on paper size. My main intention was to be able to apply the canon to a standard word processor such as Word or Pages.
I’m sure there are better mathematicians than me out there who may be able to simplify, but my scratchings were:
1. Imagine the page as a chart with the left and bottom sides acting as the x=0 and y=0 axes
2. The diagonal line running from bottom left to top right corners of the page passes through the origin (0,0) on the chart and has a generic equation of y=mx+c
3. This line is simplified because c=0 (passes through the origin) and the gradient of the line m is equal to the ratio of height to width of the page – e.g. for A4 paper it’s 297/210 or approx. 1.414286
4. Taking the top circle in the canon, that – like every circle – has a generic equation of (x-a)^2+(y-b)^2=r^2 where (a,b) is the center point of the circle and r is the radius
5. This also simplifies because r, the radius, is equal to half the width of the page (e.g. 210/2=105 for A4 paper) and so is a, the horizontal distance of the center from the left hand side of the page, because the circle is as wide as the page itself; b is equal to the height of the paper less the radius of the circle, which for A4 is 297-105=192
6. In summary this far for the A4 example, the line has an equation of y=1.414286x and the values in the circle’s equation of a, b and r are 105, 192 and 105 respectively
7. Now for the fun part. The right and top margins (equal to the left and bottom margins because the canon is vertically and horizontally symmetrical) are given by the horizontal and vertical distances between the point at which the line intersects with the circle (that is, the upper and rightmost intersection point given that there are actually two) and the top right hand corner of the page, or point (297,210) on A4. According to my inner geek the line passing through the circle is a secant; in order to find the coordinates of both intersection points you have to use the straight line’s equation to substitute for y in the circle’s equation, reduce the substituted form to a quadratic and resolve for x.
8. The substituted formula will work out as:
I bet you had that in your mind all along 😉
This is a standard quadratic of the form ex^2+fx+g=0 (normally this is written as ax^2+bx+c=0, but we used a, b and c earlier for the circle’s equation so I substituted e,f and g to keep things clear)
9. This means that e=(1+m^2), f=(2m(c-b)-2a) and g=a^2+(c-b)^2-r^2 … if you work these out for A4 paper you get e=3.000204, f=-753.086 and g=36864
10. The two possible values of x are given by these equations:
x1=(-f+sqrt(f^2-4eg))/2e which is 184.366 for A4 paper
x2=(-f-sqrt(f^2-4eg))/2e which is 66.6455 for A4 paper
11. This means that x1 is 184mm across the page and x2 is 66mm across – so x1 is the rightmost or the two intersection points. To find the corresponding value of y we use the line equation and see that y=1.414286 times 184, or 260.7462
12. So if that’s our point of intersection, the top margin must be 297-260.7462=36.25381mm and the right margin must be 210-184.366=26.63401. Plug these into Word or Pages and you’re done!
Apologies for the long-winded post, but feel free to play around with your own paper size and if you find a way of shortening the math please post here and let me know your secret.
Dammit. In 7 (above) I meant that the top right corner is point (210,297) not (297,210) and in 12 the right margin is 210-184.366=25.63401. Apologies!
Great article… Have you removed the github page? 404: https://github.com/eegg/vandegraaf/tree/55579af11525cfb31de445f4f6c71f704f53ec9c/vandegraaf.py
var height = 297;
var width = 210;
/* y = mx + b (b = 0) */
var slope = height / width;
/* (x-a)^2 + (y-b)^2 = r^2 */
var radius = width / 2;
var a = radius;
var b = height - radius;
/* ex^2 + fx + g = 0 */
var e = (1 + Math.pow(slope, 2));
var f = (2 * slope * (-b) - 2 * a);
var g = Math.pow(a, 2) + Math.pow(-b, 2) - Math.pow(radius, 2);
/* x1 = (-f + sqrt(f^2 - 4eg)) / 2e */
var x1 = (-f + Math.sqrt(Math.pow(f, 2) - (4 * e * g))) / (2 * e);
/* x1 = (-f - sqrt(f^2 - 4eg)) / 2e */
var x2 = (-f - Math.sqrt(Math.pow(f, 2) - (4 * e * g))) / (2 * e);
/* y1 = mx1 + b (b = 0) */
var y1 = slope * x1;
document.write('height: ' + height + '');
document.write('width: ' + width + '');
document.write('slope: ' + slope + '');
document.write('radius: ' + radius + '');
document.write('a: ' + a + '');
document.write('b: ' + b + '');
document.write('e: ' + e + '');
document.write('f: ' + f + '');
document.write('g: ' + g + '');
document.write('x1: ' + x1 + '');
document.write('x2: ' + x2 + '');
document.write('y1: ' + y1 + '');
document.write('top and bottom margin: ' + (height - y1) + '');
document.write('left and right margin: ' + (width - x1) + '');
Beautiful work. I’ll not get into the maths because I’m too old for that nowadays, but wanted to comment on the one place I see this fail: a square page. Results in perfectly symmetrical margins which I find unappealing.
But then, that’s opinion, which you’re welcome to dispute.
For a normal shaped book, this is worth playing with. For my square book, I’m going Van de Graaf.
Nice work here.
For those who are interested, I calculated the layout for US Letter – 8.5 x 11. I am notoriously for errors in my calculations. My high school calculus teacher told me I was the smartest person he had met who couldn’t add. So if someone is so inclined, I wouldn’t mind a calculation confirmation. But regardless, here’s what I got.
Bottom line is
side = 1.09
top = 1.41
I am going to show my work if anyone wants to check my calculations.
Height = y = 11 in
Width = x = 8.5 in
Calculate slope of line
y = mx + c
c = 0
m = slope = 11/8.5 = 1.29411
Calculate location of circle
radius = 8.5/2 = 4.25 in
b = 11 – 4.25 = 6.75
a = radius = 4.25
Calculate intersection of line and circle for x
x = 7.41109 or 2.29851
Calculate y given x
Y = 1.29411*7.41109 = 9.59076568
side = 8.5-7.41109 = 1.09
top = 11-9.59076 = 1.41
Pingback: What Makes a Beautiful Report: Layout | Windward
James, it’s been a while since you’ve posted this blog entry (8 years!), but I hope you’ll see this response. I noodled on your work and produced this — https://dribbble.com/shots/3512411-Single-Page-Canon — and extended it with this, adding marginalia and column and grid divisions — https://dribbble.com/shots/4339492-Single-Page-Canon-construction-and-subdivision
Do you have any further developments? I think it’s valuable to continue this line of research. If you have a newer home on the web, leave some breadcrumbs? Cheers!
https://hd1080film.ru/609-la-la-lend-2016.html – Как приручить дракона 3 (2019) смотреть онлайн в хорошем качестве hd 1080, Моана 2016 смотреть онлайн бесплатно в хорошем качестве hd 1080
Pingback: Research Task: The Golden Section