The CSS style can be set to a character in vertically half or horizontally half both. Add a class on the text and the class contains CSS style to apply half of the character. The accessibility of the main text is preserved with screen readers for the blind or visually impaired. You need to do the following things to apply CSS to half of a character:
- Procedure to style half of a character or letter.
- Procedure to style part of a character with CSS/JavaScript.
- Procedure to apply CSS to 50% of a character
- You Just need to apply the class .halfStyled to each element, which contains the character you want to be half-styled.
There are two popular ways to style half of a character.
- Using HTML and CSS
- Using HTML, CSS and jQuery
Example 1: This example uses HTML and CSS to style half of character.
html
<!DOCTYPE html><html>
<head>
<title>Half Styled Character</title>
<style type="text/css">
.halfStyled {
position: relative;
font-size: 50px;
display: inline-block;
color: black;
white-space: pre;
overflow: hidden;
}
.halfStyled:before {
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
content: attr(data-content);
height: 50%;
overflow: hidden;
color: green;
}
</style>
</head>
<body>
<center>
<span class="halfStyled" data-content="G">G</span>
<span class="halfStyled" data-content="e">e</span>
<span class="halfStyled" data-content="e">e</span>
<span class="halfStyled" data-content="k">k</span>
<span class="halfStyled" data-content="s">s</span>
<span class="halfStyled" data-content="f">f</span>
<span class="halfStyled" data-content="o">o</span>
<span class="halfStyled" data-content="r">r</span>
<span class="halfStyled" data-content="g">g</span>
<span class="halfStyled" data-content="e">e</span>
<span class="halfStyled" data-content="e">e</span>
<span class="halfStyled" data-content="k">k</span>
<span class="halfStyled" data-content="s">s</span>
<h3>A Computer Science Portal for Geeks</h3>
</center>
</body>
</html>
|
Output:
html
<!DOCTYPE html><html>
<head>
<title>Half Styling Character</title>
<script src=
</script>
<style type="text/css">
.halfStyled {
position: relative;
display: inline-block;
font-size: 80px;
color: black;
overflow: hidden;
white-space: pre;
}
.halfStyled:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 50%;
content: attr(data-content);
overflow: hidden;
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<span class="geeks">GeeksforGeeks</span>
<h3>A Computer Science Portal for Geeks</h3>
<script type="text/javascript">
jQuery(function($) {
var text, chars, $el, i, output;
// Iterate over all class occurrences
$('.geeks').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');
// Set the screen-reader text
$el.html('<span style="position: absolute !important;'+
'clip: rect(1px 1px 1px 1px);' +
'clip: rect(1px, 1px, 1px, 1px);">'
+ text + '</span>');
// Reset output for appending
output = '';
// Iterate over all chars in the text
for (i = 0; i < chars.length; i++) {
// Create a styled element for each character
// and append to container
output += '<span aria-hidden="true" class="halfStyled"'
+ 'data-content="' + chars[i] + '">'
+ chars[i] + '</span>';
}
// Write to DOM only once
$el.append(output);
});
});
</script>
</body>
</html>
|
Output:
Article Tags :
Recommended Articles