Re: [css-figures][css-multicol][css-overflow] Ten CSS One-Liners to Replace Native Apps

On Jul 24, 2014, at 10:27 AM, Sylvain Galineau <galineau@adobe.com> wrote:

> 
> On Jul 24, 2014, at 4:58 AM, Håkon Wium Lie <howcome@opera.com> wrote:
>> 
>> 
>> In my mind, the page has been the unit. So, when the user goes "next"
>> (by tapping, or making a swiping gesture, perhaps), the current page
>> disappears and a new page appears (perhaps with some stylable page
>> transition in between). However, there are situations when it makes
>> sense to page/scroll/pan smaller unites. You mention images: if the
>> screen is wide enough to show two images, it would make sense to
>> page/scroll/pan half a screenful. Likewise, if an e-book uses two
>> columns to display some text, it would make sense to page/scroll/pan
>> one column at a time.
> 
> Yes. Ultimately, the author needs control as to how much goes into a page.
> (And that page may not be full screen)
> 

Manually inserted breakpoints in the content should be used to determine page breaks. It really isn’t optimal when auto-generated, since authors tend to group content into pages/spreads/sections anyways.  Auto-breaking only works for single flows of text, like a book. In a magazine layout, some pages might overflow vertically before going over the the next page, which is fine.

Also the pages need their own templates.  It’s not enough to just flow content over to the next page.  Each page likely would have it’s own margins/headers/footers/column layouts/logos/page #/section#, etc.  Magazine layouts don’t like having their page layouts repeated, it becomes boring and tedious.

For example, the initial page might need a unique template with lots of white space around lead paragraph and a cover photo before breaking to the next page.  

The 2nd/3rd/etc.. pages might have be just a full width multicolumn text, with smaller top margin and footer logos.  

The final page might need it’s own template as well, with a big lower margin and separate appendix.

There might be intermediate photo spreads, some full bleed, some with margins.

I do fully support paged layouts, with swipe-left/right. While scrolling is great for short text, paged media works better for long-form articles. It also works great for photo galleries, which is why you see a lot of photographer portfolio websites use horizontal scrolling, as there’s a natural tendency to scan horizontally.

But it won’t work without more layout control.  I really think something like the new <TEMPLATE> tag should be used to define page templates for overflow:paged.  This would be similar to inDesign’s page templates, and having the browser add these pages as needed when content overflows.

Meanwhile, I have an example design based on inline-blocks, instead of overflow: paged-x.  There are also lots of real-world example magazine layouts to peruse on issuu.com, as well as creative page layouts on polyvore.com.

Thanks for your time!

-bobby
---
Bobby Mozumder
Editor-in-Chief
FutureClaw Magazine
mozumder@futureclaw.com
1-240-745-5287
www.futureclaw.com
www.twitter.com/futureclaw