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

Can you paste the html and css that you're using? – Paul Sheldrake Jun 23 '09 at 16:26 — Paul Sheldrake, Jun 23 '09 at 16:26

jimyi · Accepted Answer · 2009-06-23T16:42:09.800

23

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.

edited Jun 23 '09 at 16:42

answered Jun 23 '09 at 16:36

jimyi

30,733
3
38
34

Ah, well - to everybody, thanks for taking the time to respond anyway. – alexmuller Jun 23 '09 at 22:48
This answer is correct if your solution can only use CSS. But if the context is a Wordpress theme, you could easily achieve the desired result by adding `strtolower( $text )` in the PHP template then using `text-transform : capitalize;`. This will generate lowercase markup that you can then convert to title case with css. – emersonthis Dec 10 '12 at 00:47

score 8 · Answer 2 · answered Sep 15 '14 at 13:46

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

artlung · Answer 3 · 2009-06-23T17:07:15.847

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.

score 3 · Answer 4 · edited Jun 23 '09 at 16:49

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

edited Jun 23 '09 at 16:49

Larsenal

49,878
43
152
220

answered Jun 23 '09 at 16:47

Andrew Rollings

14,340
7
51
50

score 2 · Answer 5 · answered Jul 03 '12 at 18:19

2

I have faced this issue numerous times when the text comes in all uppercase from a CMS or database. What I do is use jQuery .each function to iterate through the selected elements, apply a javascript toLowerCase method to each, then use CSS to set text-transform: capitalize.

Works every time!

answered Jul 03 '12 at 18:19

Jim Merrikin

21
1

1

I should have mentioned that this method will convert any and all text to title case. It will change things like "IBM" to "Ibm", or "McDonalds" to "Mcdonalds". In order to exclude those scenarios you will have to either use a regex qualifier and/or check each entry against a database or dataset. – Jim Merrikin Jul 03 '12 at 18:28

score 0 · Answer 6 · answered Jun 23 '09 at 16:23

0

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?

answered Jun 23 '09 at 16:23

kemiller2002

113,795
27
197
251

score 0 · Answer 7 · answered May 14 '19 at 09:00

0

I know the question was about only the CSS way. Since most of the views are with models nowadays, this might help somebody.

   <div style="text-transform: capitalize;">
      {{ person.firstName.toLowerCase() }}
   </div>

answered May 14 '19 at 09:00

Ashok M A

478
6
14

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

7 Answers7

Linked