How to fake the :first-letter CSS selector with javascript

Sunday, November 2, 2008
I was playing with sIFR 3 for a client's project and I was trying to use the :first-letter CSS selector inside the sIFR replaced flash text. If I get it right this is not supported so I made the following hack:

Suppose that we have the following markup:

Inside the head part of the html page (or in an external js file that is loaded before the sIFR activation) I put this small script:

Now, all we have to do when we call sIFR.replace is to add the following CSS rule:

Let's wrap it up now, shall we?

Obviously, for the above to work you will need the appropriate swf files and a basic knowledge of how to use sIFR. For more info you can take a look at this tutorial.

Disclaimer: I know this is not the cleanest solution possible but it's a quick and dirty way of getting the functionality you want on some specific headings, etc... Please don't copy & paste the previous snippet cause there are high chances that it won't work! Customize it for your own needs and requirements and let me know of any recommendations/suggestions :)


  • Marius Nitsche

    yo Nikos,

    this sound interesting.
    I Wanted to implement it in Drupal. Using the Dynamic Redner Plugin and sifr 3.
    Could you describe more how to implement. Is the span necessary?

  • Like your script.

    I made some modifications to be able to adjust more elements.

    $('div#container h1 a').each(function(index){
    var original_content =$(this).text();
    var with_fake_first_letter = '<span class="first-letter">' +
    original_content.slice(0, 1) +'</span>' +
    original_content.slice(1, original_content.length - 1);

  • web design perth

    This is a kind of shortcut indeed. Not the recommendation from coding school, but this would work nonetheless.

  • Post a Comment