Kishlin Kishlin - 1 month ago 7
CSS Question

Color a bloc text to make it look like the French flag

I have a given bloc of text in a webpage, and I want to make it look like the French flag (Blue / White / Red) using javascript and JQuery.

Right now I tried the following code : JSFiddle

Or if you're more into Stackoverflow snippets :



jQuery(function ($) {
// Calculates the text width in <p>
var html_cur = $('.loremipsum').html();
var html_calc = '<span>' + html_cur + '</span>';
$('.loremipsum').html(html_calc);
var width = $('.loremipsum').find('span:first').width();

var color_width = Math.floor(width / 3), // Width of each color
text = $( ".loremipsum" ).text(), // Text of <p>
array = [], // Array containing each sentences
sentence = '', // Current sentence
sentence_width = 0; // Current sentence width

for(var i = 0; i < text.length; i++) {
// Gets the char in the text
var char = text[i];

// Calulates actual char's width in pixels
var html_calc = '<span>' + char + '</span>';
$('.loremipsum').html(html_calc);
var width = $('.loremipsum').find('span:first').width();

// Apply to variables
sentence_width += width;
sentence += char;

// If sentence is long enough,
// resets the variables to start a new sentence and add it to the array
// Added the -10 to make sure sentences never overflow the color_width
// but looks like it's not enough
if(sentence_width >= color_width - 10) {
array.push(sentence);
sentence = '';
sentence_width = 0;
}
}

// Variables for final html
var final_html = '',
color = 0;

// Loops through the sentences and add them in between the correct color
final_html = '<span class="color-0">';
for (var i = 0, j = array.length; i < j; i++) {
final_html += array[i];
color = (color == 2) ? 0 : color + 1;
final_html += '</span><span class="color-'+color+'">';
}
final_html += '</span>';

// Display text on screen
$('.loremipsum').html(final_html);
});

.loremipsum {
border-radius: 5px;
font-size: 12px;
width: 300px;
}

.color-0 {
color : blue;
}

.color-1 {
color : white;
}

.color-2 {
color : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="loremipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>





So basically the routine is as follows:


  1. Calculate the width of the text in the p element, and divide it by 3 to get how wide each color should be.

  2. Split the text into sentences, which will be stocked into an array. Each sentence should have its width equal to or a bit inferior to a color's width. This is done by iterating through the chars in the text, and calculate the width of each character to know when to split the text into a new sentence.

  3. Generate the final text for the p element. Meaning encapsulating each sentence within a span element with the appropriate color (blue, white, red, repeat).



Problem is, sentences tend to be a bit longer than what they should be, so the color changes too lately, resulting in an offset increasing at each new line.

Does anyone have any idea to make this look like an actual BLUE/WHITE/RED text bloc?

Thanks for your help ! :)

Answer

Using @DaniP 's comment

He sets a background gradient using css and -webkit-background-clip

body { background-color: lightgray; } /* Just for easier viewing */
.loremipsum {
  font-size: 15px;
  background: -webkit-linear-gradient(0, mediumblue 33.3%, white 33.3%, white 66.6%, red 66.6%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<p class="loremipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>