Welcome to WebmasterWorld Guest from 126.96.36.199
Forum Moderators: not2easy
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.
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.
it's exactly treated the same way as the CSS code below:
The last declaration will be put into effect.
I don't think that's really how it should work
From the CSS specs on text-tranform [w3.org]...
Puts the first character of each word in uppercase; other characters are unaffected.
If they enter them in caps, that what they'll get.
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.
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.
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...