How to accurately resize nested elements with ems and font-size percentage?
- by moonDogDog
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> <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?
