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).

---

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;
}

Answer 1

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 2

We can use a trick to do it. But watch for browser compatibility. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

p{
  text-transform: lowercase;
 }

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

Eg:

this is some text. This is SOME text. this IS some TEXT.

Output -> This is some text