I have the following template:
<div dojoType="dijit.Declaration" widgetClass="FontDemo" defaults="{value: ''}">
<div class="font designChoice">
<span class="font-demo" style="font-family: ${value};">Font: ${value}</span>
</div>
</div>
<div class="font designChoice">
<span class="font-demo" style="font-family: ${value};">Font: ${value}</span>
</div>
</div>
And this widget instantiation:
<div dojoType="FontDemo" value="Times New Roman"></div>
Now, I would believe that this would print "Font: Times New Roman", and that the text would be styled in the actual Times New Roman font, right?
Nope. It prints "Font: Times New Roman", but in the standard font, Arial or something.
It seems that the parser strips the entire contents of the style attribute. Inspecting in Firebug shows me that the <span class="font-demo" style="font-family: ${value}"> is instead outputted as <span class="font-demo" style=""> - that is, an empty style attribute.
What is the reason for this, and how can it be fixed?
Workaround
There is a workaround, but it's not pretty. Instead of specifying the
styleattribute, use a different name, e.g.cssStyle.Then, write a
postscriptjavascript to turncssStylevalues intostyle:<div class="font designChoice">
<span class="font-demo" cssStyle="font-family: ${value};">Font: ${value}</span>
</div>
<script type="dojo/method" event="postscript">
var elements = this.domNode.getElementsByTagName("*"); // Get all elements under this element
for (var i = 0; i < elements.length; i++) {
var el = elements[i];
if (el.hasAttribute("cssStyle")) { // If the element has a cssStyle attribute ...
el.setAttribute("style", el.getAttribute("cssStyle")); // ... set the element's style attribute to the value of cssStyle
}
}
</script>
</div>
Actually, you need to put
Actually, you need to put quotes around fonts with backspaces. With this minor changes it works for me:
<div class="font designChoice">
<span class="font-demo" style="font-family: '${value};'">Font: ${value}</span>
</div>
</div>
You're right!
Thanks! I still can't understand why this is necessary, but I'll leave that for now.
Sorry ...
It does not work - not if you're specifying several fonts, like
Tahoma, Arial, sans-serif. This will be rendered as'Tahoma, Arial, sans-serif'- i.e. like a single font, which of course does not exist.I need to specify several fonts, so I'll have to stick with the javascript workaround.