germanny
5/23/2012 - 1:50 AM

Simple Clean JS script to create Faux Small Caps

Simple Clean JS script to create Faux Small Caps

.sm-cap {
	text-transform: uppercase; 
}
.sm-cap span {
	display: inline-block;        
}
.sm-cap span:first-letter {
	font-size: 1.2em;
}
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>';
}
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.