Is it possible to apply CSS to half of a character? Is it possible to apply CSS to half of a character? javascript javascript

Is it possible to apply CSS to half of a character?


javascript html css

Now on GitHub as a Plugin!

enter image description here Feel free to fork and improve.

Demo | Download Zip | Half-Style.com (Redirects to GitHub)

  • 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 visuallyimpaired

Part 1: Basic Solution

Half Style on text

Demo: http://jsfiddle.net/arbel/pd9yB/1694/

This works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.

Also, the accessibility of the original text is preserved for screen readers for the blind or visually impaired.

Explanation for a single character:

Pure CSS. All you need to do is to apply .halfStyle class to each element that contains the character you want to be half-styled.

For each span element containing the character, you can create a data attribute, for example here data-content="X", and on the pseudo element use content: attr(data-content); so the .halfStyle:before class will be dynamic and you won't need to hard code it for every instance.

Explanation for any text:

Simply add textToHalfStyle class to the element containing the text.

// jQuery for automated modejQuery(function($) {    var text, chars, $el, i, output;    // Iterate over all class occurences    $('.textToHalfStyle').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="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';    }    // Write to DOM only once    $el.append(output);  });});
.halfStyle {    position: relative;    display: inline-block;    font-size: 80px; /* or any font size will work */    color: black; /* or transparent, any color */    overflow: hidden;    white-space: pre; /* to preserve the spaces from collapsing */}.halfStyle:before {    display: block;    z-index: 1;    position: absolute;    top: 0;    left: 0;    width: 50%;    content: attr(data-content); /* dynamic content for the pseudo element */    overflow: hidden;    color: #f00;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><p>Single Characters:</p><span class="halfStyle" data-content="X">X</span><span class="halfStyle" data-content="Y">Y</span><span class="halfStyle" data-content="Z">Z</span><span class="halfStyle" data-content="A">A</span><hr/><p>Automated:</p><span class="textToHalfStyle">Half-style, please.</span>
Expand snippet