Forum How do I...?

How do I call external Javascript to my XML Before Conversion in Prince 10

Bala
Hi there,

I am trying to define javascript function for auto generated content in the sample file.

CSS:
Affiliation:nth-of-type(2)::before(2) {content: string(initial2)". " string(surname2) " (" prince-script(myfunc) ")" "\A";white-space:pre;;}

script.js
function message()
{
return "message box";
}

Thanks
mikeday
Prince.addScriptFunc("myfunc", message);

or directly:
Prince.addScriptFunc("myfunc", function() { return "message box"; });
Bala
Can I add this in CSS?
Bala
Sorry, I confused where do i insert this rule?
mikeday
No this is JavaScript.
Bala
Is this correct? Attached is the js file
  1. prince.js0.1 kB
mikeday
Yes that is fine. Then you can refer to it like this to see the message in the page header:
<style>
@page { @top { content: prince-script(myfunc) } }
</style>

Of course if you just want a text message you could just say "message box" in the CSS directly; what is it you want to achieve with the script function?
Bala
How do I add CSS style in retrun function?

Prince.addScriptFunc("myfunc", function() { return "\u002A"; });
Bala
How do I add CSS style in retrun function?

Prince.addScriptFunc("myfunc", function() { return "\u002A"; });
mikeday
You can't use CSS in JavaScript. What are you trying to do?
Bala
I'm trying to add wingdings symbols at end of ::before pseudo element function.

Affiliation:nth-of-type(2)::before {content: string(initial2)". " string(surname2) " (" "\002a" ")" "\A";white-space:pre;;}

I need to apply font-family style only for unicode value \002a instead of all value. So I have tried alternative option javascript function.
mikeday
Oh I see, that is a bit difficult then. Why not use JavaScript to add a <span> element instead?
Bala
I do not know javascript very well and this is XML file.
mikeday
JavaScript can still modify XML, but you will need a basic understanding of how the DOM works.

However maybe you don't even need JavaScript. What if you just put WingDings as the last item in the font-family list, and instead of using \002a use \F02A, the private use character?
Bala
I have added font-family in the CSS and use the \F02A private character in CSS file. But i did not get desired output.

@font-face{font-family: "wingding"; src: url(fonts/wingding.ttf);}

Affiliation:nth-of-type(2)::before {content: string(initial2)". " string(surname2) "\F02A" "\A";white-space:pre;;}
mikeday
Did you get no output, or the wrong character?
Bala
I'm getting the wrong character instead of windings
mikeday
What about \F00A?
Bala
I'm getting warning message as "No Glyphs for character u+f00a, fallback to "?" " in Prince converter
mikeday
Ah okay, tricky. Which glyph is 2A in WingDings, the envelope symbol?
Bala
Yes correct.
Bala
I'm placing the author information's at the bottom of first page. For corresponding author, I need to auto generate the envelope symbol after family name. Also I have tried with image, but output is very poor.
mikeday
I am struggling to get the envelope symbol with generated content alone. Maybe you could try something like this JavaScript:
<script>
window.onload = function() {
    var elem = ???
    var as = elem.getElementsByTagName("Affiliation");
    if (as.length > 1) {
        var span = document.createElement("span");
        span.textContent = "\u002A";
        span.style.fontFamily = "WingDings";
        as[1].appendChild(span);
    }
};
</script>

The only tricky part is finding the elem containing the Affiliation elements, if each group is wrapped up in another element that would be convenient, then you could just use document.getElementsByTagName("whatever") and iterate over them.
Bala
Thanks, we will try this.
Bala
I get the output fine.

CSS mark-up:
Affiliation:nth-of-type(2)::before {content: string(initial2)". " string(surname2) " (""\F02A"")" "\A";white-space:pre;font-family: "Times_Roman", "wingding"}
mikeday
Great! :)