Norswap Norswap - 4 months ago 9
HTML Question

Display container with scaled-down font-size

Imagine a have a container, under which there will be many other elements.
Each of these elements might have their font-size set explicitly (e.g.

p
might be 16px,
blockquote
, 20px, etc).

I want to display this container with the font-size scaled down a certain factor, while preserving the relative size differences between elements inside the container (e.g.
p
's font-size must always be 4/5 of
blockquote
's font-size).

Can I do this with HTML/CSS?

Edit for context:

I'm using some kind of theme and I preferably would like to avoid going through all elements to re-cast them in
em
s (of which I'm well aware) nor re-define them all.

What I was really wondering is if there was something like:
.myDiv { font-size-scale: 0.5; }
that I could just apply and be done with it.

Answer

You can do this using em.

HTML,

<div>
  <p>Some Text</p>
  <blockquote>Some Block</blockquote>
</div>

<div class="small">
  <p>Some Text</p>
  <blockquote>Some Block</blockquote>
</div>

CSS,

p { font-size: 2em; }
blockquote { font-size: 4em; }

div { font-size: 16px; }
div.small { font-size: 9px; }

See the example: https://jsfiddle.net/toz75hp2/3/


If you want to avoid em, then you can simply use % percentage values.

See this example: https://jsfiddle.net/toz75hp2/4/

CSS,

p { font-size: 200%; }
blockquote { font-size: 350%; }

div { font-size: 16px; }
div.small { font-size: 9px; }

Cross Browser Warning! It does not work on all the browsers. Some gives unexpected results.


Or else you just referring zooming you can simply use css zoom. But this will zoom everything (There is no zoom-text property). So It's ok to use if you only have text inside the container.

See the example: https://jsfiddle.net/toz75hp2/5/