CSS Tip: Text-Transform For Case Manipulation

By  on  

One of the terrible practices I see too frequently is programmers using PHP, JavaScript, or caps lock to format their text in a special fashion. One example of this is:

echo '<h1>',strtoupper($article['title']),'</h1>'; // renders 'CSS TIP:  TEXT-TRANSFORM FOR CASE MANIPULATION

Terrible! Search engines see your all-capped text and index your site that way. I don't know about you but I'd be scared to click on a search engine result that was all "capped" up. If you want your text to display in all caps on your site but want search engines to index your content in proper in English, you should use a bit of CSS magic.

The CSS

h1 { text-transform: uppercase; }

Using CSS to transform the case of your text is best practice. Using PHP to do this only makes for ugly output!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

  • By
    Digg-Style Dynamic Share Widget Using the Dojo Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

Discussion

  1. Exactly! I worked on an eCommerce site where the last name was always in caps. The client found it annoying and asked to have it modified. I checked the db calls but that wasn’t it. I checked the plugins. Nope. After and hour of searching the myriad of files I ended up finding 5 references to strtoupper within the Smarty templating system. Not sure if that was from a previous dev or what but this is ridiculous! I modified everything and moved the uppercasing to CSS’s text-transform. Good article David! Hope others web devs follow this idea.

  2. allen

    on a similar subject does mootools correct missing text-transform modes across browsers?

  3. Alex

    Ryan, why don’t you link us to a larger article? I was also expecting a mootools plugin innovation, but I wouldn’t reply the way you did. Chill out..

  4. I didn’t even know that PHP method existed. That’s probably a good thing looking at it.

  5. What a bunch of nonsense people.

    While the article is short, it IS interesting and add something to our knowledge. If you got nothing to say, keep your mouth (and your fingers, in this case lol) shut.

    I always read but never replies but in this case, i had to reply because of this Ryan.

    See you and keep going with jQuery/CSS tips David ^^

    Regards,
    RaphaelDDL

  6. I’ve removed Ryan’s comment as it has no value.

  7. That’s a good tip. I’ve never used text-transform to uppercase anything although I can see its use for < h1 > etc titles. And the end result, as you point out and something I hadn’t thought of myself, is that the search engines don’t see SOME NASTY UPPER CASE TEXT and display them in the SERPs.

  8. Thanks for the tip; didn’t know CSS could do this.

  9. I didn’t even realize people used php for that, seems odd.
    I guess it depends on what language you use first, and the most.

  10. rakesh juyal

    Oh, i missed Ryan’s post. :D

  11. People doing this through Javascript and PHP? God help them! lol.
    I bet these same people would not be aware of letter-spacing either then.

  12. @Liam

    There are times when you need to format strings in the backend where CSS won’t apply. So strtoupper, strtolower, ucwords, ucfirst, etc… come in handy (at least via PHP). But, yes, text-transform should be used through CSS whenever possible.

  13. Oopps. above post should read: “text-transformATIONs should be used through CSS whenever possible”.

  14. @Hugo B
    I can understand in terms of Database and actual value storage for use but to use as an output too is not right. I would never bring it to the front end and never have.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!