line-height in UIEnhancer: 'em' vs unitless

Justin Obara obara.justin at
Fri Apr 20 20:16:23 UTC 2012

I looked over the pull-request and things look good. I've merged and pushed the changes into the project repo ( ). 

I wonder though if we should create a maintenance release for Infusion 1.4 with this fix in place. It should be fairly straight forward to tests.

run the unit tests
go through the UIO test plans


On 2012-04-20, at 2:31 PM, Cheetham, Anastasia wrote:

> In working on the IDI website, Cindy and I were having problems with different line heights, so I did a bit of research.
> The UI Enhancer (used by UI Options to adjust the page) attaches a line-height CSS property to the body of the document. Currently, it uses a unit of 'em' for that line height. It seems that this is what was causing the problem.
> When an absolute value is used for line-height (i.e. when a unit is specified, such as 'em' or 'px'), the computed line-height - based on the the font-size of the element where the line-height was specified - is inherited by all elements that don't have their own line-height set. In the case of UIO, this means that everything inherits the computed - and therefore fixed - line height based on the body font size. The result is that elements with larger fonts end up with too little line-spacing, requiring integrators to hard-code a line-height for those elements. Then, increasing the line-height with UIO doesn't affect those elements (this is what's happening in FLUID-4491). 
> In contrast, when the line-height is a unitless number, it is treated as a scaling factor, and that factor is inherited. The factor will be used by each element to calculate the line height based on the element's own font size. I have posted a branch in which the 'em' is removed from the line-height:
> This fixes the problems we were having in the IDI site, and allows us to remove the extra line-height properties in our UIO demo that were causing FLUID-4491. I've tested the fix across the sites that are currently using UIO. The change does result in some slight changes to line-spacing in some contexts, but nothing major.
> I did have to adjust some of the tests to accommodate the change. Cindy was very helpful in figuring out what was going on and suggesting how to compensate: When unitless line-heights are used, a jQuery call to elem.css('lineHeight') returns the unitless factor in IE, but a calculated pixel value in all other browsers. The adjustment to the tests was to use the same check that UIEnhancer already uses for this issue.
> -- 
> Anastasia Cheetham     Inclusive Design Research Centre
> acheetham at           Inclusive Design Institute
>                                        OCAD University
> _______________________________________________________
> fluid-work mailing list - fluid-work at
> To unsubscribe, change settings or access archives,
> see

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the fluid-work mailing list