I have a carousel with textboxes for each image, and my client (who knows nothing about HTML) edits the textboxes using a WYSIWYG text editor. The resulting output is akin to your worst nightmares; something like:

<div class="carousel-text-container">
<span style="font-size:18pt;">
    <span style="font-weight:bold;">
         Lorem 
         <span style="font-size:15pt:">Dolor</span>
     </span>
    Ipsum
    <span style="font-size:19pt;"><span>&nbsp;<span>Sit</span>Amet</span>
</span>
</div>

This site has to be displayed at 3 different sizes to accomodate smaller monitors, so I have been using CSS media queries to resize the site.

Now I am having trouble resizing the text inside the textbox correctly. I have tried using jQuery.css to get the font size of each element in px, and then convert it to em. Then, by setting a font-size:x% sort of declaration on .carousel-text-container, I hoped that that would resize everything properly.

Unfortunately, there seems to be a recursive nature with how font-size is applied in ems. That is, .example is not resized properly in the following because its parent is also influencing it

<span style="font-size:2em;">
    Something
    <span class="example" style="font-size:1.5em;">Else</span>
</span>

How can I resize everything reliably and precisely such I can achieve a true percentage of my original font size, margin, padding, line-height, etc. for all the children of .carousel-text-container?