Fit widest text line to div and change second line to match ratio

Question

My idea is to have a div showcase how two text lines will look compared to each other depending on the text length and font size.

The problem is, I want to showcase this in a div with a fixed width.

So the widest text line (not necessarily the one with the biggest font nor the one with most characthers) should be resized to always go to the edge of the div - on one line.

Meanwhile the font size of the not-so-wide text line should also be resized to keep the ratio between the two lines.

I have just written this code:

Script

<script>
 function typeFunction() {
document.getElementById('boxOne').innerHTML = document.getElementById("lineOne").value;
document.getElementById('boxTwo').innerHTML = document.getElementById("lineTwo").value;

document.getElementById('boxPreviewOne').innerHTML = document.getElementById("lineOne").value;
document.getElementById('boxPreviewTwo').innerHTML = document.getElementById("lineTwo").value;

checkWidth();
}

function fontSize(fontsize,target) {
target.style.fontSize = fontsize;
checkWidth();
} 

function checkWidth() {
ratio = document.getElementById("sizeOne").value.replace(/\D/g, '')/document.getElementById("sizeTwo").value.replace(/\D/g, '');

widthOne = document.getElementById("boxOne").offsetWidth;
widthTwo = document.getElementById("boxTwo").offsetWidth;

if (widthOne >= widthTwo) {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE";
if (ratio>=1) {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE/ratio";
} else {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE*ratio";
}
} else {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE";
if (ratio>=1) {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE*ratio";
} else {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE/ratio";
}
}
}
</script>

HTML

Line One: <input id="lineOne" onKeyUp="typeFunction()" value="This is line one">
<select id="sizeOne" onchange="fontSize(this.value,boxOne);">   
<option value="10px">10 cm</option>        
<option value="20px" selected="selected">20 cm</option>  
<option value="30px">30 cm</option>      
</select> 

<br>
Line Two: <input id="lineTwo" onKeyUp="typeFunction()" value="This is line two">
<select id="sizeTwo" onchange="fontSize(this.value,boxTwo);">   
<option value="10px" selected="selected">10 cm</option>        
<option value="20px">20 cm</option>  
<option value="30px">30 cm</option>      
</select>

<br>
<br>


<div style="width:700px;">
<span id="boxOne" style="font-size:20px">This is line one</span><br>
<span id="boxTwo" style="font-size:10px">This is line two</span>
</div>

<br><br>
Preview:<br>
<div class="Mainbox" style="width:400px;border:1px solid black">
<span id="boxPreviewOne" style="font-size:64px">This is line one</span><br>
<span id="boxPreviewTwo" style="font-size:32px">This is line two</span>
</div>


Line One: <input id="lineOne" onKeyUp="typeFunction()" value="This is line one">
<select id="sizeOne" onchange="fontSize(this.value,boxOne);">   
<option value="10px">10 cm</option>        
<option value="20px" selected="selected">20 cm</option>  
<option value="30px">30 cm</option>      
</select> 

<br>
Line Two: <input id="lineTwo" onKeyUp="typeFunction()" value="This is line two">
<select id="sizeTwo" onchange="fontSize(this.value,boxTwo);">   
<option value="10px" selected="selected">10 cm</option>        
<option value="20px">20 cm</option>  
<option value="30px">30 cm</option>      
</select>

<br>
<br>


<div style="width:700px;">
<span id="boxOne" style="font-size:20px">This is line one</span><br>
<span id="boxTwo" style="font-size:10px">This is line two</span>
</div>

<br><br>
Preview:<br>
<div class="Mainbox" style="width:400px;border:1px solid black">
<span id="boxPreviewOne" style="font-size:64px">This is line one</span><br>
<span id="boxPreviewTwo" style="font-size:32px">This is line two</span>
</div>

And here's an example image of the code + image of concept scenario:
enter image description here

enter image description here

That's as far as I can go on my own, I am afraid.
Obviously there's still quite some way to go.

I would prefer to only have the text-input mirrored once, but I don't think it'd then be possible to find the widest line.
I have no idea how to get my-called "MAX_FONT_SIZE"

charlietfl · Answer 1 · 2012-10-14T20:42:21.020

0

Here's a jQuery solution that does what you want. Using em units for font-size makes it a lot simpler. Fit is not 100% perfect on right edge, but with some tweaking could be made better. Some css tricks should help

Concept places text into an offscreen span, gets width of that span and compares to width of container. This allows a simple em calculation.

Code is very simple and therefore shouldn't need much explanation

Demo: http://jsfiddle.net/KxjHC/2/

edited Oct 14 '12 at 20:42

answered Oct 14 '12 at 20:30

charlietfl

170,828
13
121
150

Thank you for your answer Charlie, it looks very smart. However, my jquery knowledge is very limited, so I am struggling with how I should adapt this to my own scenario. With two lines, where only the widest (depending on text and font size) should fit the div. – John Smith Oct 14 '12 at 20:48

lrsjng · Answer 2 · 2012-10-14T21:25:48.987

Don't know if you are satisfied with a jQuery plugin, but if so this might be a good choice:

http://www.zachleat.com/web/bigtext-makes-text-big/

it's very simple to use, here's a demo form the project page: http://jsfiddle.net/zachleat/WzN6d/

change your html to:

<div class="Mainbox" style="width:400px;border:1px solid black">
    <div id="boxPreviewOne">This is line one</div>
    <div id="boxPreviewTwo">This is line two</div>
</div>

then apply:

$('.Mainbox').bigtext();

here's a live example for your code: http://jsfiddle.net/TqK4M/1/

score 0 · Answer 3 · edited May 23 '17 at 12:12

0

I apologize for tagging this with jquery, as I'm not skilled enough to actually implement your answers.

I found part of my solution here: Auto-size dynamic text to fill fixed size container

edited May 23 '17 at 12:12

Community

1
1

answered Oct 14 '12 at 21:52

John Smith

646
1
9
30

score 0 · Accepted Answer · answered Oct 14 '12 at 23:14

This should do more or less what you require:

$(".linecontainer").each(function() {
    var maxWidth = $(this).width();
    var largestWidth = 0;
    var largestSpan;
    $(this).find("span")
        .each(function() {
            $(this).data("originalSize", parseInt($(this).css("font-size")));
            if ($(this).width() > largestWidth)
            {
                largestWidth = $(this).width();
                largestSpan = $(this);
            }
        });
    var largestSizeFound = false;
    var largestSize = 0;
    var sizeRatio;
    while (largestSizeFound == false && largestSize < 1000)
    {
        largestSize++;
        largestSpan.css("font-size", largestSize + "px");
        if (largestSpan.width() > largestSpan.parents(".linecontainer").width())
        {
            largestSize--;
            largestSizeFound = true;
            sizeRatio = largestSize / largestSpan.data("originalSize");
        }
    }
    $(this).find("span")
        .each(function() {
            $(this).css("font-size", parseInt(sizeRatio * $(this).data("originalSize")) + "px")
        })
});

HTML

<div class="linecontainer">
    <div><span class="lineone">this is the first line of text</span></div>
    <div><span class="linetwo">another line of text</span></div>
</div>

CSS

.linecontainer { width:250px; overflow:hidden; }
.linecontainer span { white-space:nowrap;  }
.lineone { font-size:20px; }
.linetwo { font-size:10px; }

http://jsfiddle.net/SZG7E/

Fit widest text line to div and change second line to match ratio

4 Answers4