javascript tutorial - [Solved-5 Solutions] Apply css to half of a character - javascript - java script - javascript array
Problem:
It is possible to apply css to half of a character?
Solution 1:
- Pure CSS for a Single Character
- JavaScript used for automation across text or multiple characters
- Preserves Text Accessibility for screen readers for the blind or visually impaired
Part 1: Basic Solution
Learn javascript - javascript tutorial - Character - javascript examples - javascript programs
Solution 2:
Webkit (and Chrome) only, though:
h1 {
display: inline-block;
margin: 0; /* for demo snippet */
line-height: 1em; /* for demo snippet */
font-family: helvetica, arial, sans-serif;
font-weight: bold;
font-size: 300px;
background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1>X</h1>
click below button to copy the code. By JavaScript tutorial team
- Visually, all the examples that use two characters (be it via JS, CSS pseudo elements, or just HTML) look fine, but note that that all adds content to the DOM which may cause accessibility--as well as text selection/cut/paste issues.
Solution 3:
HTML:
<div class='split-color'>Two is better than one.</div>
click below button to copy the code. By JavaScript tutorial team
CSS:
.split-color > span {
white-space: pre-line;
position: relative;
color: #409FBF;
}
.split-color > span:before {
content: attr(data-content);
pointer-events: none; /* Prevents events from targeting pseudo-element */
position: absolute;
overflow: hidden;
color: #264A73;
width: 50%;
z-index: 1;
}
click below button to copy the code. By JavaScript tutorial team
To wrap the dynamically generated string, we could use a function like this:
// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) {
var output = [];
str.split('').forEach(function(letter) {
var wrapper = document.createElement('span');
wrapper.dataset.content = wrapper.innerHTML = letter;
output.push(wrapper.outerHTML);
});
return output.join('');
}
// Replace the original text with the split-color text
window.onload = function() {
var el = document.querySelector('.split-color'),
txt = el.innerHTML;
el.innerHTML = wrapString(txt);
}
click below button to copy the code. By JavaScript tutorial team
Solution 4:
- It may be irrelevant, maybe not, but sometime ago, We created a jQuery function that does the same thing, but horizontally.
- We called it "Strippex" For 'stripe'+'text', demo
- I'm not saying this is the solution of any problems, but We already tried to apply css to half of a character, but horizontally, So the idea is the same, the realisation may be horrible, but it works.
Solution 5:
Here an ugly implementation in canvas. We tried this solution, but the results are worse than We expected, so here it is anyway.
Learn javascript - javascript tutorial - - javascript examples - javascript programs
Learn javascript - javascript tutorial - - javascript examples - javascript programs
$(function(){
$("div").each(function(){
var CHARS = $(this).text().split('');
$(this).html("");
$.each(CHARS,function(index, char){
var canvas = $("<canvas />")
.css("width", "40px")
.css("height", "40px")
.get(0);
$("div").append(canvas);
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 130, 0);
gradient.addColorStop("0", "blue");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("0.51", "red");
gradient.addColorStop("1.0", "red");
ctx.font = '130pt Calibri';
ctx.fillStyle = gradient;
ctx.fillText(char, 10, 130);
});
});
});