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
Treesaver.js - JavaScript library for creating magazine style layouts
21–30 of 41 posts
Re: Treesaver.js - JavaScript library for creating magazine style layouts
#22Re: Treesaver.js - JavaScript library for creating magazine style layouts
#23Nicely done. It renders beautifully on my Android. Smooth animation to boot, and it's not even version 1.
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
#24https://github.com/Treesaver/treesaver/blob/master/src/ui/ar...
Re: Treesaver.js - JavaScript library for creating magazine style layouts
#25Not bad, I like how the pages responded to two finger swipes on my Mac trackpad - I did it without thinking and it worked!
Re: Treesaver.js - JavaScript library for creating magazine style layouts
#26Playing with the walkthrough, I'm amazed with the performance on my aging iPhone3G.
Re: Treesaver.js - JavaScript library for creating magazine style layouts
#27A 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
#28Re: Treesaver.js - JavaScript library for creating magazine style layouts
#29Re: Treesaver.js - JavaScript library for creating magazine style layouts
#30Nice 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.
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).