CSS Uppercase, Lowercase and Headcase

cssuppercaseWhen working in CSS, you should develop an appreciation—more, a live or die attitude—for text formatting that rivals American Psycho’s infamous narrator, Patrick Bateman.  This begins with the simple things, such as controlling the case of text: upper case, lower case, etc.  CSS uppercase is one of several basic techniques to disguise code from resulting in something that looks like . . . well, code.  First, we’ll look at the original property that controls case settings in CSS, the Text Transform property.  Then we’ll bring you up to speed with Font Variant for further formatting options, and finally the extended options of Font Variant in CSS3.  Hyper-extend yourself in the best way possible with advanced CSS training.

The Text Transform property allows you to format different elements accordingly.  Let’s take a look at the three predominant case values, their descriptions, probable uses and finally their syntax:

Lowercase:     Transforms all characters to lowercase

Uppercase:     Transforms all characters to uppercase

Capitalize:      Transforms the first character of each word to uppercase

Technically, Text Transform has no default value; or rather, if you do not specify the Text Transform property, text will remain unaffected.  However, Text Transform can be an inherited property, so child elements will adopt the formatting of their parents (simply specify the value as ‘inherit’).  While this property is supported in most major browsers, it is important to note that ‘inherit’ is not supported in Internet Explorer 7 and earlier; IE8 requires a !DOCTYPE; but with IE9, you’re good to go.

How you ultimately put Text Transform to work is up to you, but for an example’s sake, let’s approach this logically: initially, it makes sense to use Uppercase for a title (first header), Capitalize for subtitles (second header, third header, etc.), and Lowercase for substance (paragraph).  So without further ado, I give you the Text Transform syntax:

  • h1:   {text-transform: uppercase; }
  • h2:   {text-transform: capitalize; }
  • p:     {text-transform: lowercase; }

Another common usage is highlighting links and menu options, and using :hover, :active, :visited and :link to make links appear in all uppercase when “hovered over.”

So you might not impress New York’s high society at this point, but let’s push onward and see what we can do with Font-Variant.  In CSS, Font Variant accepts only two possible values: Normal (default rendering of text) and Small Caps (a scaled down version of Uppercase; in other words, the text is still in all caps, just smaller).  The syntax structure for Font Variant is the same as Text Transform:

  • h2:   {font-variant: small-caps;}

Here’s an interesting little tidbit: Font Variant is subservient to the rendering of text in a markup.  For example, if your content is written in uppercase in the markup, it will still be regular sized uppercase even with a Font Variant of small-caps.  This gives you some cool options.  Take a look at the following HTML:

<p> ThErE iS aN iDeA oF pAtRicK bAtEmAn. </p>

<p> There is an idea of patrick bateman. </p>

Now, in CSS:

p: {

    font-size: x;             

    padding x;

    font-variant: small-caps;

    }

The result will look like this (enlarged):

Screen Shot 2013-12-19 at 9.52.24 PM

As you can see, letters that are capitalized in the markup retain regular capitalization, while lowercase letters adopt the small-caps format.  In the first line, I more or less alternated between uppercase and lowercase in the manner of a social media trend, and thus the result is an alternation of regular uppercase and small-caps.  In the second line, I went for a more professional, editorial feel in which only the first letter is capitalized, resulting in the first letter appearing in regular uppercase and the remainder in small-caps.  Nice.  And easy.  Just like learning to handle type professionally.

Now, let’s review and expand upon the ways in which Text Transform and Font Variant interact.  A hierarchy exists, to a certain extent.  If we take the above example, and set it to both {font-variant: small caps} and {text-transform: uppercase} everything will appear in regular uppercase.  Essentially, what’s happening is Font Variant is getting over-ridden completely.  Because uppercase letters take precedent over Text Transform, Text Transform will have no effect whatsoever on the text, which is in all uppercase letters.  Conversely, if take our example and set it to {font-variant: small-caps} and {text-transform: lowercase}, everything will appear in small-caps.  The reason should be sufficiently obvious by now: Font Variant works its magic on lowercase letters, which is the value specified by Text Transform.  Boom!

Now we’re getting places.  The last things I want to talk about are the extended options in CSS3.  In CSS3, Font Variant can be used as a shorthand and is capable of values in addition to small-caps and normal.  Check out this list of capabilities, among others:

  • Unicase
  • All-Small-Caps
  • Tilting-Caps
  • Petite-Caps
  • All-Petite-Caps
  • Slashed-Zero
  • Numeric Figure Values
  • Numeric Spacing Values

All good things.  Finally, a brief note concerning “capitalize.”  If you’re using CSS3, you can read this for historical background, but it’s non-essential information.  In CSS 1 and 2, “capitalize” (as in: text-transform: capitalize), was under-specified.  With a straight-forward sentence such as, “I love dogs,” no problem.  But many browsers, as well as Gecko and Webkit, interpreted certain symbols as letters, such as “-“ and “_” and several letter-based symbols.  Not only did CSS3 finally render this in razor-sharp definition, you can go to the “capitalize” line in the browser compatibility table and find a comprehensive listing of the first version of every browser to support Text Transform in its fully defined state.

With Text Transform and Font Variant at your disposal, you can at least format text to comply with the fundamental rules of the English language (or any other language, for that matter).  A little creativity will take you a long way.  There are a number of other relatively simple text formatting properties–color, alignment, decoration–and you can learn it all in the controlled mayhem of this CSS and CSS3 crash course.