Making text shrink to fit variable container

[csdude55]

I have no idea what this would be called, or if it's better done with CSS, JavaScript, or even jQuery.

I have something like this:

<div id="container">
 <span style="width: 50px"></span>
 <span id="text_container" style="padding: 0 25px">PotentiallyLongTextWithNoBreaks</span>
 <span style="width: 85px"></span>
</div>

On my mobile device, portrait mode is 360px, so I only have 175px available for that text element. But of course, "container" isn't a fixed-width; on a desktop it could go up to 975px.

The default font-size for that middle text is 42px. The length can currently range from 6 characters to 13 characters.

Any suggestions on how I can make the text font-size shrink automatically if "container" expands beyond the screen width? This is my first thought (totally untested), but there's probably a better and faster (maybe jQuery) way... I just don't know what it would be called to look for it.

<script>
var container_width = document.getElementById('container').offsetWidth;
var maximum_width = screen.width;

while (container_width > maximum_width) {
 var text_size = document.getElementById('text_container').style.fontSize;
 text_size = text_size.replace('px', '');

 text_size -= 1;

 document.getElementById('text_container').style.fontSize = text_size + 'px';
}
</script>

[birdbrain]

Hi there csdude55,

you really need to read, understand and practise
all the information that may be found here...

How to use media queries [google.co.uk]

birdbrain

[NickMNS]

1- What bird brain said. No JS or JQ reuired for this.
2- Scaling fonts directly to the container size is not good practice in terms of mobile friendliness. If you cram a lot of text into a desktop container, then shrink the container on mobile, the text will need to become unreadably small. This is not to say that you shouldn't scale text at all. But the main focus should be on resizing the container to fit the text so that it remains legible.
3- If you would like to scale the text to the size of the container then use % units in place of px.

[Marshall]

The default font-size for that middle text is 42px.

Seems rather large for general text. Why so large? 12em to 16em, or so, should suffice.

[lucy24]

Tangentially:

<span style="width: 50px"></span>

Seems like you could achieve the identical result by putting left and right padding on the central element (the text) and dispensing with the empty spans.

[csdude55]

I should probably clarify:

1. The text is actually the site logo, I just do it in text so that search engines can read it.

2. I have 51 domains parked on the main one, and then the script reads the domain and shows relative data. So www.example.com would show "Example" as the logo, where www.somethingelse.com would show "SomethingElse" as the logo. On a mobile device, "Example" fits just fine and looks good, but "SomethingElse" is a bit too long.

3. The <span> tags on left and right aren't really empty in practice, I just used them here to help with the example. In the live site, the left span has the hamburger-icon for the navigation menu, and the right has icons for PMs, search, and member settings. Those are all fixed-width.

On that same note, the font-size was originally picked so that the height of the logo matches the icons on the left and right. I WISH that I could keep the height and just squeeze the width, but I don't think that's an option.


So this isn't really an issue of just recognizing when it's mobile or desktop, I need to figure out the available space width. Using % units on mobile might be a workable solution, but it's not perfect since it would shrink text that I would rather have stayed larger unless I hard-code for it.

I've never used % units, but I'm guessing something like:

<style type="text/css">
#text_container, H1 { font-size: 42px }

@media only screen and (max-width: 360px) {
 H1 { font-size: 75% !important }
}
</style>

<div id="container">
 <span style="width: 50px"></span>

 <span id="text_container" style="padding: 0 25px">
  <H1>PotentiallyLongTextWithNoBreaksM/H1>
 </span>

 <span style="width: 85px"></span>
</div>

Other possible solutions I've found are to use CSS's "letter-spacing" or "transform: scaleX(x)", but neither are ideal since they're not really relative to the container width; I'd have to figure them out beforehand