HTML vs PHP vs CSS: Transforming dynamic text to all upper/lower case

I’ve been working on websites for over a decade now and always seem to come across different ways to tackle the same problem. ¬†While it may seem trivial to some, for the past few days I’ve been trying to figure out the best way to present all uppercase/lowercase text to a user. Generally speaking, you should avoid using all caps as much as possible, but there are certain instances when it’s appropriate (e.g. Section Headers, Menu Items, etc…)

Suppose we wish to display the string “The cat only has 6 lives left” in all caps, between

  • HTML:
  • THE CAT ONLY HAS 6 LIVES LEFT

    • CSS:

    The cat only has 6 lives left

    • PHP:

    The HTML method is by far the shortest, but it’s not always applicable or the best solution for two reasons:

    • Search Engines:
      If a search engine crawls your site and sees the string in all caps, then it will store that portion of your page’s content in all caps on their server. In the context of your website, all caps for a small portion is not a big deal. In the short amount of text a search engine displays, it can come across as shouting. This may cause people to avoid your site all together.
    • Dynamic Strings:
      Sometimes you don’t have access to the information as just plain text. If you’re pulling information from a database, RSS feed or simply have the string stored in a variable, you can’t just change the text manually. You have to perform some sort of function on the string whether it be strtoupper(), preg_replace() or something else entirely.

    The PHP method has the following weaknesses:

    • Search Engines:
      PHP converts the text to uppercase before it ever reaches the end user, whether that be a browser or a search engine bot. As a result, this method is subject to the same search engine problem as the HTML method.
    • Server Load:
      Each strtoupper() command that has to be executed requires an additional amount of CPU cycles to execute the command. The more times the function gets called, the more CPU cycles required. If you have a site serving large amounts of traffic, this can cause an unnecessary amount of load on your server, for such a simple operation. It may not be enough to cause your site problems by itself, but anything you can do to reduce CPU usage is good.

    This is why I believe the CSS method to be the best:

    • Search Engines:
      Search engines don’t use CSS to gather information about your site. It looks at the content. Search engines will see: “The cat only has 6 lives left” while anybody browsing the site will see “THE CAT ONLY HAS 6 LIVES LEFT”.
    • Dynamic Strings:
      You can use CSS in combination with dynamic PHP strings. If we have a variable called $mytext that we want to display in all caps, we can do so in the following manner:

    • Server Load:
      Instead of the web server(s) handling the load for thousands users simultaneously, it’s now taken care of by each user’s browser instead.

    What do you think? Do you agree, disagree, have a better way? Let me know.

    You can leave a comment via Facebook. Don't have a Facebook account? No worries. Just click "Other Comments" to leave your feedback.

    1. sli says:

      Nope, no better way. You nailed it.

    Leave a Reply

    Your email address will not be published. Required fields are marked *