StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Based on the screenshots and theories in <a href="http://corgitoergosum.net/2011/03/06/replicating-flipboard-part-iii-how-flipboard-lays-out-content/" rel="nofollow noreferrer">the blog post linked to by Jason Moore</a> in <a href="https://stackoverflow.com/questions/6265995/flipboards-layout-algorithm/6393263#6393263">his answer</a>, I would say that there are ten-or-so predefined block sizes into which content is placed. What size box a piece of content is placed in is based on various different parameters — something that many people retweet or like may be considered higher priority and therefore get a larger box, and items with pictures, videos or lots of text may also be prioritized. These boxes (preferably with well thought-out sizes) are then packed optimally on the pages (though this is not a simple problem, and even Flipbook seems to fail as evidenced by the strange whitespace in the <a href="http://www.corgitoergosum.net/wp/wp-content/uploads/2011/03/flipboard_facebook_layout2.png" rel="nofollow noreferrer">second render of the Facebook stream</a> from the previously linked blog post).</p> <p>From the looks of the <a href="http://www.corgitoergosum.net/wp/wp-content/uploads/2011/03/flipboard_facebook_layout.png" rel="nofollow noreferrer">rendered Facebook feed</a>, Flipbook has (at least) the following predefined box sizes (width and height given as percentage of full width/height):</p> <pre><code>Designation | Width | Height | Example --------------------------------------------------------------- full page | 100% | 100% | #12 2/3 page | 100% | 67% | #1 1/3 note | 50% | 33% | #3, #11 1/9 quote | 50% | 11% | #2, #8, #10, #15, #17, #18, #22 1/2 note | 50% | 50% | #16, #19 2/3 note | 50% | 67% | ? </code></pre> <p>Some of these have fairly obvious grouping patterns (1/9 quotes are always stacked three at a time to form a block the same size of a 1/3 note, for example), while others can be more freely packed. Similar analysis of the <a href="http://www.corgitoergosum.net/wp/wp-content/uploads/2011/03/flipboard_twitter_layout.png" rel="nofollow noreferrer">rendered Twitter feed</a> show some additional boxes.</p> <h3>Summary</h3> <p>So, in summary the algorithm appears to be fairly simple. Start with a couple of predefined (sensibly selected) box sizes. When new feeds are rendered, do the following:</p> <ol> <li>Assign each item a box whose size depends on certain properties such as popularity, wether it contains images, etc.</li> <li>Pack the boxes optimally (this is in essence the <a href="http://en.wikipedia.org/wiki/Bin_packing_problem" rel="nofollow noreferrer">bin packing problem</a>, an NP-hard problem for which there appears to be no efficient algorithms; a greedy approximation algorithm would do fine)</li> </ol> <p>Emphasis here should be put on step 1, as well as on crafting the predefined boxes.</p> <p><strong>To clarify:</strong> The predefined box sizes I talk about here are defined for the <em>portrait</em> orientation. For landscape, a different set of box sizes would be used as evidenced by <a href="https://i.stack.imgur.com/LKDCf.jpg" rel="nofollow noreferrer">the picture in the question</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload