text-transform: capitalize not working

[javajoemorgan]

I have some text that is coming in all caps. I want to drop it to sentence or camel case. According to what I am reading, the "text-transform" property set to "capitalize" should do it, except it doesn't seem to work when the text is in all caps to start with.I actually tested in the the W3Schools "try-it-out" section for the text-transform.What is the solution.... and JavaScript is a 4 letter word to me

[newseed]

Not exactly what you are saying here. Are you trying to make a line of text to be all caps whereas the first letter of each word is larger than the other? Maybe you are referring to font-variant: small-caps;

<h1>This Is The Heading Title</h1>

CSS:

h1 { font-variant: small-caps;}

If you want all the text to be the same height, then just don't cap the first letter of each word.If you want to place a phrase within the a <p> </p> tag with some of the text being all caps but the same height as the normal text, you can do something like this:

<p>This is the paragraph with <span>capital words here</span></p>

CSS:

p { font-size 12px; }span { font-variant: small-caps;}

You can add a font-size to the span element to adjust the height so it matches the paragraph height.

[jeffman]

So the text in all-caps is coming from somewhere like a database? And it's stored there in all-caps?If you're getting it from outside your page and putting it inside your page, doesn't that mean you're using some server-side language like PHP or perl to construct the page? If so, why not let the page constructor change the caps before it ever reaches your client?I think we're all confused.

[javajoemorgan]

I think we're all confused.

I'm with ya! Actually, somewhat similar to what you said. The stuff is coming to me via XML and being transformed via XSLT..... I was hoping to avoid seriously crazy XSLT, which is the only "code" (if that's what you call it), I have access to.So, I get something like: KING KONG LOVES GODZILLAAnd I'd "like" it to display like: King Kong Loves GodzillaIf the case comes in lower case, then the "text-transform: capitalize" works just fine. However, if it is all caps to start with then it doesn't work.It turns out the coders of CSS engines didn't take this into consideration or decided not to deal with it properly for some good reason (not!).... but... the way it works is that when the "text-transform: capitalize" is applied, the CSS engine ONLY modifies the first character of each word (and probably only if necessary). It DOES NOT examine the other characters. I proved this with a test of "thIs iS a teSt".... with "text-transform: capitalize" applied, it results in "ThIs IS A TeSt".So, I think what I'm going to do is more work than what I "should" be doing in what should be a mature, computerized, automated, everything-should-be-easy world... I'll use XSLT to drop everything to lower case, then apply the CSS "text-transform: capitalize".

[jeffman]

Yeah, it's probably easier to do it that way than to build a client-side script just for one function. (I too experimented with those CSS transformations, and it seems just as you wrote. I even tried combinations and spans within <p>s, but none of that worked. CSS just isn't procedural.)

[javajoemorgan]

I even tried combinations and spans within <p>s, but none of that worked.

Yes, I tried that as well, but since CSS is, well, "Cascading", the last "text-transform" prevails, and each CSS directive is only applied once. It really makes sense for efficiency... I just wish they had coded the "capitalize" form correctly. "uppercase" and "lowercase" address each character. "capitalize" just does half the job in my opinion.One of these days, they'll learn to call me for my opinion...

[Ingolme]

Technically it's correct: Capitalize. It makes the first letter a capital letter. There's no reason why it actually should make the rest of them lower case. Imagine you DID want to keep a certain uppercase letter in the word you were capitalizing.For example, somebody writes "mcDonalds" and wants it capitalized.

[boen_robot]

Why not use XSLT to convert the text into lowercase, and then use CSS to capitalize it? To do so, use the translate() function like so:

translate($string,'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')

replacing $string with the actual path to the string to be value-of-ed.If your XSLT processor is an XSLT 2.0 processor, or a processor implementing EXSLT's regexp:replace() function, you could even do the capitalization from within XSLT, not leaving anything to changes.

[jeffman]

Regular expressions: The Final Frontier . . .