Half-Style Demo

Style each half or third of a character, vertically or horizontally, independently and individually by CSS. Written by Arbel Hakopian.

by arbel

HTML

<h4>class: <code>hs-horizontal-third</code></h4>
<p>Single Characters:</p>
<span class="halfStyle hs-horizontal-third" data-content="X">X</span>
<span class="halfStyle hs-horizontal-third" data-content="Y">Y</span>
<span class="halfStyle hs-horizontal-third" data-content="Z">Z</span>
<span class="halfStyle hs-horizontal-third" data-content="A">A</span>
<hr/>
<p>Automated on any text:</p>
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
<hr/> On Github <a href="http://github.com/arbelh/HalfStyle">http://github.com/arbelh/HalfStyle</a>

CSS

/* start half-style hs-horizontal-third */

.halfStyle.hs-horizontal-third {
  /* base char and also the bottom 1/3 */
  position: relative;
  display: inline-block;
  font-size: 80px;
  /* or any font size will work */
  color: transparent;
  overflow: hidden;
  white-space: pre;
  /* to preserve the spaces from collapsing */
  color: #f0f;
  text-shadow: 2px 2px 0px #0af;
  /* for demo purposes */
}

.halfStyle.hs-horizontal-third:before {
  /* creates the top 1/3 */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 33.33%;
  content: attr(data-content);
  /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none;
  /* so the base char is selectable by mouse */
  color: #f00;
  /* for demo purposes */
  text-shadow: 2px -2px 0px #fa0;
  /* for demo purposes */
}

.halfStyle.hs-horizontal-third:after {
  /* creates the middle 1/3 */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 66.66%;
  content: attr(data-content);
  /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none;
  /* so the base char is selectable by mouse */
  color: #000;
  /* for demo purposes */
  text-shadow: 2px 2px 0px #af0;
  /* for demo purposes */
}


/* end half-style hs-horizontal-third */

JavaScript

/*!
 * HalfStyle
 * Copyright 2014 Arbel Hakopian
 * Git Repository https://github.com/arbelh/HalfStyle/
 * Licensed under MIT (https://github.com/arbelh/HalfStyle/blob/master/license.md)
 */
jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');

        // Reset output for appending
        halfstyle_output = '';

        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
        }
        // Chrome 59 and above specific fix - Part 1 - Addresses a Chrome bug where Chrome fails to corectly render and repaint pseudo elements - I came up with this fix after many different tests.
        var _applyChromeFix = !!window.chrome && !!navigator.appVersion.match(/.*Chrome\/([0-9\.]+)/) && parseInt(navigator.appVersion.match(/.*Chrome\/([0-9\.]+)/)[1], 10) >= 59;
        if (_applyChromeFix) {
            halfstyle_output += '<style>.halfStyle{}</style>';
        }

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);

        // Chrome 59 and above specific fix - Part 2
        if (_applyChromeFix) {
           ...