CODEWITHSUNDEEP
jquerycss
WIWIWWIISpitFire
WIWIWWIISpitFire

Reputation: 1549

Wrapping each word and each letter within each word jQuery

Imagine you have string of text. Every letter in that string should get a random font from an array.

To do this, i wrapped all letters within a span and randomized that font-family.

Problem with this approach is word-wrap. Now, when a sentence breaks, i have a letter-wrap where individual letter break to next line.

To fix this i want to also wrap each word in a span and apply word-wrap on that span.

So every individual word should have span. Every individual letter within that word should also get a span.

I could really use some help, below example outputs all letters * words. How to fix this?

var elem = $('.curiosa-type');

    elem.each(function( i ) {

        var currentElem = $(this);
        var words = currentElem.text().split(" ");
        var fonts = ['&#39Times&#39', '&#39Arial&#39'];
        currentElem.empty();

        $.each(words, function (i, el) {


            currentElem.append('<span class="word">' + el + '</span>');

            var characters = currentElem.text().split("");

            console.log(characters);

                $.each(characters, function (i, el) {

                    var rand = fonts[Math.floor(Math.random() * fonts.length)];

                    currentElem.append("<span style='font-family:" + rand + "'>" + el + "</span");
                    // check 4 white space
                    if(el.indexOf(' ') >= 0){
                        //console.log(el);
                        currentElem.append('<span class="spacer"></span>');

                    }

                });


        });





    });

Upvotes: 0

Views: 452

Answers (2)

Mitko Delibaltov
Mitko Delibaltov

Reputation: 485

I made a different fiddle but I guess if it works for you it would be easier part to implement it in your code.

I made an array with fonts and splitting each word into a span with word-wrap. With that being done each word is getting a random generated font and words can break into a new lines if there is not enough space.

I don't see a reason for each letter to be in a unique span - that loads a lot of html for no apparent reason.

var words = $("p").text().split(" ");
var fonts = ['courier','sans-serif', 'verdana'];
var color = ['red','green', 'blue'];
$("p").empty();
$.each(words, function(i, v) {
		var rand_font = fonts[Math.floor(Math.random() * fonts.length)];
    var rand_color = color[Math.floor(Math.random() * color.length)];
    $("p").append($("<span style=\"color: "+rand_color+"; font-family:'"+rand_font+"'\">"+v+"</span>"));
});
span {
  word-wrap: break-word;
  padding-right: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>

Upvotes: 0

Kluivert
Kluivert

Reputation: 91

I made some changes on your code, you was emptying currentElem and then reading it's text(was returning empty, of course). I'm building the word container(div) before appending it into the DOM and then append it all to the DOM when it's done.

var elem = $('.curiosa-type');
elem.each(function( i ) {
    var currentElem = $(this);
    var words = currentElem.text().split(" ");
    var fonts = ['&#39Times&#39', '&#39Arial&#39'];
    currentElem.empty();
    $.each(words, function (i, el) {
        console.log(words);
        // currentElem.append('<span class="word">' + el + '</span>'); //doesnt need it
        var characters = el.split('');
        var $div = $('<div>'); // create jQuery Element on fly so we can append to it even when it isn't in the DOM yet
        console.log(characters);
        $.each(characters, function (i, el) {
            var rand = fonts[Math.floor(Math.random() * fonts.length)];
            $div.append("<span style='font-family:" + rand + "'>" + el + "</span");
            // check 4 white space
            if(el.indexOf(' ') >= 0){
                $div.append('<span class="spacer"></span>');
            }
        });
        currentElem.append($div); // append our jQuery Element o the current ".curiosa-type" element
    });
});

Output:

enter image description here

Upvotes: 1

Related Questions