Simple Clean JS script to create Faux Small Caps

readme

I needed to create some faux small caps that were only slightly smaller than the full cap. Font-variant was too drastic so instead I wrapped each word in a <span> set the span to inline-block and used :first-letter to increase the font-size of the first letter in each word.

script.js

var spanWrap = document.getElementsByClassName('sm-cap');
for(var i=0; i < spanWrap.length; i++) {
	var t = spanWrap[i];
	t.innerHTML = '<span>' + t.innerHTML . split(' ') . join('</span> <span>') +  '</span>';
}

style.css

.sm-cap {
	text-transform: uppercase; 
}
.sm-cap span {
	display: inline-block;        
}
.sm-cap span:first-letter {
	font-size: 1.2em;
}