Text lowercase after capitalization is possible?

Question

My database give mixed font styles, for Example:

" Hi THis is TEST teXT "

I want to capitalization this type of fonts. I found a way, first using lowercase and then ::first-letter to be capitalized. This give the first letter only capital.

But I want capitalization in every first word, is there any way?

"But i want capitalization in every first word" .. First word or first letter on each word?? — Maniraj Murugan, Feb 18 '20 at 06:14
Yes its possible in css.. You can add this for example, h5 {text-transform: lowercase;} — Manikandan2811, Feb 18 '20 at 06:14
What means every first word? Of sentences? Look for .!? And then the next letter (index) and then capitalize it. It’s kinda manual work. — Nikolaus, Feb 18 '20 at 06:15
@manikandan lowercase ok, then how capitalization is possible. — Sahin, Feb 18 '20 at 06:15
Please [edit] your post to describe how you would like your sample " Hi THis is TEST teXT " to be output, as it isn't clear from your wording. — Ken Y-N, Feb 18 '20 at 06:15
Ok @Nikolaus, but manual work not possible in big projects right. — Sahin, Feb 18 '20 at 06:16
@Sahin Yes that is also possible.. but if the letter is in fully uppercase its not possible to covert that word to capitalize.. — Manikandan2811, Feb 18 '20 at 06:17
@Manikandan2811 not upper case mixed uppercase also not possible, i tried. — Sahin, Feb 18 '20 at 06:19
Manikandan2811 and Thomas Byy there is no way using this text-transform:capitalize to convert, because these are database values and mixed fonts, like capital and small — Sahin, Feb 18 '20 at 06:24
Does this answer your question? [First lowercase the text then capitalize it. Is it possible with CSS?](https://stackoverflow.com/questions/5280015/first-lowercase-the-text-then-capitalize-it-is-it-possible-with-css) — Cray, Feb 18 '20 at 06:29
This is imposible using pure CSS to transform text to lowercase then capitalize it — Ethan Vu, Feb 18 '20 at 06:29

score 0 · Answer 1 · answered Feb 18 '20 at 06:20

0

div.c {
  text-transform: capitalize;
}

<html>
<body>
<h2>text-transform: capitalize:</h2>
<div class="c">Hi THis is TEST teXT</div>

</body>
</html>

Try this.

answered Feb 18 '20 at 06:20

Sumesh TG

2,557
2
15
29

it is not fixed my scenario. – Sahin Feb 18 '20 at 06:28
@Sahin https://stackoverflow.com/questions/21827377/lower-case-all-then-capitalize-pure-css There is no solution with css , Try with js – Sumesh TG Feb 18 '20 at 06:30
Not working, i already checked. – Sahin Feb 18 '20 at 06:37

score 0 · Answer 2 · answered Feb 18 '20 at 06:22

In Javascript:

function titleCase(str) {
var splitStr = str.toLowerCase().split(' ');
for (var i = 0; i < splitStr.length; i++) {
   // You do not need to check if i is larger than splitStr length, as your for does 
       that for you
   // Assign it back to the array
    splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
}
// Directly return the joined string
return splitStr.join(' '); 
}

document.write(titleCase("I'm a little tea pot"));

Please see Capitalize First Letter Of Each Word In A String - JavaScript

score 0 · Answer 3 · answered Feb 18 '20 at 06:23

0

You can use the following if you strictly want to do it in style.css file:

selector{
text-transform: capitalize;
}

Another option is :

{{ textToBeConverted | uppercase }}

Thanks !

answered Feb 18 '20 at 06:23

Mukul_Vashistha

106
1
5

Using css, is possible ? Please understand the scenario – Sahin Feb 18 '20 at 06:26
Oh I get it. Your data is in mixed form. Why don't you use the second option using pipe {{ textToBeConverted | uppercase }} – Mukul_Vashistha Feb 18 '20 at 06:30
Our side is large number of data, so can't using angular functions, bit slow, and next reason is we dont go with dev side, using client side is better to formatting. – Sahin Feb 18 '20 at 06:36
Honestly it isn't so slow that it would make a difference to the user. The data rendered would not take hefty amount of time.I work with huge data set and using pipes never made a problem. – Mukul_Vashistha Feb 18 '20 at 06:37
Ohh ok, but we have some issues regarding this, thats why. – Sahin Feb 18 '20 at 06:38
Okay. Has to be your call after all. Good day ! – Mukul_Vashistha Feb 18 '20 at 06:40

score 0 · Answer 4 · answered Feb 18 '20 at 06:25

0

Angular has a inbuilt pipe for this

{{name | titlecase}}

link

https://angular.io/api/common/TitleCasePipe

answered Feb 18 '20 at 06:25

Passionate Coder

7,154
2
19
44

Using angular this is a way i know, but using css i want – Sahin Feb 18 '20 at 06:26
oh ok let me check – Passionate Coder Feb 18 '20 at 06:26

score 0 · Answer 5 · answered Feb 18 '20 at 06:27

0

What you want is impossible using pure CSS. Please refer to this answer.

Alternative, you can use it with angular lowercase pipe and titlecase pipe:

{{ textToTransform | lowercase | titlecase }}

answered Feb 18 '20 at 06:27

Ethan Vu

2,911
9
25

with your reference link, they posted "cant do this with pure CSS". but using angular pipe will do right. i want to try using pure css, thats why i created a new ticked. – Sahin Feb 18 '20 at 06:31

Text lowercase after capitalization is possible?

5 Answers5