Paged Overflow

Overview

Using the rules and browser support detailed below, overflowed content can be displayed as virtual pages in the browser.

CSS Support

New values for overflow-x and overflow-y:

Attribute Description
-o-paged-x handle overflow by creating pages in the horizontal direction
-o-paged-y handle overflow by creating pages in the vertical direction
-o-paged-x-controls handle overflow by creating pages in the horizontal direction (show page navigation UI)
-o-paged-y-controls handle overflow by creating pages in the vertical direction (show page navigation UI)

If the specified value of overflow-x and overflow-y differ and at least one of them has one of the four above values, it will be treated that as a conflict, and resolved according to the following rules:

  1. If one of the properties has -o-paged-x-controls, set the computed value of the other property to that as well.
  2. Otherwise, if one of the properties has -o-paged-x, set the computed value of the other property to that as well.
  3. Otherwise, if one of the properties has -o-paged-y-controls, set the computed value of the other property to that as well.
  4. Otherwise, one of the properties has -o-paged-y. Set the computed value of the other property to that as well.

Note:

@page

If the viewport establishes a paged container (i.e. if paged overflow is set on root or BODY), the @page rule is honored. Margins can be specified with the margin-top, margin-right, margin-bottom and margin-left properties (or the margin shorthand property), and define the margins between the page box and the page area. See: Paged media for more information.

The size of the page area can also be controlled with the width, height, min-width, max-width, min-height, and max-height properties. Percentages are with respect to the viewport size. The em and ex units are not allowed.

The margin* properties may take the value auto.

Values are resolved as specified in CSS 2.1 chapter 10.3.3 (Block-level, non-replaced elements in normal flow). For vertical dimensions, margin-bottom will be the value dropped if the equation is over-constrained.

Floats

New float values

The float property now takes the following additional values:

Using any of these values will make the float a GCPM float (or a column/page-attached float) instead of a regular CSS 2.1 float. This means that it won't live in a block formatting context, like normal CSS 2.1 floats, but rather live in a multicol or paged container.

More information on the new float values
Vertical Alignment (required)
Vertical alignment is expressed with -o-top or -o-bottom (e.g. -o-top or -o-top-corner-next-page). The value starts with this mandatory vertical alignment string, and is followed by the other components, if any.
Far Horizontal Corner Aligned (optional)
To put a float in the far horizontal corner, "-corner" needs to be part of the value (e.g. -o-bottom-corner). This will move the float to the far horizontal corner of the multicol container (the right corner in LTR writing mode and the left corner in RTL writing mode). The "-corner" string is put right after the vertical alignment string.
Next Page (optional)
To force a float to be put on the next page, "-next-page" needs to be part of the value (e.g. -o-top-next-page). The "-next-page" string is put after the "-corner" string, if any; otherwise it's put after the vertical alignment string.

Generated Content for Paged Media (GCPM) Float Rules

Note: The following terms are used below:

  1. A GCPM float must be defined inside a multi-pane container somewhere; otherwise it will not be a GCPM float, and it will only obey the value of the -o-float-horizontal property.
  2. A GCPM float be positioned in the pane it is defined in source-wise (the current pane), or in a later pane. It may not be positioned in an earlier pane than the pane it is defined in.
  3. If there is not enough space for the float in the current pane (the one it's defined in) when processing the float, it will be moved to the next pane, rather than reducing the amount of in-flow content already in the pane.
  4. If there is already a top/bottom float in the pane when a second top/bottom float is to be placed there as well, the second float will be positioned below/above the previous float.
  5. A GCPM float's margin box may not overlap with another GCPM float's margin box or pane content.
  6. A GCPM float's margins will not collapse with anything.
  7. A GCPM float establishes a new block formatting context.
  8. A GCPM float may not interact with previous run-in siblings.
  9. The top/bottom margin edge of a top/bottom aligned GCPM float may not be above/below the top/bottom edge of the pane in which it is positioned.
  10. A top/bottom aligned GCPM float that has another top/bottom GCPM float above/below it may not have its bottom/top margin edge below/above the bottom/top edge of the pane in which it is positioned.
  11. A GCPM float must be defined inside a container - the container may well be the same as the one established by the multi-pane container. This means that it may not be a child of (e.g.) a table-row box.
  12. A GCPM float may not be defined inside an inner block formatting context different from the one established by the multi-pane container. This means that it may not be defined inside e.g. a table-cell in a table in a multi-pane container.
  13. Column rules are not drawn in the column gap parts that are covered by the margin box of a column-spanned float. If a GCPM float spans multiple columns, and column rules are enabled, the rules will not be drawn in areas occupied by the GCPM float.

New column-span value

column-span: -o-integer(<integer>) (where <integer> is a positive integer). This value only applies to GCPM floats, and specifies how many columns to use as the float's containing block.

@media

New media feature:
("@media (-o-paged) {}"):
  • Allowed values: 0 (feature not present), 1 (feature present).
  • The feature will be present in all products that support paged overflow.

DOM support

Element Properties

There are two element properties that are useful for paged containers:

  1. currentPage (read / write):
    • The current page being displayed.
    • 0 is the first page, 1 is the second page and so on.
    • This value is 0 if the element is not a paged container (but see below for root and BODY elements).
  2. pageCount (read-only):
    • The total number of pages in the document.
    • This value is 1 if the element is not a paged container (but see below for root and BODY elements).

Events

When the current page changes, or when the total number of pages changes, a PageChangeEvent event (onpagechange) is fired. It has two properties, exactly the same as the two element properties mentioned above (only that both are read-only). The event is fired *after* the page change action and is not cancelable.

If the overflow:-o-paged* property has been applied to the viewport (because it was specified on root or BODY), using currentPage or pageCount properties with the root or HTML nodes will apply to the viewport's paged container. PageChangeEvent will in such cases be fired on both BODY and root, first BODY, then root.

Scroll events are also fired, when the user grabs a page and drags it, and when the current page number changes. If the page change is animated, a scroll event is fired for each animation frame. See CSSOM-View notes below for scroll values.

CSSOM - View

offsetLeft and offsetTop
offsetLeft and offsetTop on content inside of a paged container will give the leftmost and topmost coordinate of the element, relative to the top/left corner of the first page. This also holds if the element lives on multiple pages.
For example: content that starts on the third page will have its offsetLeft offset by the width of two pages if pagination is horizontal, or its offsetTop offset by the height of two pages if pagination is vertical.
offsetWidth
offsetWidth on content inside of a paged container will give the distance between the rightmost and the leftmost coordinates of the element, and offsetHeight will give the distance between the bottommost and topmost coordinates.
scrollLeft and scrollTop
scrollLeft and scrollTop will give the leftmost and topmost coordinate on the current page, relative to the top/left of the first page. Setting them will go to the highest page number that has a top/left value lower than or equal to the value set. Setting scrollLeft only has an effect in horizontal pagination, and setting scrollTop only has an effect in vertical pagination.
scrollWidth and scrollHeight
scrollWidth and scrollHeight will give the "scrollable" padding area. For horizontal pagination, scrollWidth will be page width multiplied by the number of pages and scrollHeight will be the page height. For vertical pagination, scrollWidth will be the page width and scrollHeight will be the page height multiplied with the number of pages.
window.scrollBy() and window.scrollTo()
window.scrollBy() and window.scrollTo() will work similarly to setting scrollLeft and scrollTop. This is also true for the window properties pageXOffset, scrollX, pageYOffset and scrollY.

Documentation

Opera Help

Need help? Hit F1 anytime while using Opera to access our online help files, or go here.