Half-styled Typography

http://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character/23569891#23569891

by Ken Watanabe

HTML

On Github <a href="http://github.com/arbelh/HalfStyle">http://github.com/arbelh/HalfStyle</a>
<hr/>
<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>
<hr/>
On Github <a href="http://github.com/arbelh/HalfStyle">http://github.com/arbelh/HalfStyle</a>

CSS

/*!
* HalfStyle
* Copyright 2014 Arbel Hakopian
* Licensed under MIT (https://github.com/arbelh/HalfStyle/blob/master/license.md)
*/
.halfStyle {
    position:relative;
    display:inline-block;
    width:1;
    font-size:80px;
    color: #333;
    overflow:hidden;
    white-space: pre;
    font-weight: 100;
    font-family: helvetica;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #333; /* for demo purposes */
    font-weight: bold;
    font-family: times;
}

JavaScript

/*!
* HalfStyle
* Copyright 2014 Arbel Hakopian
* Licensed under MIT (https://github.com/arbelh/HalfStyle/blob/master/license.md)
*/
jQuery(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 for the blind or visually impaired
        $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);
    });
});