Is there a way to style all uppercase letters in CSS?

Question

I want to rock old-school (like, say around 1500) and have all the uppercase letters in a text set in roman, and all lowercase set in italics.

And here are the criteria:
- No manual markup.
- No JS.
- Must be semantic and valid.


(Oh, and yes, I do know about readability issues, and I do know it's not the 1500s still. Leave that aside.)

UPDATE: As for the text-transform: That's not what I want to do. Almost however.

I want to do a:

[all uppercase letters] {
font-style : normal;
}

[all lowercase letters] {
font-style : italic;
}

As for editors: Now what an WYSIWYG-editor will do, is that it will take the uppercase-letters (and though I'm not sure, my guess is that you'd have to select each letter individually) and add some markup to that, which it would then style. I want to do without the markup.

I think I'm looking for a pseudo-class of some kind, or some really simple JS-solution (with a nice fallback)...

Sorry, I keep replying to every answer, but Mr. Gs answer isn't quite correct.

Though you cannot add several different styles to a single object, you can assign different styles to different PARTS of that object.

Take the text-box (say, a DIV), you could then use a :first-line pseudo-class to change the style of the first line of the first P-element of that DIV.

Answer 1

text-transform:uppercase will work in the majority of browsers, but not all. The platform and font also has to support that property.

Edit:

In response to your edit (thanks for the clarification), to do this with JavaScript would be cumbersome but not impossible. The script would probably also run very slowly on all but the latest computers, which would have the effect on the end-user of the page freezing for a moment after it has loaded, and then all of the lowercase text changing to italics.

function FormatText(ele)
{
for(i=0;i {
if(ele.childNodes[i].innerText)
{
/* if we get to this point, that means the current HTML node we are parsing has text in it. we want to scan the contents and insert an Italics node () before the first lowercase letter we find and close the tag before the first uppercase we find. Repeat until we hit the end of the text inside this node. We determine whether it is uppercase or lowercase by examining its ASCII code */
}
}
}

Or, I would just recommend doing something like this in CSS:

* {font-style:italic;}
.ucletter {font-style:normal;}

In your HTML, just put a around each uppercase letter.

Edit again:

Also, you can easily assign multiple classes to a single object. Just put a space between each one:

Answer 2

yes dear u can create CSS for uppercase letter their r several CSS editors from where u can create ur CSS the best one is Macromedia Dreamwever u go for that u can create dynamic css for ur page

may this will help u

bye

Answer 3

properly for one element do no longer ignore to place a semicolon after the flow: left in you lol type.... uhm, in line with threat delete the flow: left; then it won't ever be contained in the wooh i don't be attentive to lots approximately css so as this is basically my take

Answer 4

hi,

you can create styles as like you. but u cant assign different CSS styles to a single object (like textbox)... So I suggested you to change ur opinion...