We allow our users to have dynamic headers and footers for each of their documents.

We do that by using the prince-script function.

prince.css

@page {	
	@top-left {
		content: prince-script(topleftheader, counter(page), counter(pages));
		vertical-align: bottom;
	}
}

prince.js

Prince.addScriptFunc("topleftheader", function(count, totalCount) {
	if ($('#hidden_top_left_header .page-counter').length) {
		$('#hidden_top_left_header .page-counter').text(count);
	} else if ($('#hidden_top_left_header .page-counter-total').length) {
		$('#hidden_top_left_header .page-counter-total').text(count + ' of  ' + totalCount);
	}
	return $('#hidden_top_left_header').text();
});

The content for each of those elements referenced in the js file is set in the html file.

Anyways, this all works great for us.

The problem is this:

In our old pdf generator, if the user wanted their content to appear in bold, we would just wrap it in <strong></strong> tags.

But the prince-script function treats the returned content as uninterpreted text, the <strong> tag gets ignored and the header/footer doesn't appear bold.

What would be the best way to bold the headers/footers if our users want them to be bold? It would have to be dynamic, we can't just set it in the css file unfortunately.

Thanks!

We ended up switching to prince-flow and this solved all our problems.