Question

I was wondering if there was any way using only CSS, (and this CAN be browser specific CSS) to convert all uppercase text to words that are only initially capitalized for example:

I YELL WITH MY KEYBOARD

would be converted to:

I Yell With My Keyboard

EDIT: I realized I wasn’t clear enough in my question, the text was entered capitalized, not initially lowercase, text-transform: capitalize doesn’t work on data that has been entered like this it seems.

Answer 1

There’s a few things you can do with CSS for text transformations, here’s all of them.

.Capitalize
{ text-transform: capitalize }

.Uppercase
{ text-transform: uppercase }

.Lowercase
{ text-transform: lowercase }

.Nothing
{ text-transform: none }

Unfortunately there is no Camel Case text-transform.

You could always use Javascript to transform the text appropriately or if you are using a scripting language such as PHP or ASP then change it in there.

Here’s an example taken from the strtoupper PHP doc page:

function strtocamel($str, $capitalizeFirst = true, $allowed = 'A-Za-z0-9') {
    return preg_replace(
        array(
            '/([A-Z][a-z])/e', // all occurances of caps followed by lowers
            '/([a-zA-Z])([a-zA-Z]*)/e', // all occurances of words w/ first char captured separately
            '/[^'.$allowed.']+/e', // all non allowed chars (non alpha numerics, by default)
            '/^([a-zA-Z])/e' // first alpha char
        ),
        array(
            '" ".$1', // add spaces
            'strtoupper("$1").strtolower("$2")', // capitalize first, lower the rest
            '', // delete undesired chars
            'strto'.($capitalizeFirst ? 'upper' : 'lower').'("$1")' // force first char to upper or lower
        ),
        $str
    );
}