Making all lines in a paragraph the same width regardless character count

Question

I am making a GUI for a clients website. Its a T Shirt website where they want a really simple designer with limited options.

This is fine, however one of the options they have requested is to easily make all lines the same width. This results in larger font for some lines.

The provided text is in one text field, I then use:

word-wrap: break-word;

to break that line to fill the container.

This would end up as the example on the right, instead of the left.

enter image description here

Would this be possible with CSS prefered but JS can be used too.

css wouldn't do it, you'd need js to calculate different font sizes for each word so it'd fit into the same horizontal width. — Marc B, May 21 '15 at 21:42
Thought so, worth seeing if there was a solution for CSS out there. Ill keep digging. — Lovelock, May 21 '15 at 21:47
I'm thinking 1. Treat each line separately 2. Put each line in a container and the whole thing in a container 3. Proportion so that as a line container needs to get wider to fill the main container, the height also grows. This will definitely need some javascript, but will be mostly done with css. — Dan, May 21 '15 at 21:48
@VCode sadly not, its however the word-wrap breaks up the words. Pretty poor example images from me so I apologise. — Lovelock, May 21 '15 at 21:50
Found this: http://stackoverflow.com/a/3744583/2921557 which could do the trick. — Lovelock, May 21 '15 at 21:51
Are you trying to make it so you can click and edit the text in that box? Or are you just trying to display the text? — Bioto, May 21 '15 at 23:44

Amit · Answer 1 · 2015-05-21T22:17:06.757

If you don't mind breaking each line into it's own container (span or any other...) you can do it with javascript. The key is font-size CSS attribute.

You need to calculate the widest line (use offsetWidth to get each line's width), then calculate for each line how much spare width it leaves, divide that by the length of text in the line multiply by your base font size and set the attribute.

Here's a working fiddle.

David Mulder · Answer 2 · 2015-05-21T22:15:43.487

1

The BigText jQuery plugin is capable of doing exactly what you wish to do.

$('#bigtext').bigtext();

#bigtext{
  width:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://zachleat.github.io/BigText/dist/bigtext.js"></script>
<div id="bigtext">
  <span>SOME</span>
  <span>TOTALLY</span>
  <span>HIPSTER</span>
  <span>QUOTE</span>
  <span>ABOUT</span>
  <span>LIFE</span>
</div>

edited May 21 '15 at 22:15

answered May 21 '15 at 22:11

David Mulder

26,123
9
51
114

This doesn't work. He said the text was in one field. – Robert McKee May 21 '15 at 22:14
@RobertMcKee Honestly, the core issue is the dynamic font sizing. Splitting up a text in a different way is in comparison a no brainer. StackOverflow isn't a code writing service, it's a problem solving community. – David Mulder May 21 '15 at 22:16
Really if you are going to use a javascript, then breaking the line into multiple elements is about as difficult as increasing font size until it wraps. Neither is terribly difficult to do. – Robert McKee May 21 '15 at 22:28
@RobertMcKee Except for the part where there are no edge cases with splitting words into ``'s, whilst figuring out the best way to make a text fit a certain space is a lot harder. The library doesn't only calculate font size, it also accounts for word-spacing and letter-spacing. None of the other on the spot answers here account for that. – David Mulder May 21 '15 at 22:50

Hugo Silva · Answer 3 · 2015-05-21T23:23:10.493

You can increase the font size until the text gets wider than the parent. Have a look at this recursive function (using jQuery):

function findLargestFontSize($line){
    var oldSize = parseInt($line.css('font-size'));
    //set new size
    $line.css('font-size', oldSize + 1 + 'px');
    // check if hit the edges
    if( $line.width() > $line.parent().width() ){
        $line.css('font-size', oldSize + 'px');
        return(oldSize);
    } else {
        findLargestFontSize($line);
    }
}

And a fiddle with an example.

EDIT

I found Amit's answer to be a lot more elegant than this, so I merged with my solution. Here is another fiddle

var $target = $('#target');
var words = $target.text().split(' ');

// split words into lines
$target.empty();  
for(var i = 0; i < words.length; i++){
    var $newLine = $('<span style="display: table;">' + words[i] + '</span>');
    $target.append($newLine);
    if($newLine.width() < $target.width()) {
        $newLine.css('font-size', parseInt( $newLine.css('font-size'))  * ( $target.width() / $newLine.width()) + 'px');
    }
};

Making all lines in a paragraph the same width regardless character count

3 Answers3