Imagine you have a string of text. Each letter in that string should be assigned a random font from an array.
To achieve this, I enclosed each letter within a span and randomized the font-family.
The problem with this method is word-wrap. When a sentence wraps onto a new line, individual letters break to the next line.
To solve this issue, I plan to wrap each word in a span and apply word-wrap on that span.
This means every word will have its own span. Additionally, every letter within each word will also be enclosed in a span.
I could really use some assistance with this. The example below outputs all letters and words. How can I rectify this?
var elem = $('.curiosa-type');
elem.each(function( i ) {
var currentElem = $(this);
var words = currentElem.text().split(" ");
var fonts = [''Times'', ''Arial''];
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>');
}
});
});
});