Styling Half of a Character Using CSS and JavaScript

Introduction

The challenge of styling half of a character, such as making one half transparent or a different color, arises in various web design scenarios. Traditional methods might involve images, but for dynamic text, a CSS or JavaScript-based solution is preferable. This article delves into a comprehensive approach using CSS pseudo-elements and JavaScript automation, inspired by the HalfStyle plugin.

Basic CSS Solution

For a single character, a pure CSS method can be employed. The key is to use the .halfStyle class with pseudo-elements. The base character is styled normally, and a pseudo-element covers half of it.

.halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px;
  color: black;
  overflow: hidden;
  white-space: pre;
}

.halfStyle:before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  content: attr(data-content);
  overflow: hidden;
  color: #f00;
}

In HTML, use: <span class="halfStyle" data-content="X">X</span>. The data-content attribute ensures dynamic content for the pseudo-element.

Advanced Solutions

To style left and right parts independently, use both :before and :after pseudo-elements. For example, the left half can be red, and the right half black, with text shadows for enhanced effects.

.halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px;
  color: transparent;
  overflow: hidden;
  white-space: pre;
}

.halfStyle:before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 50%;
  content: attr(data-content);
  overflow: hidden;
  color: #f00;
  text-shadow: 2px -2px 0px #af0;
}

.halfStyle:after {
  display: block;
  direction: rtl;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 50%;
  content: attr(data-content);
  overflow: hidden;
  color: #000;
  text-shadow: 2px 2px 0px #0af;
}

Variations include horizontal splits and dividing characters into thirds, achieved by adjusting width or height properties for more complex styling.

JavaScript Automation

For dynamic text, JavaScript can automate the process. Using jQuery, split the text into characters and wrap each in a .halfStyle span, ensuring accessibility.

jQuery(function($) {
  $('.textToHalfStyle').each(function() {
    var $el = $(this);
    var text = $el.text();
    var chars = text.split('');
    $el.html('<span style="position: absolute !important; clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
    var output = '';
    for (var i = 0; i < chars.length; i++) {
      output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }
    $el.append(output);
  });
});

This script preserves accessibility by hiding the original text for screen readers and adding aria-hidden attributes.

Production Implementation

To use multiple style sets on the same page, define custom classes and use the data-halfstyle attribute. The plugin handles the application automatically.

.halfStyle.hs-custom {
  position: relative;
  display: inline-block;
  font-size: 80px;
  color: #000;
  overflow: hidden;
  white-space: pre;
}

.halfStyle.hs-custom:before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 50%;
  content: attr(data-content);
  pointer-events: none;
  overflow: hidden;
  color: #f00;
}

In HTML, use: <span class="textToHalfStyle" data-halfstyle="hs-custom">Text content</span> to apply the custom style.

Conclusion

Styling half of a character is achievable with CSS and JavaScript, offering flexibility for dynamic content while maintaining accessibility. This technique can be extended for creative designs beyond simple splits, making it suitable for various web applications.