SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    SIFR3 letter spacing

    having gained a bit of info about sifr from the art and science of css, i have downloaded the latest sifr release, r436, which is a bit different from version 2

    i have managed to get the font replacement working ok, but want to ensure that my embedded flash font is the same width as the verdana font it is replacing.

    can anyone tell me where to set the letter spacing and/or point me to somewhere that could help?

    thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I don't use sifr but the information you need does seem to be documented on this page.

    http://wiki.novemberborn.net/sifr/How+to+use

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    sIfr makes me crazy. But I love Cufon. Similar results and far fewer headaches.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the replies.

    i can find reference to letter spacing with sifr2 but not with sifr3

    i have found a workaround, whereby i can stretch the width of the original text by adding letter spacing to the css.

    i will also take a look at cufon, thanks for the tip.

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi crushfor!

    I have the same problem. Could you give me some information how your trick works!

    That would be great!

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi TeisT

    My workaround was to add letter spacing in my 'normal' css settings for h1, which wasn't ideal but worked.

    However, i have found the proper solution.

    in the sifr-config.js file, edit the replace text as follows... (i used a font called museo in my example, substituting verdana 18pt bold)

    sIFR.replace(museo, {
    selector: 'h1',
    wmode: 'transparent',
    css: '.sIFR-root { background-color: #FFFFFF; color: #339900; font-size: 21px; letter-spacing: -0.85;}'
    });

    make sure the letter spacing uses a number only.

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    Do I really have to replace a part in the sifr-config.js file or just add these lines:

    sIFR.replace(museo, {
    selector: 'h1',
    wmode: 'transparent',
    css: '.sIFR-root { background-color: #FFFFFF; color: #339900; font-size: 21px; letter-spacing: -0.85;}'
    });

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in the default js file as downloaded from the sifr site, lines 53-56 have a default value for futura.

    you can replace or add the lines specified as required.

    the greyed out text in the js file should help you with this

  9. #9
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok! That seems to work!

    But if I change the swf file (with my own font) the links don't show up. All the other texts are replaced.

    (In Version 3. r436 is an example link shown)

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    personally, i havent tried a link, i'm only using sifr for h1 and h2

    however, it may be that you css is formatting links to bold / italic / underline.

    you would need to ensure these are in your swf.

    you could try an swf where you know bold / italic are included or try changing your link formatting in the css.

    the should be more info in the documentation.

    if i get time i may have a look at this

    regards

  11. #11
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I deleted the standard Text in the fla. Now it seems to work!

    crushfor, thanks for all that suppot!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •