The Secret Law of Page Harmony | Hacker News Reader

The Secret Law of Page Harmony

retinart.net

85 pointsbavidar15 comments

The first section of the manual for the LaTeX Memoir class used to be an extended essay on book design and not at all LaTeX specific. I'm not entirely sure why the author removed it, but here's a link[1][large PDF] to a version with the section intact. If you're looking for more extended look at the concepts in the OP, check it out.

[1]: http://wwwcdf.pd.infn.it/localdoc/memman.pdf

When I learnt about this in design school, I went ahead and created a quick and dirty web app that'd construct the canon for me, instead of having to draw a bunch of geometry on paper. Here are the links to [1] the app, [2] the blog post, and [3] the source code.

[1]: http://vandegraaf.azuretalon.com/ [2]: http://kswizz.com/post/3024765786/van-de-graaf [3]: https://github.com/kballenegger/Van-De-Graaf-Generator

I like how it comes out when there is writing in the margins or the in the magazine example, but for a pure textblock it just seems to be a huge amount of wasted space at the bottom of the page and even on the sides.

People often have a similar complaint when first seeing how LaTeX lays out a page. The truth is that both the white space and limited text expanse make the text much more readable.

After all, paper (and PDF) is cheap. It is better to maximise readability than paper-cost-per-word.

I agree that white space is important. But why have so much of it on the OUTER edges of the page, rather than in the inner margins. When you read a book the paper on the inner margins is typically curved, and thus the "effective white space" you see there is less than you could conclude from these flat illustrations.

I can see one reason which could have historic reasons. When you flip the pages with your hands, they will wear out more on the outer horizontal margins. If you make that margin wider there is less chance of corrupting the printed content. However that would not apply to online pages.

Also I don't understand why there should be more white space at the bottom than the top? Is it because people like to write notes on the page after they have read it, so writing them at the bottom of the page would seem more natural?

My guess is that it's because people are much more likely to hold a book by the bottom than by the top. Either because you want to avoid wear (as mentioned above) or because you don't want your reader's hand to be obscuring the text.

(Both of which also explain why the outer margins are larger than the inner margins.)

Footnotes.

For footnotes, to make space for the hands, because we slightly perceive vertically centered text as below center, because culturally we expect documents to start at the top of a page, and to reduce the degree the head or eyes must turn to look at the text.

Shameless plug - one of the reference articles was my blog piece on Canons of Layout. http://51elliot.blogspot.com/2009/12/canons-of-layout.html

Grid systems have really helped the layout issue since then, although none of the ones in current use seem to be based on the golden mean.

I like how your page reflows for different widths and full screen reading. Nice work!

edit: Sorry I think I'd accidentally clicked through to another page which did what I said above -http://roundedbygravity.com/colophon/

This is surreal! I'm a designer and I had a brainwave yesterday ”I wonder if I could apply classical page layout I learned for print design to web“ and my web history from yesterday included this very page!

I tried to implement some of this in CSS, but here are the issues I had with it:

- there aren't left and right pages on web, so margins should be equal. Classical page layout means that the left margin, right margin, and the gap between the two pages is equal.

- there's no comfortable way to control line length in a fluid responsive layout, unless you have really obvious breakpoints.

- because long documents aren't broken into pages, the bottom part of the page runs off the bottom of the screen so there's not even a concept of page length on web

I still have more thinking to do, and so far I think the site that has done this best so far is medium.com

Might have to implement in CSS to see what it could look like for a simple grid system.

http://roundedbygravity.com/colophon/

That's almost how twitter's web UI is setup

Reply on news.ycombinator.com