0

I would like to display words or unicode glyphs so they are proportional to the viewable area (container size). That is, if the word is just a single character or we have just a unicode glyph, it is larger so it fills up space with at least let's say 10% padding on all sides. But if it's a longer word let's say "hello" or "consequentially" it shrinks the size of the word down to maintain that padding around the edges. If you resize the browser window, it will automatically responsively resize the text to fill the area, using only CSS.

This first snippet shows the simple/standard way you'd implement this. It shows how the font-size is static, the single letter doesn't fill up valuable space, and the larger word doesn't fit the container.

#a, #b, #c {
  font-size: 16px;
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 10px;
  margin: 10px;
  background: yellow;
}
<div id='a'>a</div>
<div id='b'>hello</div>
<div id='c'>consequentially</div>

What I would like to do instead is somehow -- dynamically -- make it look like this (which I statically hardcoded to demonstrate how it should visually look).

div {
  width: 50px;
  height: 50px;
  background: yellow;
  text-align: center;
  margin: 10px;
}

#a {
  font-size: 36px;
}

#c {
  font-size: 5px;
}
<div id='a'>a</div>
<div id='b'>hello</div>
<div id='c'>consequentially</div>

The question is how to make the font dynamically adjust size based on the size it will take up based on how long the word/characters are.

I would like to know if there's a pure CSS way to do it, but if not, then how to do it in plain JavaScript.

Lance
  • 75,200
  • 93
  • 289
  • 503
  • 2
    This cannot be done without JavaScript for the simple fact that mathematics beyond the scope of CSS `calc()` are required to 1) determine how many characters are in the container 2) how many pixels those characters consume 3) the ratio of that measure to the container size (usually width). – Randy Casburn Jun 05 '19 at 19:43
  • @ControlAltDel - While that is a great resource, IMO don't really think this is a dup. – Randy Casburn Jun 05 '19 at 19:44

0 Answers0