Lower case all then capitalize - pure CSS

Question

I saw this topic here: First lowercase the text then capitalize it. Is it possible with CSS?

But it wasn't pure CSS. I have a div that contains this text:

<div>
RaWr rAwR
</div>

I want to use css to make it look like "Rawr Rawr". Cut if I just to text-transform capitalize it makes it "RaWr RAwR", the already uppercase letters remain upper case. So I need to lower case it all first then capitalize, is the solution to wrap it in a div?

I tried wrapping it in another div but it didnt work:

<style>
    #test3 { text-transform: lowercase; }
    #test3 div { text-transform: capitalize; }
</style>

<div id="test3"><div>RaWr rAwR</div></div>

As the comments in your linked question state, there is no way of doing this with pure CSS. You will need to use Javascript. — Curtis, Feb 17 '14 at 11:11
yep i tried it man, i was wondering if there was any new ways, bisdato gave intresting solution below — Noitidart, Feb 17 '14 at 11:19

score 24 · Answer 1 · edited Jan 20 '20 at 21:29

24

This should do it when you have the single words in different div's

#test3 { text-transform: lowercase; }

#test3::first-letter { text-transform: uppercase; }


<div id="test3">haLLo</div>

edited Jan 20 '20 at 21:29

HankScorpio

3,612
15
27

answered Feb 17 '14 at 11:14

bdart

745
6
18

1

Only works for the first letter though `Rawr rawr` not `Rawr Rawr`. – AfromanJ Feb 17 '14 at 11:15
I don't think it will work if there are multiple words inside div – Yogesh Feb 17 '14 at 11:15
2

Ah this is nice! At least it gets it if it has one word. No need for a wrap on this one either I like it. Ill keep this one in mind for future but it wont help me right now :( Still +1 – Noitidart Feb 17 '14 at 11:19
This helped me in my case, thanks! – catch22 Jan 14 '16 at 17:22
2

it should be '#test3::first-letter {' – François Romain Mar 03 '16 at 11:22
This should be accepted answer – IntoTheDeep Jan 31 '18 at 09:09
I agree this answer is more useful than the accepted answer, but it also doesn't quite answer the question. As Noitidart mentions this will only work if there's only 1 word in the element. – HankScorpio Jan 20 '20 at 21:30

Jordan Gray · Accepted Answer · 2014-02-17T13:05:40.880

Sadly, you cannot do this with pure CSS. For now your best hope is to either rewrite text to avoid medial/final capitals or use JavaScript. (Yes, my eyes are rolling too.)

Your suggested approach doesn't work because only one text-transform property value applies to an element at a time. When you specify something like…

#parent { text-transform: lowercase; }
#parent #child { text-transform: capitalize; }

…the value of text-transform on the child element is now capitalize, and nothing else. This is the only transformation applied to that element.

There is a draft proposal to allow authors to define custom mapping tables with an @text-transform rule, but as it stands I doubt it would work for this scenario. The problem is that the scope descriptor (where in a word the transformation applies) only takes one value—you could define a transformation on the whole word or some combination of the start, end or middle parts of a word, but it's not obvious if you could have different transformations for each part.

This seems to be acknowledged in Issue 8 on the wiki draft proposal, and multiple transforms were discussed a couple of years back on www-style. In that thread it is suggested that only a single text-transform value should be allowed on an element, and that combining should be done in the @text-transform rule; however, the draft spec notes:

If the text-transforms referred to have a different scope than the scope specified in the text-transform that refers to them, they apply at the intersection of the two scopes.

So a rule like this wouldn't work:

@text-transform lowercase-then-capitalize {
    transformation: lowercase, "a-z" to "A-Z" single;
    scope: initial;
}

I can see three obvious solutions:

allow multiple scope values to be specified in the @text-transform rule;
add a descriptor to inherit a previous transformation without overriding its scope value; or
permit multiple text-transform values for a selector.

The www-style mailing list might be a good place to take this if you ever want to see a pure CSS solution to this question.

Sincere thank you for this extremely great answer! I now know what to do when they do implement it. Thanks much! I also now know what the current limitations are. — Noitidart, Feb 18 '14 at 06:57

score 1 · Answer 3 · answered Feb 17 '14 at 11:20

1

You are using nested div,

So #test3 { text-transform: lowercase; } is applied for Parent div so it applies for Both Parent and Child Divs

when you override the #test3 div { text-transform: capitalize; } to the Child Div the first style text-transform: lowercase; is ignored

answered Feb 17 '14 at 11:20

Sam1604

1,459
2
16
26

ah yeah it doesnt work :( i was hoping for a non nesting solution – Noitidart Feb 17 '14 at 11:20

score 1 · Answer 4 · edited Dec 03 '19 at 14:43

1

Unfortunately, until CSS 3 there is no way to do this in pure CSS way, as per this document there are only 5 possible values to text-transform and none of them will solve this requirement!

But in future there might be provision for custom rule for text transform similar to Counter Sytle

edited Dec 03 '19 at 14:43

CarlosCarucce

3,420
1
28
51

answered Feb 17 '14 at 11:23

Yogesh

4,546
2
32
41

_till CSS-3_? What can CSS 3 do? – putvande Feb 17 '14 at 11:26
as mentioned in updated answer there might be provision which will allow us to custom define `text-transform` rules – Yogesh Feb 17 '14 at 11:30

Lower case all then capitalize - pure CSS

4 Answers4

Linked

Related