Force capitalised input to title case in CSS using text-transform

Question

I'm creating a theme for a CMS, and only have the ability to change the CSS associated with the page (no Javascript, PHP, etc).

Is there a way to change this list of users that we have:

JOHN SMITH
DAVID JONES
...

into proper title case (John Smith, etc) using CSS?

text-transform: lowercase; works ok (john smith, etc) but text-transform: capitalize; does nothing (remains capitalised).

Cheers,

Alex

---

As requested, the HTML is:

<tr> [...] <td class="cell c1">ALEXANDER MULLER</td> [...] </tr>
<tr> [...] <td class="cell c1">JOHN SMITH</td> [...] </tr>

And the CSS is:

td {
    text-transform: capitalize;
}

---

On an unrelated note, this is the first time I've ever used Stack Overflow - and you guys are more than awesome, seriously... many thanks, it's greatly appreciated :)

Answer 1

This shows that text-transform: capitalize is working for me in IE, Chrome and FF for Windows:

http://www.tizag.com/cssT/text.php

What are you using to try it out in?

Answer 2

text-transform: capitalize; only modifies the first letter of each word, so if the first letter of a word is already capitalized, text-transform skips that word.

Example:

JoHN smith will become JoHN Smith

There is no way to do title-casing using only CSS unless all of your words are all lowercase.

Answer 3

In your situation, the only way I've ever got this working is with the use of javascript. As the other answers state, the capitalize transform doesn't do the trick.

I think that if this is a requirement then you'll have to figure out a way to sanitize the names upstream. Either capitalize them correctly, or convert them to lower case so that the CSS transform will work as expected.

Andrew

Answer 4

What your're experiencing is how it works. This is from the spec:

"capitalize Puts the first character of each word in uppercase; other characters are unaffected."

Now, you can do (I'm assuming you have a list with list item <li> tags:

li:first-letter {
    text-transform: uppercase;
}

Along with your lowercase of the li, but in combination that will only affect the first words of each line, so you get:

John smith
David jones

I don't believe there's a pure CSS solution for you here. This is tricky because of names like John McCain, Oscar de la Hoya, John Smith PhD, Jane Smith MD, and people who prefer lowercase like danah boyd or e.e. cummings. There's always exceptions when you try to use Title Case. These exceptions will cause you headaches. If you don't have control over the content, the content will give you headaches.