BUG! text-transform: capitalize

Doesn't work when all caps entered

[kelly5518]

Hi,

I have a script that updates an announcement section on a page. I've created a div in the html file that specifies text-transform: capitalize because I want to capitalize the first letter of each word in the div.

The problem I'm running into is that the person doing the announcements is entering the text in all caps, and I'm finding that text-transform: capitalize doesn't work unless the text is entered in all lowercase.

Has anyone else run into this problem, and is there a workaround? (So far I've resorted to a server-side solution, but I'd like to know if there's a css fix for this.)

Thanks a bunch for any suggestions.

[rjohara]

Try putting two rules in sequence in your stylesheet:

div.announcement { text-transform: lowercase; }

div.announcement { text-transform: capitalize; }

As the page is being processed, that should cause the div first to be converted to lowercase, and then each word in the div to be capitalized.

[jetboy]

How about writing a JavaScript function that's triggered onload to step through the DOM looking for any element that has text-transform set to capitalize? You could then rewrite the content using the toLowerCase() method.

According to the W3C spec, all text-transform: capitalize is supposed to do is capitalize the first letter of every word, not make all the other letters lowercase. So I don't think you can categorize this as a bug.

[kelly5518]

Thanks rjohara, but I had already tried that and the second div overrides the first one, so the first one isn't applied.

Jetboy, I see your point about it not necessarily being a bug since it does capitalize the first letter, but I don't think that's really how it should work. I would think that most people would want to use it the way I'm trying to use it and for headings, etc. As for javascript, I'd rather just use a server side solution for this case, although I can see how it would be useful if the text wasn't dynamic.

Thanks!

[Aidin Sabetian]

Initially you have assigned the value "lowercase" to the property "text-transform". and then you have changed it's value to:"capitalize".

it's exactly treated the same way as the CSS code below:

CSS:

ul {
list-style:square;
list-style:disc;
list-style:circle;
}

The last declaration will be put into effect.

[createErrorMsg]

I don't think that's really how it should work

From the CSS specs on text-tranform [w3.org]...

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

My bold.

If they enter them in caps, that what they'll get.

cEM

[johnl]

hi,
sometimes the obvious is too near to see. try:

 .mydiv { text-transform: lowercase; }
 .mydiv:first-letter {text-transform: capitalize;}

happy coding!

[kelly5518]

Thanks John, but that doesn't solve my problem because I want every word in the div capitalized, but the :first-letter pseudo-element only makes the first letter of the div capitalized.

Thanks for the suggestion though.

kelly

[johnl]

hi kelly,
sorry that i didn't read your question thoroughly (but at least this proves the first sentence in my post above..).

if you want to capitalize each single word in the div, i see no way to do this in css only. perhaps you can do it in the script that updates the announcement section. to be more explicit one would have to know which kind of script you use.

[createErrorMsg]

if you want to capitalize each single word in the div, i see no way to do this in css only.

Please note that this is only a problem because the individual is entering the data wrong. The CSS works fine, and that particular property exists to do exactly what it is that is being sought. It does not, however, include an initial step of first converting text to lowercase, and then capitalizing the first letter. Proper data entry is not the responsibility of a styling language.

Perhaps what's needed is some data checking at the point of entry so that ALL CAPS text cannot be entered into the site. This sort of checking could take any number of forms, from a script in the CMS that parses the entered string and converts it all to lowercase letters right down to a friendly email asking users to turn off caps-lock while submitting information.

cEM

[jetboy]

Agreed.

Kelly, even if you could manage what you're trying to achieve, it has flaws. If I wanted a title such as:

'cEM codes CSS'

it would get changed to:

'Cem Codes Css'

You really need to fix this at the source.

[kelly5518]

I agree, however I think that the original idea behind this property is that something like headings would be uniform across a site with every word in a heading capitalized rather than all caps, etc. which is what I'm trying to achieve.

I agree it doesn't account for acronyms or other cases where you DO want all caps, but in my opinion was intended for headings, and should make the rest of the word lower case, otherwise loses its usefulness. I really can't think of any reason to have this property other than for the way I'm trying to use it.

[bedlam]

Something else that no one has mentioned (though cEM and Jetboy have alluded to it obliquely) is that it's actually pretty uncommon to need the kind of undifferentiated capitalization [google.com] (or 'sentence case') typically provided by css or scripts.

Some styleguides do recommend the capitalization of every word in a title, but it's actually much more common to capitalize a subset such as, for example, all words but prepositions. Many or most newspapers capitalize only the first letter of a headline plus the initial letters of all proper nouns. Where newspapers and similar publications depart from these styles, they generally go directly to all-uppercase.

As I've mentioned before, css's typographical tools are in some ways woefully limited, but I agree with cEM and Jetboy - the only widely available technology adequate to proper capitalization in this context is HumanBrain 1.0...

-B

[sldesigns]

I've used text-transform:uppercase

is there a difference between an uppercase declaration and a capitalize one?