[dojo-contributors] Text sizing using em

Nikolai Onken nikolai at nikolaionken.com
Tue May 6 11:12:12 EDT 2008


Hi all,

as we discussed in the dijit meeting we decided to use em's instead of  
pixels for all text-sizing related issus.
This is a good approach but brings a few draw-backs we need to address.

When you size a node using em it sizes it relatively in regards to its  
parent node.
So if we set the default font-size of body to 13px a font size of  
~12px is something like 0.92em.
Since we can not control whether the dijit user sets a font-size of a  
parent element, plainly using font-size: 0.92em can result in  
different sizes depending on the font size of the nodes parents.

<div style="font-size: 0.9em">
	<div style="font-size: 0.9em"></div>
</div>

returns a different result than

<div style="font-size: 0.9em"></div>

Currently the only solution to keeping a consistent L&F while using  
relative font-sizing would be as far as I can imagine the usage of a  
"resetter" such as .dijitFontNode which sets the font of the parent  
node back to the reference size of the one we want to size.

in the case of the tab template that could be for instance:

.dijitFontNode {
	font-size: 13px;
}	

<div class="dijitTabContainer dijitFontNode">
	<div dojoAttachPoint="tablistNode"></div>
	<div class="dijitTabPaneWrapper" dojoAttachPoint="containerNode"></div>
</div>

then I could set the tabs font-size to:

.tundra .dijitTabPaneWrapper {
	font-size: 0.92308em;
}

I'd like to put this issue up for discussion. There might be other  
solutions and I might have missed an important point.

Nikolai
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-contributors/attachments/20080506/2bfd2fe5/attachment.htm 


More information about the dojo-contributors mailing list