How do I call external Javascript to my XML Before Conversion in Prince 10
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
Prince.addScriptFunc("myfunc", message);
or directly:
Prince.addScriptFunc("myfunc", function() { return "message box"; });
Sorry, I confused where do i insert this rule?
Is this correct? Attached is the js file
- prince.js 0.1 kB
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?
How do I add CSS style in retrun function?
Prince.addScriptFunc("myfunc", function() { return "\u002A"; });
How do I add CSS style in retrun function?
Prince.addScriptFunc("myfunc", function() { return "\u002A"; });
You can't use CSS in JavaScript. What are you trying to do?
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.
Oh I see, that is a bit difficult then. Why not use JavaScript to add a <span> element instead?
I do not know javascript very well and this is XML file.
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?
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;;}
Did you get no output, or the wrong character?
I'm getting the wrong character instead of windings
I'm getting warning message as "No Glyphs for character u+f00a, fallback to "?" " in Prince converter
Ah okay, tricky. Which glyph is 2A in WingDings, the envelope symbol?
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.
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.
Thanks, we will try this.
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"}
Great!
