W3C home > Mailing lists > Public > public-html@w3.org > August 2007

Re: Re[3]: <pages> <page>...<page> </pages>

From: Charles McCathieNevile <chaals@opera.com>
Date: Mon, 27 Aug 2007 16:03:12 +0200
To: "Dmitry Turin" <html60@narod.ru>, public-html@w3.org
Message-ID: <op.txp1bm0lwxe0ny@pc052.coreteam.oslo.opera.com>
On Mon, 27 Aug 2007 06:31:57 +0200, Dmitry Turin <html60@narod.ru> wrote:

> DT> Let's compare:
>
> DT> please, re-write my example (with <input ...>)
>
> DT> by "Opera presentation media style" and send to here !!
>
> Could you re-write ?

Attached. If you view with Opera in full-screen mode, the projection media  
applies, and is paged.

The magic is the line

  .slide { page-break-after:always }

which makes each object with class="slide" a seperate page. But you can  
for example do something like

  h1 { page-break-before: always }
  #f { page-break-before: ignore }

(the second line is to avoid a blank page before the first h1 by giving it  
id="f") and then you get a new page with every h1.

A super-simplified version:

<html>
  <head>
   <title>Blank page</title>
   <style type="text/css">
    @media projection {
      .slide {page-break-after:always}
    }
   </style>
  </head>
  <body>
   <div class="slide">
    <h1>Text input</h1>
    <input type="text">
    <p>You could have more stuff here, of course</p>
   </div>

   <div class="slide">
    <h1>No input here</h1>
    <p>Actually, nothing to see here. Move along</p>
   </div>

   <div>
    <h1>A date input</h1>
    <input type="date">
    <p>Just because I like some things in Web Forms 2</p>
   </div>
  </body>
</html>

> P.S.
>
> BB>> Opera Show ...
>
> DT> Opare is not all browsers, isn't it?

No, but it is the one that allows you to test paged media. If you went to  
the page Bert mentioned and use Opera, you would discover that it allows  
paging, and even different style to be applied in page mode.

Currently CSS doesn't have a paged mode available in general, it sets  
certain media types as paged. But changing that is easiest and clearest in  
CSS.

> BB>> is an example:
> BB>> http://www.opera.com/support/tutorials/operashow/
>
> DT> (1) I don't find _working_ document!
> DT> (2) As it follows from samples, this is __artificial__ way.

No, I use it regularly for presentations. As in, I have written a page  
like this about every two weeks for the last few years. So do other people.

cheers

Chaals

-- 
   Charles McCathieNevile, Opera Software: Standards Group
   hablo español  -  je parle français  -  jeg lærer norsk
chaals@opera.com    Catch up: Speed Dial   http://opera.com


Received on Monday, 27 August 2007 14:03:25 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 9 May 2012 00:16:04 GMT