Log in / Register

Forum › How do I...?

Styling the page where an element is, without a pagebreak

Jellby
I'm trying to have a special page style (no headers) whenever some elements appear, (<h1>, for instance), but whatever I try has either no effect or creates a pagebreak after the element. The "workaround" of enclosing everything (until the next <h1>) in <div> does not appeal to me. I expected this should just work:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
@page { size: 9cm 12cm; }
@page red { background-color: red; }
h1 { page: red; }
</style>
</head>
<body>

<h1>Test</h1>
<p>Testing</p>

<h1>Test</h1>
<p>Testing</p>

<h1>Test</h1>
<p>Testing</p>

</body>
</html>


but it creates the undesired pagebreak after the <h1>. Now that I see it, I'd also expect it not to create a pagebreak before the <h1>. To be clearer, in my particular case, the <h1> would occur only after a pagebreak, so I don't really mind if a pagebreak is forced before it when setting a named page, but I think it would be desirable to avoid this for other cases.

I notice this has already been asked before (http://www.princexml.com/bb/viewtopic.php?t=652), but the proposed solution does not work with prince 7.0b1.
mikeday
Will your <h1> elements always occur at the beginning of a page, ie. always be preceded by a page break?
Jellby
Not necessarily, though I'd be happy enough with a solution for when they do.
oliof
I did something like this the following way (abridged): 

@page {
  @top-center {
      content: string(chapter, first) ; 
  }
}

@page chapter:first {
    @top-center { content: none ; }
}

[...]

h1 {
   prince-page-group: start ;
   page-break-before: right ;
   string-set: chapter content() ; 
   page: chapter ; 
}


Note that I always put h1 elements on the right side of a two-page spread to mimic the usual way chapters are laid out in books.[/code]
Jellby
That's what I thought, but I get an undesired pagebreak after the <h1>.
oliof
what happens if you add 
page-break-after: avoid
?
Jellby
Nothing, the pagebreak remains.
mikeday
Try this:
<html>
<head>
<style>
@page { size: 9cm 12cm; }
@page chapter:first { background-color: red; }
h1 { prince-page-group: start }
body { page: chapter }
</style>
</head>
<body>

<h1>Test</h1>
<p>Testing</p>

<h1>Test</h1>
<p>Testing</p>

<h1>Test</h1>
<p>Testing</p>

</body>
</html>

It's a little indirect unfortunately, as the control of named pages in CSS is still under development.
Jellby
It works for what I needed now, thanks.
Alex McKee
Wha-hey Mikes solution worked great for me too. Thanks Mike.