JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<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 on any text:</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 {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
    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: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
    display:block;
    direction: rtl; /* very important, will make the width to start from right */
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    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: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

JavaScript

$(document).ready(function(){
	var textToHalfStyle = $('.textToHalfStyle').text();
	var textToHalfStyleChars = textToHalfStyle.split('');
    var hiddenTextForAccessibility = $('.textToHalfStyle').text(); // preserve text for accessibility, like audio screen readers or brail readers for the blind or visually impaired
	$('.textToHalfStyle').html('');
    $('.textToHalfStyle').append('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + hiddenTextForAccessibility + '</span>'); //append the text for accessibility
	$.each(textToHalfStyleChars, function (i, v) { //for accessibility, aria-hidden="true" will prevent the text from being seen by screen readers
	    $('.textToHalfStyle').append('<span aria-hidden="true" class="halfStyle" data-content="' + v + '">' + v + '</span>');
	});
});