Problem with text-transform: capitalize

[kelly5518]

Hi,

I'm having a problem getting the contents of a div capitalized on the first letter of each word. It seems to work when the entered text is a mix of upper and lower case...or if the text that's entered is all lower case, but when it's entered all in uppercase, it leaves it that way (all caps) and doesn't change it to only capitalize the first letter.

Here's my style code:

#announcements {text-align: center; font-weight: bold; text-transform: capitalize; background-color: #F8B969}

and in the div I have:

<div id="announcements">BLAH, BLAH, BLAH</div>

Thanks for any tips.

 

[Vragabond]

Interestingly enough, it does that. I am wondering why do you need to use the text transform. Can't you simply write out announcements in First Letter Caps Only? If you are dealing with server side inputs, I would rather do the transformation on the server.

 

[BabyJeffy]

Interestingly enough (if your browser supports it) there is a solution:

<style type="text/css">
#announcements {text-transform: lowercase;}
#announcements:first-letter { text-transform: uppercase; }
</style>
...
<div id="announcements">BLAH, BLAH, BLAH</div>

That works in Safari and Firefox on the Mac to produce the desired result.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[kelly5518]

Hi there,

Jeff, at first I thought you had solved my problem but your solution only capitalizes the first letter of the first word in the div. I'm trying to capitalize the first letter of every word in the div.

Vragabond, this is a browser based updater ... the program is written in perl. I've noticed the client is posting announcements in all caps, which looks like ****.

I guess I could look into doing the transformation server side, but I hate to mess with it since I'm not very familiar with perl.

Thank you both for your help.

Any other suggestions?

 

[Vragabond]

I have used in my time VBScript, JScript and PHP and none of those had a really difficult functions to change case of the letters in a string. I am sure helpful bunch in perl forum would help you rewrite the script so that it capitalizes the announcement correctly.

 

[kelly5518]

Thanks Vragabond, I think I'll post over in the perl forum.

I know converting the case is normally a simple function in PHP and ASP, which I've used, but this particular program seems like it's using regular expressions and a lot of other stuff going on that I don't want to take any chances messing it up.

Thanks again.

 

[LFI]

The reason it doesn't work when all caps are entered is PROBABLY because whoever programmed text-transform probably thought that folks who entered acronyms (DOE, NASA, SCUBA, ...) would probably not like to see their entry be messed with (Doe, Nasa, Scuba, ...).

Can you just wait until the user has moved away from the form element (using the onblur event to capture this), then LOWER-CASE all the text and then text-transform it?

onBlur="this.value=this.value.toLowerCase();this.style.textTransform='capitalize';"

--Dave

 

[kelly5518]

Good point about acronyms, Dave. For this project I solved it server side.

I prefer to not rely on javascript, but I guess it's the only option other than server side.

Thanks ...