User Guide / Generated Content
Prince supports arbitrary JavaScript functions to be called from CSS generated
content using the prince-script()
function.
CSS
p::after { content: prince-script(myfunc) }
JavaScript
function myfunc() { return "Some generated context text!"; } Prince.addScriptFunc("myfunc", myfunc);
Accessing the current date and time
JavaScript functions have access to the current date and time, which can be
added to the document using prince-script()
in generated content.
CSS
@page { @top { content: prince-script(datestamp) } }
JavaScript
Prince.addScriptFunc("datestamp", function() { return (new Date()).toString(); });
User-defined counter styles
The JavaScript functions used with prince-script()
can take
arguments that are themselves generated content. This allows functions to
operate on counter values and implement new counter styles.
CSS
li::marker { content: prince-script(mycounterstyle, counter(list-item)) }
JavaScript
Prince.addScriptFunc("mycounterstyle", function(n) { if (n == 1) return "one"; else if (n == 2) return "two"; else if (n == 3) return "three"; else return n; });