Log in / Register

Forum › How do I...?

Apply css styles in headers

nico
Hello,

I have a document where the h1 titles contain spans to apply different css formating to the text inside them. These titles are used as header on top of each page.

I couldn't find a way to apply the span css format when used as page header.

Any idea ?

There are some examples of things that I already tried below.

Regards,

Nicolas



<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Header Style</title>
	<style type="text/css">
		span.sp { font-style: italic; color: #AAA; }
		h1 { string-set: header content(); }
		@page {
			@top-right { content: string(header, first); font-size: 10pt; }
			@top-left { content: flow(header2); font-size: 10pt; }
		}
		#header { flow: static(header2); }
	</style>
</head>
<body>
	<h1>This is a h1 title with a <span class="sp">span</span></h1>

	<p>Unfortunately, the css styles of the span are not applied when the h1 is used as page header.</p>

	<h1 id="header">This is another <span class="sp">test</span></h1>
	<p>In this case the css styles are applied but the h1 is removed from normal flow and this is not what I want.</p>
</body>
</html>
mikeday
This can't be done with CSS at the moment. As you have found, string-set() only captures the text, and flow() removes the element from the normal flow.

It may be necessary to duplicate the element in the document, so you can flow one to the header and leave the other where it is. If you cannot change the document itself, you could write a small JavaScript function to do this, using cloneNode() in the DOM.
pieter.lamers
Would it be possible now to have a page header with markup in it? I regularly have titles with foreign language in it (or other stuff) that needs to be italicized.
mikeday
Yes, you can flow an element to the page margin box as described in this section.
pieter.lamers
Tx Mike, getting closer every day. Is this flow property prince-specific, or part of a standard CSS spec? I'd like to read more about it.
mikeday
It is Prince-specific, although Prince also supports the equivalent "position: running(header)" syntax which is being standardised.