CSS text-transform capitalize on all caps

0 votes
asked Aug 12, 2010 by khan

Here is my HTML:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

Here is my CSS:

.link {text-transform: capitalize;}

The output is:

Small Caps & ALL CAPS

and I want the output to be:

Small Caps & All Caps

Any ideas?

12 Answers

0 votes
answered Jan 12, 2010 by prodigitalson

captialize only effects the first letter of the word. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

0 votes
answered Aug 12, 2010 by harmen

There is no way to do this with CSS, you could use PHP or Javascript for this.

PHP example:

$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

jQuery example (it's a plugin now!):

// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();‚Äč
0 votes
answered Jan 26, 2011 by johnnybizzle

If the data is coming from a database, as in my case, you can lower it before sending it to a select list/drop down list. Shame you can't do it in CSS.

0 votes
answered Jan 28, 2012 by ekar

May be useful for java and jstl.

  1. Initialize variable with localized message.
  2. After that it is possible to use it in jstl toLowerCase function.
  3. Transform with CSS.

In JSP

1.

<fmt:message key="some.key" var="item"/>

2.

<div class="content">
  <a href="#">${fn:toLowerCase(item)}</a>
</div>

In CSS

3.

.content {
  text-transform:capitalize;
}
0 votes
answered Jan 28, 2012 by ryanttb

JavaScript:

var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
  links[i].innerHTML = links[i].innerHTML.toLowerCase();
}

CSS:

.link { text-transform: capitalize; }

What Khan "ended up doing" (which is cleaner and worked for me) is down in the comments of the post marked as the answer.

0 votes
answered Aug 21, 2012 by philihp-busby

You can almost do it with:

.link { text-transform: lowercase; }
.link:first-letter { text-transform: uppercase; }

It will give you the output:

Small caps
All caps
0 votes
answered Jan 7, 2013 by orlando

all wrong it does exist --> font-variant: small-caps;

text-transform:capitalize; just the first letter cap

0 votes
answered Jan 29, 2013 by ronnyfm

Convert with JavaScript using .toLowerCase() and capitalize would do the rest.

0 votes
answered Jan 22, 2014 by johannes

You can do it with css first-letter! eg I wanted it for the Menu:

a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}

It only runs with block elements - therefore the inline-block!

0 votes
answered Jan 17, 2015 by a-aleem11

After researching a lot I found jquery function/expression to change text in first letter in uppercase only, I modify that code accordingly to make it workable for input field. When you will write something in input field and then move to another filed or element, the text of that field will change with 1st-letter capitalization only. No matter user type text in complete lower or upper case capitalization:

Follow this code:

Step-1: Call jquery library in html head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Step-2: Write code to change text of input fields:

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

Step-3: Create HTML input fields with same id's you use in jquery code like:

<input type="text" id="edit-submitted-first-name" name="field name">

The id of this input field is: edit-submitted-first-name (It using in jquery code in step-2)

**Result: Make sure the text will change after you move your focus from that input field at another element. Because we using focus out event of jquery here. Result should like this: User Type: "thank you" it will change with "Thank You". **

Best of luck

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...