Log in / Register

Forum › How do I...?

Running sidebar with static and string-set elements?

JohnClarke
In essence, I want to make a sidebar that takes the place of the traditional header. I'd like to have the typical header elements: page numbers, string-set values, static text, and images in the sidebar. I can create a header beautifully with the @page-top attributes, but I got stuck trying to mimick the same thing with a sidebar.

This is what I have so far. It repeats but not with the dynamic content (page counter).

<html>
<head>
<style>
@page { 
        margin-left: 0in;

    @top {
	content: flow(header);
    }
}

#header {
  float: left;
  clear: left;
  margin: -0.75in 0.2in 0in -1.25in;
  width: 2.0in;
  font-size: 10px;
  font-style: normal;
  color: gray;
  text-indent: 0em;
  padding: 0.5em;
  text-align: right;
  page-break-inside: avoid;
  border-right: 0.5px solid gray;
  height: 10.25in;
  prince-flow: static(header);       /* use the header flow as content */
}

#line1 { font-weight: bold }
#line2 { font-style: italic }
#line3 { font-size: 24px; text-align: center }
div.chapter { page-break-before: always; margin-left: 2.5in; }
div.chapter { string-set: headers content(); }
#pagenumber { content: counter(page); }
</style>

</head>

<body>
<div id="header">
<div id="line1">This is the first line of the header (bold)</div>
<div id="line2">This is the second line of the header (italic)</div>
<div id="line3">This is the third line of the header (big, centered)</div>
<div id="pagenumber"></div>
</div>

<div class="chapter">First chapter of the document.</div>
<div class="chapter">Second chapter of the document.</div> 
</body>
</html>


Any suggestions?

John Clarke
Cornerstone Systems Northwest Inc.

xuehong
I have made some changes to your code. See if it gives what you want:
<html>
<head>
<style>
@page {
    margin-left: 2.5in;
    border-left: solid 0.5px grey;
    @top-left-corner {
        content: flow(header);
    }
    @bottom-left-corner {
        content: "Page " counter(page) " of " counter(pages);
    }
    @top {
        content: string(headers);
        border-left: solid 0.5px grey;
    }
    @bottom {
        content: "Footer!";
        border-left: solid 0.5px grey;
    }
}
#header {
  /*float: left;
  clear: left;
  margin: -0.75in 0.2in 0in -1.25in;*/
  width: 2.0in;
  font-size: 10px;
  font-style: normal;
  color: gray;
  text-indent: 0em;
  padding: 0.5em;
  text-align: right;
  /*page-break-inside: avoid;
  border-right: 0.5px solid gray;
  height: 10.25in;*/
  prince-flow: static(header);       /* use the header flow as content */
}
#line1 { font-weight: bold }
#line2 { font-style: italic }
#line3 { font-size: 24px; text-align: center }
div.chapter { page-break-before: always; margin-left: 2.5in; }
div.chapter { string-set: headers content(); }
/*#pagenumber { content: counter(page); }*/
</style>
</head>

<body>
<div id="header">
<div id="line1">This is the first line of the header (bold)</div>
<div id="line2">This is the second line of the header (italic)</div>
<div id="line3">This is the third line of the header (big, centered)</div>
<!--<div id="pagenumber"></div>-->
</div>

<div class="chapter">First chapter of the document.</div>
<div class="chapter">Second chapter of the document.</div>
</body>
</html>

Xuehong
JohnClarke
Hi xuehong,
Thanks for your help. I want to be able to have "flowing" content in the sidebar. That is, I want to have text in the sidebar that changes depending on the context (string-set, counters etc.). The way that we have headers and footers change, I want to be able to have the sidebar change.

With your help, I was able to get a COUNTER to work this way, but not STRING.

<html>
<head>
<style>
@page {
    margin-left: 2.5in;
    border-left: solid 0.5px grey;
    @top-left-corner {
        content: flow(header);
    }
    @bottom-left-corner {
        content: "Page " counter(page) " of " counter(pages);
    }
    @top {
        content: string(headers);
        border-left: solid 0.5px grey;
    }
    @bottom {
        content: "Footer!";
        border-left: solid 0.5px grey;
    }
}
#header {
  /*float: left;
  clear: left;
  margin: -0.75in 0.2in 0in -1.25in;*/
  width: 2.0in;
  font-size: 10px;
  font-style: normal;
  color: gray;
  text-indent: 0em;
  padding: 0.5em;
  text-align: right;
  /*page-break-inside: avoid;
  border-right: 0.5px solid gray;
  height: 10.25in;*/
  prince-flow: static(header);       /* use the header flow as content */
}
#line1 { font-weight: bold }
#line2 { font-style: italic }

