[css3-page] top/bottom margin boxes as containing boxes

Hi,

I've already heard some comments about the new top and bottom margin boxes,
i.e., the boxes defines by @top-left, @top-center, @top-right, @bottom-left,
@bottom-center, @bottom-right, as well as the left and right corner boxes
(@top-left-corner, etc.).

These boxes are meant to define the maximum width and height for boxes
within them so that they are the containing block for the content in the
header/footer area in the margins.  

For example, say we want each printed page to have the title of the document
and the page number left and right aligned, respectively, in a running
header and the document's date centered in the running footer. This could be
done as follows:

@page {
  size: 8.5in 11in;
  margin: 1in;
  counter-increment: page;
  @top-left { content: "An Example Document Title"}
  @top-right{ content: "Page " counter(page)}
  @bottom-center { content: "15 September 2003" }
}

The top-left-corner, top-right-corner, bottom-left-corner and
bottom-right-corner boxes are empty, so nothing will be printed in the 1in
square area at the corners of each page.

The top-center box is empty, so the top-left and top-right boxes share the
6.5 inch wide, 1 inch height area at the top of the page. 

According to the table in Section 4.3 [1] of the CSS3 module: Paged Media
[2] the content is vertically aligned in the middle of the margin, about
.5in from the top of the page.  Some ambiguity exists as to whether the
baseline is .5in from the top of the center of the box containing "An
Example Document Title" is .5in, since the spec doesn't say.

Referring to the table in Section 4.3[1] again we see that top-left is left
aligned and top-right is right aligned. 

What is not clear is if the boxes that contains "An Example Document Title"
and "Page 1" expand to fill the entire margin or not.  If the border and
margin are set for the boxes as shown below, what would result?

  @top-left { 
	padding: 0.125in;
	border-bottom: solid black 2px;
	content: "An Example Document Title"
  }
  @top-right{ 
	padding: 0.125in;
	border-bottom: solid black 2px;
	content: "Page " counter(page)
  }

In the bottom margin area, only the bottom-center has content, so it can
fill to contain the area between the left and right margins. The table is
Section 4.3 [1] says that the content is vertically and horizontally
centered in the footer.

  @bottom-center { 
	padding: 0.125in;
	border-top: solid black 2px;
	content: "15 September 2003" 
  }

Questions
----------
Do the borders of the top-left and top-right touch, forming a line from the
left-margin to the right margin along the top margin, or do the boxes shrink
to tightly contain the text, leaving a gap between the lines?  If it is the
later, how could you get a rule across the bottom of the header?

A similar question exists for the boxes in the footer: what are the extents?


Tentative Answer
----------------
I think that the content boxes expand to fill the available area.  This
allows you to join backgrounds and borders when the margin is set of zero
and give the appearance of a contiguous header/foot. If the margin is
greater than zero, then the page's background would be visible in the
margins between the boxes.


Comments, anyone?

Jim

[1]
http://www.w3.org/Style/Group/css3-src/css3-page/Overview.html#margin-text-a
lignment
[2] http://www.w3.org/Style/Group/css3-src/css3-page/Overview.html

Received on Monday, 15 September 2003 18:12:10 UTC