Paginated views, print preview and printing.

(I am not sure if these topics are subjects of discussion in this WG
so my pardon in advance if not.)

While everything is moving these days to paper-less technologies need for
HTML/CSS printing is still actual. If not exactly for printing then
for applications that use paginated
form of presenting HTML documents. Mobile book readers for example.

Here is a brief explanation of so called "pager" mechanism that I use
in Sciter engine [1].

In my case the pager implementation is attached to <frame type=pager>
element (or <iframe>)
as it hosts loadable document being viewed in paginated view - pretty much
in the same way as normal <frame>/<iframe>.

Here is an example of how <frame type=pager> may look like:
http://terrainformatica.com/w3/sciter-pager.png
(box with gradient background with two page boxes in it).

Page boxes are plain div elements in shadow DOM with special role assigned.
So that view is styleable by standard CSS means.

Such pager frame among others accepts these two attributes:

  src="url" - standard @src - url of document being paginated.
  page-template="url"  - url of so called page-template document.

page-template is normal html document with one requirement:
it shall contain block element with id=content-box.

When rendering each page the pager renders first that page-template
document and then fragment of paginated document inside box established
by the #content-box element.

Here is an illustration of such 2-levels document/view relationship:
http://www.terrainformatica.com/wp-content/uploads/2010/02/print-preview-schema.png

Usually the page-template contains various elements other than #content-box.
For example it may contain page header/footer with page number field, etc.
Layout and style of page-template is defined by standard CSS means. Separately
for odd/even pages or even pages with particular number. See screenshot above.

Paginated functionality is accessible from script so functionality
like "total-on-the-page"
and the alike is easily implementable.

The pager implementation allows to customize page layout like margins,
paper size, etc.
interactively and solely from client side.

PS: Initially I planned to implement http://www.w3.org/TR/css3-page/ spec but
found it very limiting for requirements I had at that moment -
customizeable printing
of financial and legal HTML documents. So I came up with the pager.

PSS: I also have experimental implementation of contenteditable
functionality combined
with such pager mechanism to provide editing of paginated documents.

[1] The Sciter: http://www.terrainformatica.com/sciter/

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Wednesday, 6 March 2013 07:45:17 UTC