Log in / Register

Forum › How do I...?

header inside border

shawnm
I am applying a border around each page in the @page rule. I also use the @top and @bottom margin boxes for a header and footer. The header and footer are displaying on the outside of the border, but the desired effect is to have the header and footer inside the border. How do I get them to appear on the inside of the border?

Thanks.
mikeday
Good question. Borders on @page apply to the page area, which does not include the margins, while margin boxes are in the margins, which is not in the page area. We may need to add an additional border property to @page to handle this situation.

One workaround may be to add left and right borders to the page, and left/right/top borders to the page header and left/right/bottom borders to the page footer. That should create a border that includes the page content and the page header and footer.
StoneCypher
A more appropriate fix would be to be to get @page { position: relative; } working. That way, a <div> could be placed inside the page, the border could be applied to it, the headers and footers could be left alone, and you wouldn't need to add false secondary border properties.

The page border properly surrounds /everything/. That includes the headers and the footers. Any border contained within should be on a logical contained element.

There is, of course, always the css3 frame property...

Nonetheless, getting page position working has several other nice side effects. One such effect which would be important for people with page-positioning issues - say, photo book makers or puzzle book maters - tables with page-break-after: always could be used to handle vertical centering at the same time.

John Haugeland is http://fullof.bs/

mikeday
Absolute positioning within the page already works, as the page area is the default positioning context.
StoneCypher
I am unable to find any variation on this theme which does what is expected. In theory, this should produce two tables, each filling their respective pages, with the six numbers spaced evenly both vertically and horizontally. I have tried assigning positioning and display models to the page, wrapping page contents in divs which are subsequently positioned, et cetera. With various magic I am able to eventually get the tables to fit the page horizontally. I have yet to discover a method to coax prince into vertical fill instead of vertical minimum height.

<DOCTYPE>
<html>

  <head>

    <style>

      @page table { height: 100%; width: 100%; }
      td { vertical-align: middle; text-align: center; }
      table { page-break-after: always; }

    </style>

  </head>


  <body>

    <table>
      <tr><td>1</td><td>2</td></tr>
      <tr><td>3</td><td>4</td></tr>
      <tr><td>5</td><td>6</td></tr>
    </table>

    <table>
      <tr><td>7</td><td>8</td></tr>
      <tr><td>9</td><td>10</td></tr>
      <tr><td>11</td><td>12</td></tr>
    </table>

  </body>

</html>

John Haugeland is http://fullof.bs/

StoneCypher
Argh. The classes got stripped. Reposting.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

  <head>

    <style type="text/css" media="screen,projection,print">

      @page table { height: 100%; width: 100%; }
      td { vertical-align: middle; text-align: center; }
      table { page-break-after: always; }

    </style>

  </head>


  <body>

    <table>
      <tr><td>1</td><td>2</td></tr>
      <tr><td>3</td><td>4</td></tr>
      <tr><td>5</td><td>6</td></tr>
    </table>

    <table>
      <tr><td>7</td><td>8</td></tr>
      <tr><td>9</td><td>10</td></tr>
      <tr><td>11</td><td>12</td></tr>
    </table>

  </body>

</html>

John Haugeland is http://fullof.bs/

mikeday
Select "Disable HTML in this post" if your attributes are getting eaten.
StoneCypher
Yeah, that's how I posted the second time. And all the others. Just a one-time miss. Anyway, do you see any method to make the above code possible? I'm attempting to use Prince to render my puzzle books, so this kind of layout is very valuable to me.

John Haugeland is http://fullof.bs/

mikeday 
@page table { height: 100%; width: 100%; }

This rule is meaningless, as it creates a named page called "table" which you don't refer to anywhere else using the page property. Also, the width and height properties don't apply to @page rules, you need to use the size property (eg. "size: A4" or "size: 100mm 150mm").

Try putting "width: 100%" on the table and "height: 5cm" on the table cells.
StoneCypher
You're right, the page rule I pasted is broken. I tried, however, putting the height:100% on the table directly; it continued to not work.

To manually set the height of the table cells means that I cannot rely on the layout engine to fit the page. The entire purpose of switching to PrinceXML is that I should want to rely on existing layout engines rather than one I would roll on the spot. The puzzles are of different sizes, and manually sizing the cells would require either that I manually weight the table layout, or that I set a universal size, which would waste physical space, thus increasing concommitant printing costs.

I would very much prefer it were I simply to be able to size the table to the height of its container, somehow; it would reduce my workload drastically. Is there really no method to do this under PrinceXML's implementation of the CSS printing module? I got it to work in Opera...

John Haugeland is http://fullof.bs/

mikeday
It is not possible to set the height of a table and have that height divided between the rows of that table. It works the other way around: the height of the table is determined by the height of the content within it. Have you considered using SVG perhaps instead?
StoneCypher
The table contains puzzles rendered in SVG. The purpose of the table is to handle the placement of the SVG items contained. Here is an example of HTML/CSS which performs the height behavior you suggest is impossible. This works in all six major browsers as far back as gen 4, and in Netscape as early as Netscape 3. Table height auto-sizing was one of the very first uniform and reliable mechanisms for page layout.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

  <head>

    <style type="text/css" media="screen,projection,print">
      table { width: 30em; height: 15em; border: 0.1em solid red; }
      caption { width: 29.9em; }
      td { width: 29.9em; }      
    </style>

  </head>


  <body>

    <table>
      <thead><caption>This will work in all major browsers.</caption></thead>
      <tbody>
        <tr><td>Sure</td></tr>
        <tr><td>it</td></tr>
        <tr><td>is</td></tr>
      </tbody>
    </table>

  </body>

</html>


Interestingly, this test code exposed another bug in PrinceXML's table layout engine. Prince seems to set the width of the caption according to the width of the first table column. The caption's width is supposed to bracket to the table head, which in turn should bracket to the table. You can see the ramifications of this bug by removing the two rules that set the widths of the caption and table cell. Those should all be defaulting to width fill under both the auto and fixed table layout algorithms.

http://www.w3.org/TR/CSS2/tables.html#width-layout

John Haugeland is http://fullof.bs/

mikeday
Thanks, we'll take a look at both issues for the next release of Prince.
apritchardEB
Hey, excuse me for necromancing such an old thread, but one of our DocRaptor customers is asking about borders around headers. I can't seem to find any updates on this subject.

Were there ever properties added to pages or headers to support this?

Thanks,
Alex
DocRaptor Support

EDIT: Sorry, customer was trying to apply border to the @page and not the inner @top page region. Please ignore :)

Edited by apritchardEB