Live data from Hacker News

Treesaver.js - JavaScript library for creating magazine style layouts

treesaverjs.com

21–30 of 41 posts

Re: Treesaver.js - JavaScript library for creating magazine style layouts

#21
Thanks all, author here (along w/ bramstein). The documentation and site aren't quite ready yet, but we're getting there.

If you're curious to see how to use the framework, your best bet is to start with this tutorial we're working on: https://github.com/Treesaver/treesaver/wiki/Walkthrough

Re: Treesaver.js - JavaScript library for creating magazine style layouts

#23
post #3

Nicely done. It renders beautifully on my Android. Smooth animation to boot, and it's not even version 1.

Actually it runs better on my android than in stock Chrome on a reasonable powerful workstation.

I get flicker, slow response and no visible animation between pages in Chrome. Seeing this I expected the worst when trying it on my phone, but there it actually runs quite fine.

Re: Treesaver.js - JavaScript library for creating magazine style layouts

#27
Nice work so far, but from the demos it's missing an important layout feature commonly seen in magazines. Spanning an image or text insert half way between two columns and having the text of the columns flow around it.

A quick example I found in a google image search: http://irenevilar.com/images/uploads/elle_p1.jpg

If that could be incorporated then instant win.

Re: Treesaver.js - JavaScript library for creating magazine style layouts

#28
I love great layout and I think this is impressively done. However, shuffling through pages somehow felt like more work to me than scrolling the same type of content on a webpage. I think that's because you can't really accelerate to skim. Am I alone in that thinking?

Re: Treesaver.js - JavaScript library for creating magazine style layouts

#30

Nice work so far, but from the demos it's missing an important layout feature commonly seen in magazines. Spanning an image or text insert half way between two columns and having the text of the columns flow around it. A quick example I found in a google image search: http://irenevilar.com/images/uploads/elle_p1.jpg If that could be incorporated then instant win.

I would love to support this, but we don't right now due to performance reasons.

Dirty laundry: Each paragraph is laid out and measured only once (at a specific column width), then the metrics are all cached. Layout is then performed by dumping paragraphs into each column and just clipping whatever overflows.

The advantage is that this process is very fast, even on a mobile device. Try resizing a window and notice how quick the re-layout is.

The downside is that certain layouts are not possible right now, such as the example you've shown.

As browsers get faster, we'd like to start doing our own line layout, which would let us do far more here (with a performance penalty, unfortunately).

Post reply on HN