/* STRING don't work
#line3 { content: string(headers); }*/

/* COUNTERS do work */
#line3 { content: counter(page); }

div.chapter { page-break-before: always; margin-left: 2.5in; }
div.chapter { string-set: headers content(); }
</style>
</head>

<body>
<div id="header">
<div id="line1">This is the first line of the header (bold)</div>
<div id="line2">This is the second line of the header (italic)</div>
<div id="line3">Page number should end up here...</div>
</div>

<div class="chapter">First chapter of the document.</div>
<div class="chapter">Second chapter of the document.</div>
</body>
</html>

John Clarke
Cornerstone Systems Northwest Inc.

xuehong
Hi John,
Now I see what you are trying to do. :)
Currently, a string (dynamic content) must be captured before you use it in a "flow" element.
We would like to get rid of this limitation in a future release of Prince. In the meantime, there are two ways (both a bit hacky) that you can use:
1) This way requires repeating the header element in each chapter so that it can capture the dynamic heading string for each chapter:
<html>
<head>
<style>
@page {
    margin-left: 2in;
    @top-left-corner {
        content: flow(header);
    }
    @bottom-left-corner {
        content: "page " counter(page) " of " counter(pages);
    }
}
.header {
  width: 2.0in;
  font-size: 10px;
  font-style: normal;
  color: gray;
  text-indent: 0em;
  padding: 0.5em;
  text-align: right;
  border-right: solid 0.5px grey;
  height: 10.25in;
  prince-flow: static(header);   /* use the header flow as content */
}
.line1 { font-weight: bold }
.line2 { font-style: italic }
.header::after {                /* capture dynamic heading */
    content: string(headers);
    font-size: 24px;
    text-align: center
}
div.chapter { page-break-before: always; margin-left: 2.5in; }
div.heading { string-set: headers content(); }
</style>
</head>
<body>
<div class="chapter">
    <div class="heading">First chapter of the document.</div>
    <div class="header">
        <div class="line1">This is the first line of the header (bold)</div>
        <div class="line2">This is the second line of the header (italic)</div>
    </div>
</div>
<div class="chapter">
    <div class="heading">Second chapter of the document.</div>
    <div class="header">
        <div class="line1">This is the first line of the header (bold)</div>
        <div class="line2">This is the second line of the header (italic)</div>
    </div>
</div>
</body>
</html>


2) This way does not require repeating the header element because it does not combine static and dynamic content in one margin box. Instead, it uses negative margins in multiple page margin boxes to simulate what you need:
<html>
<head>
<style>
@page {
    margin-left: 2in;
    @top-left-corner {
        content: flow(static_header);
    }
    @bottom-left-corner {
        content: string(dynamic_header);
        color: gray;
        font-size: 24px;
        text-align: center;
        margin-top: -19.5in;    /* tweak this */
    }
    @bottom-left {
        content: "Page " counter(page) " of " counter(pages);
        margin-left: -1.3in;  /* tweak this */
    }
}
#static_header {
  width: 2.0in;
  font-size: 10px;
  font-style: normal;
  color: gray;
  text-indent: 0em;
  padding: 0.5em;
  text-align: right;
  border-right: solid 0.5px grey;
  height: 10.25in;
  prince-flow: static(static_header);   /* use the header flow as content */
}
#line1 { font-weight: bold }
#line2 { font-style: italic }
div.chapter { page-break-before: always; margin-left: 2.5in; }
div.chapter { string-set: dynamic_header content(); }
</style>
</head>
<body>
<div id="static_header">
<div id="line1">This is the first line of the header (bold)</div>
<div id="line2">This is the second line of the header (italic)</div>
</div>
<div class="chapter">First chapter of the document.</div>
<div class="chapter">Second chapter of the document.</div>
</body>
</html>

Xuehong