I'm making a dashboard using SVG-based charts. When I print the page, the charts move around to prevent page breaks from happening within them. This is undesirable and breaks my layout but I cannot figure out what is causing it.
Example:
Result: 2 full boxes per page with uneven margins
Expected: 2.5ish boxes per page with even margins
Any help would be greatly appreciated
EDIT: Here is a gallery of what I'm talking about. Apparently this issue does not affect all browsers/Operating systems?
It's not possible.
According to http://www.w3.org/TR/CSS2/page.html#allowed-page-breaks, these are the only cases in which an element can break between pages:
In the normal flow, page breaks can occur at the following places:
- In the vertical margin between block-level boxes. When an unforced page break occurs here, the used values of the relevant 'margin-top' and 'margin-bottom' properties are set to '0'. When a forced page break occurs here, the used value of the relevant 'margin-bottom' property is set to '0'; the relevant 'margin-top' used value may either be set to '0' or retained.
- Between line boxes inside a block container box.
- Between the content edge of a block container box and the outer edges of its child content (margin edges of block-level children or line box edges for inline-level children) if there is a (non-zero) gap between them.
You want (2), and you are getting (1).
The problem is that <svg> elements are replaced content.
And according to http://www.w3.org/TR/CSS2/visuren.html#block-boxes, replaced elements aren't block container boxes:
Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box.
That means that <svg> doesn't fulfill (2), so you can't get what you want.
