Capitalize first letter only

Question

All of our data in our database is entered in ALL CAPS. When I pull that information (i.e. First and Last Name), I would like it to say "John Smith" vs. "JOHN SMITH." I tried using text-transform:capitalize; but that only capitalizes the first letter. It does not make all other letters lowercase. I also tried this (with no success):

<div class="profile">
<h2 style="text-transform:lowercase;"><span style="text-transform: capitalize;">Welcome _MEM_FirstName_ _MEM_LastName_,</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque lectus, molestie quis ullamcorper ac, vesti bu lum ut elit. Donec quis lacus sem, a pharetra neque. Cras ultricies purus ac ligula lacinia ullamcorper.</p>
<p>Your Walser Rewards card is also your My SA Rewards card. While at Super America locations you can get gas discounts and earn speedy rewards too.</p>
</div>

Any idea on how to convert the text from UPPERCASE to Capitalized?

What language are you using to pull from the database? Does it have a `.lower()` function of any kind? — brbcoding, Mar 08 '13 at 19:44
I'm going to take a stab and say you're looking for a solution in JavaScript, in which case check out: http://stackoverflow.com/a/196991/1538708 — adamb, Mar 08 '13 at 19:45
Suggest that when you get the data from database, convert the string to lower case, then apply the CSS property `text-transform: capitalize;` — Amy, Mar 08 '13 at 19:46
I'm not real familiar with the back-end development. They are using classic asp. — Travis, Mar 08 '13 at 19:47
Why is this marked as duplicate when the question is different? The title might infer it's the same but it's not. The duplicate question is to capitalize first letter only. This question is to normalize all caps text. — delroh, Jul 31 '14 at 14:23

score 2 · Answer 1 · answered Mar 08 '13 at 19:59

Not sure how you are pulling data but you can edit it via Javascript after you pulled the word.

var text = "JOHN SMITH"; //this would normally be the word you pulled
var textarray = text.toLowerCase().split(" "); // ["john", "smith"]
for (var i=0; i<textarray.length; i++) {
    textarray[i] = textarray[i].replace(textarray[i][0], textarray[i][0].toUpperCase());
}
//["John", "Smith"]

Now with textarray you can print it out however you want on the page.

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

There is no CSS solution for this problem, afaik.

See here, for a related posted. Please do your homework first.

The best way would be to format the data in-between your database query and your application sending it to a template.

edited May 23 '17 at 11:52

Community

1
1

answered Mar 08 '13 at 19:46

Crooksey

908
3
11
22

score 1 · Answer 3 · answered Mar 08 '13 at 19:47

1

This is impossible with CSS, because you letters are already capitalized, but you can do it with your Serverside Language (e.g. PHP), JavaScript, or even inside the Database Query

answered Mar 08 '13 at 19:47

antpaw

15,444
11
59
88

score 0 · Answer 4 · answered Mar 08 '13 at 19:50

0

Convert the string to lowercase, using something like string modifiedString = myString.ToLower(); in your method after retreiving the string. Then use text-transform: capitalize; in your CSS.

answered Mar 08 '13 at 19:50

brbcoding

13,378
2
37
51

Capitalize first letter only

4 Answers4