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 :)

3 comments:

  • 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);
    $(this).html(with_fake_first_letter);
    });

  • web design perth

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

  • Post a Comment