[css3-page] Idea for simplier page-margin boxes

Reading the current dev spec at [1] about page-margin boxes I dislike that

1) the defined boxes are inflexible in the positioning on the page
2) defining the content is limited to using the "content" property of CSS

In my use case, I want to

a) have some graphics that take up the entire background of the page box
b) put a image and some text with different fonts/styles in the same 
page-margin box

to me this seems only hard to be achievable with the current page-margin 
box spec.

Defining content like in a) and b) can be done very well using HTML. 
Therefore, how about defining a new "position: pagebox" value for the 
"position" css rule. If this rule is used, the element is positioned as 
"position: absolute" relative to the page box. The maximum width and 
height of the element is set to the size of the page box.

Returning to the use case from above, this maps in this proposal as:

a)
   <!-- Set a background image that spans the entire page box -->
   <img id="pageBackground" src='background.png' style="position: 
pagebox; left: 0; right: 0; top: 0; bottom: 0">

b)
   <!-- Put the companies logo and some text in the header -->
   <div id="pageHeader" "position: pagebox; left: 2cm; top: 1cm">
     <img src="company-logo.png><br>
     <span style="font-weight: bold">Slogan: </span> <span 
style="font-style:italic">since 1989</span>
   </div>

To show only some elements with "position: pagebox" on certain pages, 
CSS selectors like this could be used:

   /* Hide the pageBackground by default */
   #pageBackground { visibility: hidden; }

   @page firstPage { }

   #firstPageContent {
     page: firstPage;
page-break-after: always;
   }

   /* Show the pageBackground only on the page named "firstPage" */
   @page[firstPage] #pageBackground { visibility: visible; }

Note that the matching "@page[firstPage]" is new syntax.

The HTML going with this could look like this:

   <!--Some content for the first page -->
   <div id="firstPageContent">...</div>

   <!-- Set a background image that spans the entire page box -->
   <img id="pageBackground" src='background.png' style="position: 
pagebox; left: 0; right: 0; top: 0; bottom: 0">

What do you think about this idea?

Very best,

Julian

[1]: http://dev.w3.org/csswg/css3-page/#margin-boxes

Received on Monday, 4 March 2013 14:30:33 UTC