CSS line-height and font-size: shrink relatively to the container?

Question

I've created a photo-album generator, a person can add photos and text a manipulate them as he feels like.

one of my demands is to resize screen to fit different proportions and resolutions so the images and text need to be fit correctly on any screen and size.

with an image is easy, I just make a position: absolute; relative to the page but I cannot seems to get my head around how to make this with font-size and line-height.

I have an example here with the issue I have: (please notice the difference between 300 size to 600)

var def = 400;
var fontsize = 20;
var lineHeight = 20;

var init = function() {
  var val = document.getElementById('val');
  val.onchange = function() {
    var value = parseInt(this.value);
    if (!isNaN(value)) {
      var diff = (def / value) * 100;

      document.getElementById('wrap').style.fontSize = ((fontsize / diff) * 100) + 'px';
      document.getElementById('container').style.lineHeight = ((lineHeight / diff) * 100) + 'px';

      document.getElementById('container').style.width = value + 'px';
      document.getElementById('container').style.height = value + 'px';
    }
  }
}

.wrap {
  font-size: 20px;
}

.container {
  width: 400px;
  height: 400px;
  background-color: #eee;
  line-height: 20px;
}

.container p {
  font-size: 1em;
  line-height: inherit;
}

<html>

<head>
  <style>

  </style>
</head>

<body onload="init();">

<h1>switch between 300 and 600 values to see how the line breaks and is not resized in synced with its parent</h1>
  <input id="val" type="text" value="400" />

  <div id="wrap" class="wrap">
    <div id="container" class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur risus in cursus ullamcorper. Quisque volutpat neque sed vestibulum iaculis. Quisque luctus mollis euismod. Fusce pharetra dictum justo, ac volutpat leo sollicitudin sed.
        Nunc pellentesque nibh vulputate urna hendrerit convallis. Praesent eleifend rutrum odio eget facilisis. Nulla placerat ultricies erat.</p>
      <p>Quisque eget sagittis massa. Cras scelerisque molestie sollicitudin. Nulla vehicula, sem vel lacinia varius, lacus orci iaculis neque, at lacinia mi nulla rutrum velit. Mauris pulvinar sem sit amet tempus dapibus. Duis augue tortor, ullamcorper
        ac erat sed, cursus fermentum ex. Maecenas mattis felis nec aliquam imperdiet. Integer eget accumsan ante, eget maximus nunc.</p>
    </div>
  </div>

  <script type="text/javascript">
  </script>
</body>

</html>

You are required to post your minimal markup that shows the problem here, not your web site which will change tomorrow helping no one in the future: https://stackoverflow.com/help/mcve — Rob, Jun 18 '17 at 14:29
You could you this JS plugin. http://fittextjs.com/ If you need to do by CSS only, try to use vw or vh as unit but not 100% sure whether it works :) — shinyatk, Jun 18 '17 at 14:29
You have to adjust few things because the text box height is bigger than the background. Try to find the div with this class "block text_object mover selected_up" and change "height" property to 100% and "top" property to 0. And other properties if is necessary. — Robert Negreanu, Jun 18 '17 at 14:37
https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container already has the answer — Black Mamba, Jun 18 '17 at 14:47
Possible duplicate of [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) — Black Mamba, Jun 18 '17 at 14:47
The problem with this is, as soon as you look on a second computer, using another browser and/or has another OS, i.e. Mac or Linux etc., it will fail again. To achieve this is almost impossible unless it is for one specific hardware/software setup, and the reason is that they all have their way to deal with fonts and their internal metrics. — Asons, Jun 18 '17 at 14:50
The only possible way is to let the text element has auto height and then decrease the font size until its elements height matches the rest of the layout — Asons, Jun 18 '17 at 14:54
thank you @IshanMahajan, but this not the answers. in the answer you posted, they say using vw and vh, and thats not the case here, I need a solution for resizing a parent DIV and not the viewport of the screen — Roey Zada, Jun 18 '17 at 16:55
thank you @shinyatk, thats doesnt work because my problem cannot be fixed with vh and vw, i need the text to fit the parent and not the screen — Roey Zada, Jun 18 '17 at 17:28
as I see this great community @LGSon, there is nothing impossible here :) — Roey Zada, Jun 18 '17 at 17:29
Your sample generate the same with both 300 and 600, with the latest Chrome and Firefox on Windows 10. How does this look different for you, and with which browser/OS? — Asons, Jun 18 '17 at 17:46

score 1 · Accepted Answer · answered Jun 18 '17 at 17:55

A simple way for this could be to use transform: scale.

It will produce the same scaled result cross browser.

var def = 400;
var init = function() {
  var val = document.getElementById('val');
  val.onchange = function() {
    var value = parseInt(this.value);
    if (!isNaN(value)) {
      var diff = (value / def);
                                        /*  changed property and value  */

      document.getElementById('wrap').style.transform = 'scale('+diff+')';
    }
  }
}

.wrap {
  font-size: 20px;
  transform-origin: left top;          /*  added property  */
}

.container {
  width: 400px;
  height: 400px;
  background-color: #eee;
  line-height: 20px;
}

.container p {
  font-size: 1em;
  line-height: inherit;
}

<body onload="init();">
<h1>switch between 300 and 600 values to see how the line breaks and is not resized in synced with its parent</h1>
  <input id="val" type="text" value="400" />

  <div id="wrap" class="wrap">
    <div id="container" class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur risus in cursus ullamcorper. Quisque volutpat neque sed vestibulum iaculis. Quisque luctus mollis euismod. Fusce pharetra dictum justo, ac volutpat leo sollicitudin sed.
        Nunc pellentesque nibh vulputate urna hendrerit convallis. Praesent eleifend rutrum odio eget facilisis. Nulla placerat ultricies erat.</p>
      <p>Quisque eget sagittis massa. Cras scelerisque molestie sollicitudin. Nulla vehicula, sem vel lacinia varius, lacus orci iaculis neque, at lacinia mi nulla rutrum velit. Mauris pulvinar sem sit amet tempus dapibus. Duis augue tortor, ullamcorper
        ac erat sed, cursus fermentum ex. Maecenas mattis felis nec aliquam imperdiet. Integer eget accumsan ante, eget maximus nunc.</p>
    </div>
  </div>
</body>

CSS line-height and font-size: shrink relatively to the container?

1 Answers1