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

Bobby Mozumder wrote:

 > Meanwhile the display:inline-block paged example i have is at:  http://engine.futureclaw.com/page_test.html
 >
 > Right now there’s a few inline-block pages, with a cover page, a
 > category description page, a category list page, and an article
 > page. Each page is accessible by swiping right. Eventually there
 > will be all sorts of page types, like ad pages, comment pages,
 > etc.. all from the same URL, sorta like all the section DIVs on
 > content pages.

Right.

 > The article page is really long, and somehow needs to be split into
 > several subpages. Ideally I would like to figure out some kind of
 > paging system that does that. I could split the article content
 > manually to divide up the pages, but that doesn’t seem
 > DOM/SEO/newsreader/semantic friendly? But since magazines tend to
 > have unique page layouts, that might be the ultimate choice.

I think auto-pagination is the way forward. Here's a demo of Opera
running in paged mode on a tablet:

  http://www.youtube.com/watch?v=wUxIyLjqAGQ

  (the demo starts around 6:30 into the interview)

By having the browser automatically split pages, we can support a wide
range of devices with little work on the authoring side. We can still
support special formatting for the first page, second page,
every-third-page etc. to give a rich visual experience, but I don't
believe having page breaks in fixed places is what designers care most
about. 

If you want fixed lines and pages, PDF is a better format than HTML/CSS.

 > Another issue is floating page insertions. We might need to make a
 > DIV it’s own page, and something like a “.ad_page {display:page;
 > float-page: 3}” for me to insert an ad page somewhere after the 3rd
 > page (or near the beginning/near the end/after
 > table-of-contents/put makeup ad right before beauty section/back
 > cover/etc..) These are the kind of issues real magazines face when
 > they insert ad pages according to their advertiser wishes.

Yes, this is what 'float-defer-page' was created for. You can e.g. say:

  div.ad { float-defer-page: 2 } 

  http://figures.spec.whatwg.org/#float-defer-page

to make it the ad appear on the its natural page + 2.

 > Also in the test page there aren’t images in it yet, but when it
 > comes the article will have a whole gallery of photos, in the
 > middle of it, covering 10 or so pages on its own, some full bleed,
 > some 2-page spreads (if that’s possible on a double-width display),
 > and so on. The obvious solution would be to place the gallery
 > images inline with the article text, but that also doesn’t seem
 > very semantically correct? Semantically I would like article text
 > within a <MAIN> and the photo spread in an <ASIDE> and floated to
 > their own pages. So you might need to add some type of
 > “float-pages: center” support as well.. (A lot of books have center
 > photo plates.)

I don't think there is anything wrong in having images/figures inside articles, like:

  <article>
    ...
    <figure>...</figure>
    ...
    <figure>...</figure>
    ...
  </article>

If you want the figures to start ona a new page, you could say:

   figure { break-before: page }

Or, if you want to avoid page breaks (which often cause empty white
page on the preceding page), you can float the figure to the top of
the page:

   figure {
     float: top;
     clear: page;
   }

The above code also clears the page, to ensure that there is no other content above it:

  http://figures.spec.whatwg.org/#clearing-page-floats

Finally, if you want the figure to be alone on a page, you can say:

  figure {
    float: top;
    margin-bottom: auto;
  }

  http://figures.spec.whatwg.org/#avoiding-content-after-page-floats


 > Anyways hope to get these paged-media CSS implemented sooner rather
 > than later across browsers. 

Indeed!

 > Our current site is 4 years old and we
 > tried to get it to do something similar back then in HTML/CSS, as
 > the iPad made it obvious paged media is the way to go for
 > usability. Recently a lot of sites implemented full page-width
 > content articles, instead of the typical 3 columns, but they still
 > scroll vertically. Eventually they’re going to want to go
 > horizontally paged.

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Friday, 1 August 2014 08:44:15 UTC