How to control the case of characters using CSS?

Posted on July 6, 2008 
Filed Under css, how-to, tips and technique

How are you controlling the case of the characters in your project. Talking about me, I was using ucwords() function of PHP to control the case of the characters when required. Today, I come to know  two new property of CSS which controls the output of the case of the characters of the words.


You can control the characters using “text-transform” and “font-variant” property of the CSS to do this. You can change the characters of words to upper case, lower case and capitalize the first character of the word.Furthermore, you can use “font-variant” to display the font in small caps font i.e. all the lower case characters are converted into uppercase character but have small font size compared to text with character capitalized. Let’s see example,

Example of using text-transform and font-variant

<span style="text-transform: capitalize">bill gates</span> => bill gates
<span style="text-transform:lowercase">Bill Gates</span> =>  Bill Gates
<span style="text-transform: uppercase">bill gates</span> => bill gates
<span style="font-variant:small-caps">Bill Gates</span> => Bill Gates

As you can see clearly in the example how the character of case is changed using text-transform and font-variant property of CSS. I hope these property might be useful for those people who didn’t know about these properties. But “text-transform” should have had one more attribute to capitalize the first character of sentence, I’m missing that :-( .

Popularity: 5% [?]

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:


Follow me on twitter at http://twitter.com/roshanbh.

Related Posts

» Solving European characters (Western charset) problem with Ajax and PHP
» USA’s phone number validation using Regular expression in PHP
» Function to rotate image in PHP
» Default arguments in the functions of PHP

Comments

2 Responses to “How to control the case of characters using CSS?”

  1. Binny V A on July 6th, 2008 6:23 pm

    There is also text-transform:none
    Useful if you want to turn off capitalization for a section of capitalized text.

  2. Mukesh Chapagain on July 7th, 2008 3:33 am

    For all the property value pairs of CSS, visit http://blog.chapagain.com.np/index.php/2007/03/23/cascading-stylesheet-css-property-value-pairs/

Leave a Reply