-1

I'm styling labels with css and I'm trying to scale them depending on the font size used inside it.

The goal here is to reduce the overall size but keep the proportions just like tranform: scale does but without reducing the quality.

For example:

With a font size of 1em enter image description here

and with a font size of 0.5em enter image description here

Any idea on how to achieve that ?

Thanks !

Pete
  • 57,112
  • 28
  • 117
  • 166
Théo Champion
  • 1,701
  • 1
  • 21
  • 46

2 Answers2

0

If you want to style the labels to the size depending on your font-size, you should use padding for the space around it, so the label's size is depending on your font-size.

Daan_1978
  • 57
  • 6
0

I'm not sure if I understand correctly.

Basically you want to set a font-size for a label and then automatically adjust the font-size for the others labels ? If so... the simplest way to do that is to use em for each label of the dependency label.

<label>
  Label A
  <label>
    Label B
      <label>
        Label C
          <label>
            Label D
           </label>
      <label>
    </label>
</label>

CSS

label {
  display: block;
  font-size: 20px;
}
label > label {
  font-size: .9em;
}

codepen source here

Ploutarchos
  • 48
  • 7
  • This is really interesting but not really what I'm trying to achieve. What I want to do is to 'scale' all aspect of the label based on the font-size of the text inside – Théo Champion Apr 16 '18 at 16:52
  • @ThéoChampion what about this anwser [link](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container?noredirect=1&lq=1) ?? and by meaning `all aspect of the label` you mean the element for each label individual ?? – Ploutarchos Apr 16 '18 at 18:19