CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
Brian C
Brian C

Reputation: 1447

Resize Any-Length Text to fit a Variable Width, Fixed Height Container

I have a container of fixed height (30px) but variable width that displays error messages and alerts to a user. Generally the message is two or three words and looks fine, but when a longer message is displayed, it goes onto two lines, and outside of the container used to display the message.

I'm looking for some way to re-size the message so that it always fits within the container. As the width decreases, the text will get smaller until it is small enough for two lines to fit inside the 30px high container, and then it will do so.

HTML

<body>
<div class="go-nogo-box">
    <div class="go-nogo-container">
        <h2 class="go-nogo-status">Error Message!</h2>
    </div>
</div>

CSS

.go-nogo-box{
width: 80%;
margin:0 auto 10px auto;
}

.go-nogo-container h2{
    height: 50%;
}

.go-nogo-container{
    border-color: #999;
    border-width: 1px;
    border-style: solid;
    clear: both;
    padding:15px;
    background-color: #FFFFFF;
    border-radius: 40px;
    height: 30px;
}
.go-nogo-status{
    font-weight: bold;
    text-align: center;
    font-size: 32px;
    font-variant: small-caps;
    font-family: Arial, Helvetica, sans-serif;
}

@media (max-width: 1100px){
    .go-nogo-box{
        width:100%
    }
}

Please check out the JS Fiddle Link, which allows you to select different length messages (The actual program would send messages from the back-end).

https://jsfiddle.net/alphabetaparkinglot/4rwb6j56/5/

I have tried implementing FitText.js, but while I can get it to work okay for any one message, it does not handle messages of arbitrary length in the same way.

For what it is worth: I have found a similar question to mine, but it deals with images, not text, so the solution is quite different than what I am interested in: Center a Variable Width/Height Image Inside Fixed Height/Variable Width Container

Upvotes: 3

Views: 2936

Answers (2)

Rob
Rob

Reputation: 11

You've indicated a variable length message in a variable width container that must stay on one line. This has a few implications:

  • A maximum character count. What happens if the message contains 1000 characters? 2000?
  • A minimum text size. How small can the text be before it's illegible to the user?
  • A minimum width for the container.

These values should be defined for either a JavaScript or CSS solution. FitText should work for you.

Set up your page with what you know to be the maximum character count for the message and set the browser at the minimum width. Then adjust the FitText function to make the text legible and fit within the container.

This might work for you using FitText:

$(".go-nogo-status").fitText(4, { minFontSize: '15px', maxFontSize: '32px' });

And add the following line to the your CSS

.go-nogo-container{
    white-space: nowrap; 
}

Upvotes: 0

Josh Beam
Josh Beam

Reputation: 19772

updated answer

See this new fork. Just does a bit of weird stuff with JavaScript to try and find the best ratio for font-size based on the width:

Relevant JS:

    $('.go-nogo-status').text(message);
    $('.go-nogo-status').css('font-size', '100%');

    var w = $('.go-nogo-status').width();
    $('.go-nogo-status').css('font-size', (w*3)/w + 'vmin')

Relevant CSS:

.go-nogo-status{
    font-weight: bold;
    text-align: center;
    font-size: 3vw;
    font-variant: small-caps;
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

Basically just a bunch of size munging to try and get it to look right. Seems to work in my browser for all viewport sizes (keeps everything on one line and within the red error area).

original answer

One possible CSS-only solution is to make your font-size based on vw. Here's a fork of your fiddle. The relevant CSS portion is:

.go-nogo-status{
    font-weight: bold;
    text-align: center;
    font-size: 3vw;  /* here */
    font-variant: small-caps;
    font-family: Arial, Helvetica, sans-serif;
}

Different screen sizes:

enter image description here enter image description here

This is referred to as "viewport sized typography", and here's a relevant article on CSS tricks.

CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin.

In some cases in can be a bit finnicky, so you might need to play around with your CSS sizes to try and find a value that best fits your use case.

Upvotes: 2

Related Questions