CODEWITHSUNDEEP
javascriptcsshtmlletter-spacing
Kai
Kai

Reputation: 125

Filling div using letter-spacing

The problem I'm having is filling a div with text using letter-spacing. The main issue is, I don't know the width of the div.

First I was thinking using, text-align= justify, but since that I've been running in the dark and got no clue to how to solve this. I'm guessing some scripting magic might do the trick.

An imgur link giving you an idea what I mean:

what I have versus what I want

<div id="container">
 <h1>Sample</h1>
 <p>Another even longer sample text</p>
</div>

Here is a link showcasing an example; JSfiddle.

Upvotes: 10

Views: 4605

Answers (6)

root
root

Reputation: 2448

No need for JavaScript

You can put &nbsp; between all letters inside words and &emsp; between words.

(Such text can be prepared using regular expressions for static HTML or dynamically on the backend.)

For line breaks, for example to have only one word per line, use &emsp;<br> between words.

Combine that with justify:

div {
    text-align: justify;
    text-align-last: justify;
    letter-spacing: -0.15em;
    width: 120px;
}
<div>
S&nbsp;o&nbsp;m&nbsp;e&nbsp;t&nbsp;h&nbsp;i&nbsp;n&nbsp;g&emsp;<br> l&nbsp;i&nbsp;k&nbsp;e&emsp;<br> t&nbsp;h&nbsp;i&nbsp;s&emsp;
</div>

<br>

<div>
S&nbsp;o&nbsp;m&nbsp;e&nbsp;t&nbsp;h&nbsp;i&nbsp;n&nbsp;g&emsp; l&nbsp;i&nbsp;k&nbsp;e&emsp; t&nbsp;h&nbsp;i&nbsp;s&emsp;
S&nbsp;o&nbsp;m&nbsp;e&nbsp;t&nbsp;h&nbsp;i&nbsp;n&nbsp;g&emsp; l&nbsp;i&nbsp;k&nbsp;e&emsp; t&nbsp;h&nbsp;i&nbsp;s&emsp;
S&nbsp;o&nbsp;m&nbsp;e&nbsp;t&nbsp;h&nbsp;i&nbsp;n&nbsp;g&emsp; l&nbsp;i&nbsp;k&nbsp;e&emsp; t&nbsp;h&nbsp;i&nbsp;s&emsp;
</div>

Result: screenshot

Upvotes: 0

perseus
perseus

Reputation: 1381

Another solution if you don't have to be semantic (because you will get many spans), I mean if you need only the visual result, is to use flexbox.

So you have your <div id="#myText">TEXT 1</div>

We need to get this:

<div id="#myText">
    <span>T</span>
    <span>E</span>
    <span>X</span>
    <span>T</span>
    <span>&nbsp;</span>
    <span>1</span>
</div>

So then you can apply CSS:

#myText {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

In order to transform the text to span you can use jQuery or whatever. Here with jQuery:

var words = $('#myText').text().split("");
$('#myText').empty();
$.each(words, function(i, v) {
    if(v===' '){
        $('#myText').append('<span>&nbsp;</span>');
    } else {
        $('#myText').append($("<span>").text(v));
    }
});

For better results remove put letter-spacing: 0 into #myText so any extra spacing will be applied.

Upvotes: 1

user1467267
user1467267

Reputation:

Based the comment of the poster it seems JavaScript is no problem. Here's a possible approach to solve the problem with jQuery:

JSFiddle 1

function dynamicSpacing(full_query, parent_element) {
    $(full_query).css('letter-spacing', 0);
    var content = $(full_query).html();
    var original = content;
    content = content.replace(/(\w|\s)/g, '<span>$1</span>');
    $(full_query).html(content);

    var letter_width = 0;
    var letters_count = 0;
    $(full_query + ' span').each(function() {
        letter_width += $(this).width();
        letters_count++;
    });

    var h1_width = $(parent_element).width();

    var spacing = (h1_width - letter_width) / (letters_count - 1);

    $(full_query).html(original);
    $(full_query).css('letter-spacing', spacing);
}

$(document).ready(function() {
    // Initial
    dynamicSpacing('#container h1', '#container');

    // Refresh
    $(window).resize(function() {
        dynamicSpacing('#container h1', '#container');
    });
});

Update

Small tweak for when the wrapper gets too small: JSFiddle 2

Upvotes: 7

web-tiki
web-tiki

Reputation: 103810

An other approach I wrote for this question Stretch text to fit width of div. It calculates and aplies letter-spacing so the text uses the whole available space in it's container on page load and on window resize :

DEMO

HTML :

<div id="container">
    <h1 class="stretch">Sample</h1>
    <p class="stretch">Another even longer sample text</p>
</div>

jQuery :

$.fn.strech_text = function(){
    var elmt          = $(this),
        cont_width    = elmt.width(),
        txt           = elmt.text(),
        one_line      = $('<span class="stretch_it">' + txt + '</span>'),
        nb_char       = elmt.text().length,
        spacing       = cont_width/nb_char,
        txt_width;

    elmt.html(one_line);
    txt_width = one_line.width();

    if (txt_width < cont_width){
        var  char_width     = txt_width/nb_char,
             ltr_spacing    = spacing - char_width + (spacing - char_width)/nb_char ; 

        one_line.css({'letter-spacing': ltr_spacing});
    } else {
        one_line.contents().unwrap();
        elmt.addClass('justify');
    }
};

$(document).ready(function () {
    $('.stretch').each(function(){
        $(this).strech_text();
    });
    $(window).resize(function () { 
        $('.stretch').each(function(){
            $(this).strech_text();
        });
    });
});

CSS :

body {
    padding: 130px;
}

#container {
    width: 100%;
    background: yellow;
}

.stretch_it{
    white-space: nowrap;
}
.justify{
    text-align:justify;
}

Upvotes: 0

Canser Yanbakan
Canser Yanbakan

Reputation: 3870

This may help:

function fill(target) {
    var elems = target.children();

    $.each(elems, function(i,e) {  

        var x = 1;
        var s = parseInt($(e).css('letter-spacing').replace('px',''));

        while(x == 1) {
            if($(e).width() <= target.width() - 10) {
                s++;
                $(e).css('letter-spacing', s+'px');
            } else {
                x = 0;
            }

        }
    });
}

fill($('#test'));

Note: If letter spacing is : 0 then you don't have to use replace method. Or you can add letter-spacing:1px; to your css file.

For avoiding overflow, always give minus number to parent element's height for correct work.

Upvotes: 0

Douglas
Douglas

Reputation: 37781

This is obviously evil, but since there is no straight forward way to do it with just css, you could do: demo

HTML:

<div>text</div>

CSS:

div, table {
    background: yellow;
}
table {
    width: 100%;
}
td {
    text-align: center;
}

JS:

var text = jQuery("div").text();
var table = jQuery("<table><tr></tr></table>").get(0);
var row = table.rows[0];
for (var i = 0; i < text.length; i++) {
    var cell = row.insertCell(-1);
    jQuery(cell).text(text[i]);
}
jQuery("div").replaceWith(table);

Upvotes: 0

Related Questions