No replies
Boxersoft
Offline
newbie
Last seen: 11 years 38 weeks ago
Timezone: GMT+1
Joined: 2009-07-20
Posts: 5
Points: 5

I'm trying to use page-break-* to control page break positioning when a dynamically-generated HTML page is printed.

The page contains details from several items, with a heading section per item followed by one or two tables of varying length. What I want to do is to prevent a page break occurring (a) inside the heading section and (b) immediately after a heading section (there should be at least one table row following a heading section; the table can continue after the page break).

Here's a cut-down example that demonstrates the problem:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">           
  <head>                        
    <title>Title                    
    </title>                        
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />                        
    <link href="print.css" rel="stylesheet" type="text/css" />           
  </head>           
  <body>            
    <div class='company'>                            
      <div class="info_section">                                        
        <div class="info owner">Owner: Owner 1                                
        </div>                                        
        <div class="info notes">Notes 1                                
        </div>                                                         
        <div class="info region">Region: Region 1                                
        </div>                                        
        <div class="info prefix">Prefix:                                         
          <span class="info prefix">Prefix 1                                        
          </span>                               
        </div>                                                         
        <div class="info verified">Last Verified:                                         
          <span class="verifiedDate">2011                                        
          </span>                               
        </div>                                        
        <div class="info arearep">Area Rep.: Owner 1's rep                                
        </div>                            
      </div>                                
      <table>                                            
        <thead>                                                        
          <tr>                                                                    
            <th>Column 1                                                
            </th>                                                                    
            <th>Column 2                                                
            </th>                                                                    
            <th>Column 3                                                
            </th>                                                        
          </tr>                                            
        </thead>                                                             
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                            
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                            
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                            
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                            
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                            
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                            
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                            
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                            
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                            
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>                                            
        </tr>                                
      </table>                                
      <table>                                            
        <thead>                                       
          <tr>                                                    
            <th>Column 1                                             
            </th>                                            
            <th>Column 2                                             
            </th>                                            
            <th>Column 3                                             
            </th>                                            
            <th>Column 4                                             
            </th>                              
          </tr>                                    
        </thead>                                     
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                                    
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>                                    
        </tr>                       
      </table>                        
    </div>                        
    <div class="company">           
      <div class='info_section'>                             
        <div class="info owner">Owner: Owner 2                              
        </div>                             
        <div class="info notes">Notes 2                              
        </div>                               
        <div class="info region">Region: Region 2                              
        </div>                             
        <div class="info prefix">Prefix:                               
          <span class="info prefix">Prefix 2                              
          </span>                             
        </div>                               
        <div class="info verified">Last Verified:                               
          <span class="verifiedDate">2011                              
          </span>                             
        </div>                             
        <div class="info arearep">Area Rep.: Owner 2's rep                              
        </div>                          
      </div>                            
      <table >                                
        <thead>                                    
          <tr>                                        
            <th>Column 1     
            </th>    
            <th>Column 2     
            </th>    
            <th>Column 3     
            </th>      
          </tr>        
        </thead>  
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>        
        </tr>        
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>        
        </tr>        
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td>        
        </tr>    
      </table>    
      <table>        
        <thead>      
          <tr>    
            <th>Column 1     
            </th>    
            <th>Column 2     
            </th>    
            <th>Column 3     
            </th>    
            <th>Column 4     
            </th>      
          </tr>        
        </thead>  
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>        
        </tr>        
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>        
        </tr>        
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>        
        </tr>        
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>        
        </tr>        
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>        
        </tr>        
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>        
        </tr>        
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>        
        </tr>        
        <tr><td>Col1 data</td><td>Col2 data</td><td>Col3 data</td><td>Col4 data</td>        
        </tr>    
      </table>      
    </div>     
  </body>
</html>

... and the css:

  /* Keep info items together */
  div.info
  {
    page-break-before: avoid;    
    font-size: 120%;
    font-weight: bold;    
  }                                          
 
  /* Avoid 'hanging' info section */
  div.info_section
  {
    page-break-after: avoid;
    margin-bottom: 1em;
  }                   
 
  table
  {
    margin-bottom: 0.5em;
  }             

Depending on browser, fonts, printer margins etc. it may be necessary to add or remove some table rows to one of the first tables in order to force the second info section into the page break area. I've tried I've tried FF4, Chrome 11 and IE8 and I can't get it to behave as I want with any of them, which leads me to think I may have completely misunderstood the way these properties are supposed to be used. Can anyone tell me how to get the desired behaviour?