Forum How do I...?

Change font-family on the fly

scott_w
I want to be able to change the font-family based upon an attribute value at the root level of an XML file. I need to do this so I can publish XML coming at us in lots of different languages (70+) for a given publication and get the appropriate font-family set for that language.

I can do this for the body of the job by using the appropriate selector and then specifying the font-family that will support that language. But I can't figure out how to do this with the font-family information specified on the @page.

So our XML file looks something like this:

<book publicationLanguage="201">
                <titleBlock>
			<title id="1">Սուրբ գրության զորությունը</title>
				<byline>
					<para id="2">Երեց Ռիչարդ Գ. Սքոթ</para>
					<para id="3">Տասներկու Առաքյալների Քվորումից</para> . . . </book>
                           

And so I change the font-family by doing this with the selector:
/*Armenian*/
book[publicationLanguage = "201"] {
	font-family : "Newton ldsArm";
}

This allows me to dynamically control the font everywhere except in @page area. Does anybody have any ideas how to dynamically control the css call outs like font-family within @page based upon information that can be found in the XML file that is being processed? I would want to be able to change the "Palatino ldsLat" to "Newton ldsArm."
@page :left {
	margin: 48pt 44pt 44pt 39pt;
@top-left {
	content: string(myRunningSectionTitle);
	vertical-align: middle;
	font-size: 7.5pt;
	font-family:"Palatino ldsLat";
	font-style:italic; . . . 
mikeday
That's actually tricky. One possibility would be to flow content from the document into the headers, so that they use the document font family. It's a little indirect, but would work, although it does require a couple of extra elements in the document itself. The other possibility would be to use JavaScript to apply different CSS depending upon the language attribute in the document.
scott_w
Do you have examples of how we can flow text in the headers. We are processing XML files and want to be able to create running headers for the book title and the chapter title.

We did look at using a JavaScript to apply different CSS, but we could only get the script to trigger if we were using HTML files with the script in the head and we could only control the "content:" in the CSS, we couldn't write to the "font-family:" Below is the script we were trying to use.

function SetFontToRootElementsFont()
{
    var languageCode = document.documentElement.getAttribute('publicationLanguage');
    if (languageCode == "131") return "Giorgi ldsGeo";
    else 
        if (languageCode == "201") return "Newton ldsArm";
        else
            if (languageCode == "506") return "Fremnatos ldsEth";
            else return "Palatino ldsLat";
} 


We then placed this in our CSS.

font-family: prince-script(SetFontToRootElementsFont)


The question was where to place the script in an XML workflow so that it would trigger and pass the value to the CSS. We tried lots of different things but could only get it to trigger in and HTML file and then only pass the value to a "content:"

Do you have any working samples of using JavaScript to apply different CSS?
mikeday
You can use the --script command-line argument to run a script that is not present in the input document. This can use element.setAttribute("style", "font-family: Blah") to change the font-family of a particular element. In Prince 8.1 it will be possible to access element.style.fontFamily directly, which will be more convenient.