Increasing font size for all text elements

[csdude55]

I have HTML that looks like this:

<style>
.large { font-size: 16px }
p { font-size: 12px }
.small { font-size: 11px }
</style>

<main>
 <section>
  <div class="large">This is the title <span class="small">&raquo;</span></div>

  <p>
   Hey there, WebmasterWorld!
   <br>

   <span class="small">Nice place you have here</span>
  </p>
 </section>
</main>

That's not real HTML, of course, just an example of what I might have on a page.

Using jQuery, I'm letting the user increase or decrease the font sizes. Right now I'm just adjusting text within <p> tags, like so:

function defaultFontSize() {
 var font_size = getCookie('font_size');
 font_size = font_size || 12;

 $('p').each(function() {
  $(this).css({ fontSize : font_size });
 });
}

(I know, it doesn't NEED jQuery... but I'm already importing it so why not)

But now, as an alternative, I'd like to increase ALL fonts within <section></section> instead of just those defined.

I tried changing the saved value to a percentage and using this:

var font_size = getCookie('font_size');
font_size = font_size || 100;

$('section').css({ fontSize: font_size + '%' });

But since I'm defining a fixed size within the child elements, that doesn't work.

Then I was going to do the much more complex version of adjust every element that I might use:

var font_size = getCookie('font_size');
font_size = font_size || 100;

$('p, div, span').each(function() {
 $(this).css({ fontSize : font_size + '%' });
});
}

but that has another interesting problem; the SPAN that's nested within the DIV seems to be affected twice! So if I set, for example, var font_size = 200; to double the size, it ends up being doubled for the DIV and then doubled again for the SPAN; making the original 11px now 44px.

See what I mean here:

[jsfiddle.net...]

And I checked with Chrome... it starts at the top and works its way down. So the first one to change is the top DIV, then the child SPAN, then the P, then the next child SPAN:

[jsfiddle.net...]

Can you guys and gals suggest any other way to make everything increase in size relative to it's defined font size?

[lammert]

Have you thought of using relative font sizes by specifying font sizes in percentages instead of fixed pixel sizes? Percentage font sizes are relative to the parent's font size. In that case, you only need to change the size of the parent font to change the size of all fonts in embedded elements. You only set the parent value with a fixed px size.

[Dimitri]

Did you try with CSS selector?

section *

[csdude55]

Good ideas... I tried both, but neither had an impact:

[jsfiddle.net...]

I tried both em and % for the font sizes, and tested with 'section *' as the selector as well as 'div, span, p'.

[lammert]

More like this: [jsfiddle.net...] This is a modification of your fiddle where only the section has a fixed font size and both large and small classes have a size relative to that. The modified JavaScript function only changes the font size in the section with id="two". The two other classes scale with the same amount as the section.

[Andy Langton]

Maybe try something like this:

$('section *').each(function() {
 var currSize = parseInt($(this).css('font-size'));
/* Double size */
 var newSize = ((currSize * 200) / 100); 
 /* Debugging */
 console.log($(this).prop("tagName") + ' current size = ' + currSize + ' new size = ' + newSize);
 $(this).css('font-size', newSize);
});

[csdude55]

Oh, I see where I messed up, @lammert... I think that mine and yours was the same, but I did 'section *'.

Now I'm in another oddity... how do I take it back to the original font size? If I set font_size to 100% then it sets it to 100% of the browser's default, not the 12px originally set by 'section'.

I can do this, of course:

if (font_size == 100)
 $(this).css({ fontSize : '12px' });
else
 $(this).css({ fontSize : font_size + '%' });

but is there a better way to do it using the %?

In my example I see that I could just set the default font size to 'main', but in practice I have my breadcrumbs between main and section and an aside floated to the right of section, and I don't want them to be adjusted in size. I guess that I could wrap <section></section> in yet another parent element, but that kinda defeats the purpose...

[lammert]

You can have one parent higher up in the tree with a fixed font size. The section initially has a font size of 100%. The JavaScript code only changes the font-size of the section element. Something like:

<div class="wrapper">
 <section>
 <div class="large">
  <span class="small"></span>
 </div>
 </section>
</div>

and

.wrapper { font-size: 12px; }
section { font-size: 100%; }
.large { font-size: 120%; }
.small { font-size: 70%; }

[csdude55]

I gotcha. I've been trying to code better so I hate to use a DIV tag that has no markup value, but it works...