LinuxQuestions.org
Review your favorite Linux distribution.
Go Back   LinuxQuestions.org > Blogs > Lumak's Guide to Random Things
User Name
Password

Notices

OK I don't really have a good title yet but I figure I can post works in progress and other tips I've come across or other interesting things.
Rate this Entry

CSS small caps

Posted 12-06-2010 at 09:58 AM by lumak
Updated 12-11-2010 at 12:02 PM by lumak

As many know, the proper css style to produce small caps does not function as expected:
Code:
font-variant: small-caps;
This style will often cause all the letters to be normal sized uppercase letter essentially producing the same style as:
Code:
text-transform: uppercase;
This is aside from the w3 recommendations stating to do this as a LAST resort. The browser is supposed to attempt to force the small-caps first by turning all the lower case letters to uppercase and resizing them smaller.

Anyway, as a css user, you have a few options. The quickest and easiest being:
Code:
font-size: smaller;
text-transform: uppercase;
However, you loose out on full size capital letters as 'small-caps' is only supposed to change the lower case letters.

If however, you are using small-caps to get a nice header and won't be using it on more than 3 words at a time, you can do the following:

EDIT: it appears my version of firefox ( 3.6.10 ) has a bug with adding extra space after a block that changes the font size of a block element using the virtual class :first-letter. I'm diagnosing a workaround...
EDIT EDIT: OK it appears this is a really old bug that has never been fixed and I can't think of an elegant workaround. Webkit browsers will display this properly so it's still some what good code but being that it's completely worthless to all of firefox, it's probably not worth using. Just use the messy example posted in the comment below.

Code:
<html>
<head>
  <title>small caps test</title>
  <style>
    .test {
      display: block;
      float: left;
      font-size: 1.0em;
    }
    .title {
      display: block;
      float: left;
      /* this is the real font size of the section.
       * To test the proportions of the two sizes below,
       * This size should be the same as the test size
       * and the first capital letter should be the same size
       */
      font-size: 1.0em;
      text-transform: uppercase;
    }
    .title .title {
      display: block;
      float: left;
      /* This re-sizes the letters to the lower case size */
      font-size: 0.74em;
    }
    .title .title:first-letter {
      /* do not float this virtual class.  It will mess up text alignment */

      /* This re-sizes the first letter to the upper case size */
      font-size: 1.35em;
    }
  </style>
</head>
<body>

  <h1>
    <span class="test">T</span>
    <span class="title">
      <span class="title">This&nbsp;</span>
      <span class="title">Is&nbsp;</span>
      <span class="title">Small&nbsp;</span>
      <span class="title">Caps</span>
    </span>
  </h1>

</body>
</html>
The down side? you must have each word as a separate span tag, it will only work on Properly Capitalized Words not RaNdoMly CapItalIzEd, and you must turn the words in to floating blocks so that the :first-letter virtual class works. This makes positioning troublesome if you have other normal words on the same line. If positioning around other block elements, you may want to wrap it in another block element that's positioned the way you want in relation to the others.

The values of "1.35" and "0.74" were judged on what I thought looked good when testing under midori and firefox. This proportion may not look right to you and you will have to change them to readjust the first font size in proportion to the rest of the page. Test it by placing a normal sized capital letter just before the first word and playing with the values.

Oh and notice I gave it the class '.title'

Do not be tempted to miss use CSS where your html contains formatting information in the classes like class="smallcaps bold large" CSS is designed to make formatting transparent to the source. This is why I say to put the words in 'span' classes. This way you can change the style by only altering the root title class. The sub styles of '.title .title' will automatically inherit the main '.title' style. And if you fail to style it... say a print style... the words will appear all on one line without having to think about styling it. Additionally, if you place it all in a 'h1' tag then it will be auto formatted for other processing applications as well as have a default 3em size in bold.

I hate when I see css examples that tell people to tag html will really long multi class strings. At that point, you might as well code pure html with the old style tag properties because you obviously don't care about portability and replacing the style later.
Views 3954 Comments 1
« Prev     Main     Next »
Total Comments 1

Comments

  1. Old Comment
    EDIT: revised the example to be more friendly and complete.

    After having to find a work around for the bugs in firefox relating to first-letter, I've determined that this is probably the best way to do small caps after all. If you encase only the capital letters and encase the whole small-caps phrase in the same tag, then appearances with no style or only the outer class defined will not cause any display issues. This method also makes managing small caps in a paragraph a lot easier. However, you still have to know when to stop tagging capital letters.

    Code:
    <html>
    <head>
      <title>small caps test</title>
      <style>
        /* This is needed to ensure the browser applies the same font style
         * if you globally set it else where
         */
        h1, h1 * {
          font-family: sans-serif;
        }
        h1 {
          font-size: 3em;
        }
    
        /* using the same class for the outer and inner ensures that it will
         * look correctly when styling is removed
         */
        .title {
          /* You may want to manually change the proportions.  Don't be tempted to use
           * 'smaller' and 'larger' as each browser displays those differently.
           */
          font-size: 0.74em;
          text-transform: uppercase;
        }
        .title .title {
          font-size: 1.35em;
        }
    
        p:first-line {
          font-size: 0.74em;
          text-transform: uppercase;
        }
    
        /* This is an invalid css style and is ignored.  :first-line is a pseudo-element
         * and therefor must only be at the last simple selector.
         */
        p:first-line .title {
          font-size: 1.35em !important;
        }
        /* doing "p .title:first-line"  would also be ignored because .title is an inline
         * element.  Even if you set "p .title" to an inline-block the results would be
         * the same as not defining it with the first-line because the first line of the
         * .title applies to the first line of it self not to the p
         */
    
        /* This causes capitals on lines after the first to be too large. */
        p .title {
          font-size: 1.35em;
        }
    
    
      </style>
    </head>
    <body>
      <h1>
        <span class="title">
          <span class="title">T</span>his&nbsp;<!--
       --><span class="title">I</span>s&nbsp;<!--
       -->me<span class="title">SS</span>y:&nbsp;<!--
     --></span><!--
     --><span class="another">some more text</span>
      </h1>
    
      <p><span class="title">T</span>his will allow you to do a :first-line in small
     caps... sort-of. <span class="title">Y</span>ou just have to encase capitals in the 
    extra span class for a few sentences. <span class="title">G</span>o ahead and add 
    more text here if you can't see a multi-line paragraph. <span 
    class="title">U</span>nfortunatly, if you keep this up too long, lines following the 
    first line will have capitals that are too large. Case in point, this sentence 
    started with a capital that wasn't encased.
      </p>
    
    </body>
    </html>
    In the example case of the first line of a paragraph in small-caps, you still have to make sure every real capital is in a span tag. AND you have to know exactly when to stop encasing capitals in the span tag otherwise they will be too large on the following lines.
    Posted 12-06-2010 at 11:16 AM by lumak lumak is offline
    Updated 12-11-2010 at 02:17 PM by lumak
 

  



All times are GMT -5. The time now is 10:01 PM.

Main Menu
Advertisement

My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
identi.ca: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration