XP Mail Archive: XP> FW: [css3-page] top/bottom margin boxes

XP> FW: [css3-page] top/bottom margin boxes as containing boxes

From: BIGELOW,JIM (HP-Boise,ex1) (jim.bigelow@hp.com)
Date: Tue Sep 16 2003 - 12:21:17 EDT

  • Next message: elliott.bradshaw@zoran.com: "Re: XP> CSS3 Page Media update published: FW: W3C Member Newsletter, Volu me 9, No. 9: 12 September 2003"

    Hello,

    The attached was posted to www-style@w3.org and cross-post here for your
    reading pleasure, comments and discussions.

    Jim

    -----Original Message-----
    From: BIGELOW,JIM (HP-Boise,ex1) [mailto:jim.bigelow@hp.com]
    Sent: Monday, September 15, 2003 3:12 PM
    To: www-style@w3.org
    Subject: [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



    This archive was generated by hypermail 2b29 : Tue Sep 16 2003 - 12:21:41 EDT