Writing headers for an HTML only when printing

[LuTHieR]

Hi,
is there any way to write a header in each HTML page when printing them
while leaving the header only on top of the file when viewing it? I
mean, I have a file that looks like this:

TITLE

TABLE1

TABLE2

TABLE3

TABLE4

and each table is being printed on a separate page using CSS
page-break-after. What I want to do is that, when I print it, the
result will be something like:

TITLE

TABLE1

-page break-

TITLE

TABLE 2

-page break-

.... and so on.

Is there any way?
Thanks :)

LuTHieR

[Andy Dingley]

LuTHieR wrote:

is there any way to write a header in each HTML page when printing them
while leaving the header only on top of the file when viewing it?

Sort of.

You can do this with CSS using the @media print rule
http://www.w3.org/TR/CSS21/media.html#at-media-rule

With this you can mark up sections of your page as "print only" and
"no-print" with a simple class attribute.

..print-only{ display: none; visibility: hidden; }

@media print {
.print-only { display: inherit; visibility: display; }
.no-print { display: none; visibility: hidden; }
}
Now this isn't exactly what you wanted - there's no way in CSS to say
"repeat on every page" (you can do this with XSL:FO and PDF, but not
HTML). So you'll still have to duplicate your "print only" caption on
each pagge manually.

[LuTHieR]

Andy Dingley wrote:

LuTHieR wrote:

is there any way to write a header in each HTML page when printing them
while leaving the header only on top of the file when viewing it?

Sort of.

You can do this with CSS using the @media print rule
http://www.w3.org/TR/CSS21/media.html#at-media-rule

With this you can mark up sections of your page as "print only" and
"no-print" with a simple class attribute.

.print-only{ display: none; visibility: hidden; }

@media print {
.print-only { display: inherit; visibility: display; }
.no-print { display: none; visibility: hidden; }
}
Now this isn't exactly what you wanted - there's no way in CSS to say
"repeat on every page" (you can do this with XSL:FO and PDF, but not
HTML). So you'll still have to duplicate your "print only" caption on
each pagge manually.

Many thanks for the answer, but I still don't know how to use it
exactly, I never used @media and am not really sure of its usage.

Assuming I have something like

<strong>TITLE </strong>
<table>....</table>
<table>....</table>
<table>....</table>

how should I apply the styles in order to make the title print before
every table? I guess it's got to be something like

<span class="print-only">TITLE</span>
<table>....</table>
<span class="print-only">TITLE</span>
<table>....</table>
<span class="print-only">TITLE</span>
<table>....</table>

but I'm not really sure. Could you please explain it a little more?
Thanks again,

LuTHieR

[Andy Dingley]

LuTHieR wrote:

how should I apply the styles in order to make the title print before
every table? I guess it's got to be something like

<span class="print-only">TITLE</span>
<table>....</table>

That's pretty much it (although I'd use <h2or something more
meaningul rather than just <span>)

[LuTHieR]

Andy Dingley wrote:

LuTHieR wrote:

how should I apply the styles in order to make the title print before
every table? I guess it's got to be something like

<span class="print-only">TITLE</span>
<table>....</table>

That's pretty much it (although I'd use <h2or something more
meaningul rather than just <span>)

Thanks :)