How do I change the size of text between capital and lowercase letters?
Is it possible to change the size of text based on whether it is a capital letter or if it is a lowercase letter within HTML/CSS? I am working with a font called Staatliches that only has uppercase letters, but I would like for the lowercase letters to be slightly smaller than the capital letters within the styling of the text. Is it possible to make this change within the CSS? Thank you!
There's not a wealth of character specific css selectors (like p::first-letter), so I think you're best bet would be to use JavaScript to execute some regex matching similar to ncubica's solution here and wrap the capital letters in a their own span.
Working Example Below:
function wrapCapsWithSpan (className) {
var regex = new RegExp(/[A-Z]+/g); //matches on groups of capital letters, remove the '+' to wrap individually
let largeCaps = document.querySelectorAll('.staatliches')
return [...largeCaps].map((p) => {
p.innerHTML = p.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
});
};
window.onload = wrapCapsWithSpan("biggest-caps");.staatliches {
text-transform: uppercase; // simulating Staatliches font
font-size: 10px;
}
.biggest-caps {
font-size: 40px;
}<p class="staatliches">Large CAPITALS BIGgER</p>
<p class="staatliches">Second Paragraph!</p>