0

I have a fixed size <header> (let's say 300px in width by 200px in height) and a text inside. Here's my structure:

Header 1:

<header>
  <h1>
     This is example title, but the text length might be different.
  </h1>
</header>

I have multiple headers just like this, but with various text length, example:

Header 2:

<header>
  <h1>
     This is small-length text.
  </h1>
</header>

Header 3:

<header>
  <h1>
     This is bigger-length text. This is example title, but the text length might be different.
  </h1>
</header>

I want scale the text font-size in this fixed-size <header> as much as possible (without exceeding the <header> bounds, in width and height). And I want to do it dynamically, so it matches any text length. Do you have any ideas how I can do that?

PS: Here's a JS fiddle that illustrates the problem: https://jsfiddle.net/superKalo/nqf46tft/

Edit: I assume a CSS only solution is not possible. Do you know any javascript trick that would solve this problem?

Kaloyan Kosev
  • 12,483
  • 8
  • 59
  • 90
  • 1
    this isn't achievable with pure css, you would need a js solution - have a search, there are a few plugins out there that do this – Pete May 10 '16 at 10:12
  • there is a plugin called FitText.js which does something similar (though only width, AFAIR) – Johannes May 10 '16 at 10:12
  • A similar CSS result can be achieved with this: http://madebymike.com.au/writing/precise-control-responsive-typography/ but as others have said, there are definite javascript plugins availabe to do this specific action. – Martin May 10 '16 at 10:14
  • @Pete thanks, I am adding JavaScript as a tag too. I haven't really found a plugin that could do that just yet. – Kaloyan Kosev May 10 '16 at 10:28
  • @Johannes yes, I tried a solution with FitText.js, but as far as I could find out, it takes into consideration only the width of the container. I need both - width and height. – Kaloyan Kosev May 10 '16 at 10:30
  • @Martin thanks for the good read. But I am still not able to make a working solution :( – Kaloyan Kosev May 10 '16 at 10:30
  • @superKalo yes, but if you think about it, a solution in both directions would distort the proportion of the letters (width to height of every single letter), which usually is not what one wants. You'd have to put the text into an image and set that to 100% height and 100% width as a workaround. – Johannes May 10 '16 at 10:32
  • I stated it was *similar*, you could do it with some trial and error to find the outside values (the min and max values) but as said, using Javascript is probably the quickest and cleanest way of doing it. If you absolutely will not want the words to wrap you can use CSS `white-space:nowrap;` – Martin May 10 '16 at 10:50

1 Answers1

0

Check this out. But, i think you need to do a lot of work. http://madebymike.com.au/writing/precise-control-responsive-typography/

Atul Sharma
  • 9,397
  • 10
  • 38
  • 65