The Cone Trees network The UX Bookmark UX Quotes UX Jobs in Singapore Nice one yeah!

Fixing the sIFR 3 text wrap issue

If you are facing the issue of sIFR text wrapping in Mozilla Firefox and Google Chrome, just like I did while trying to implement it on my new website meant for the user experience community: UX Quotes , then you should find this post useful.

I am assuming this solution should work with all version 3 revisions though I have particularly tried it with sIFR 3.436.

Try one of the two arguments given below to fix the text wrap issue.

1. forceSingleLine

The forceSingleLine argument forces text to be displayed in a single line.

Values
True, false

Note
Note that if you have a very long line of text, then it will flow beyond the width of the container it is placed in. This argument is different from preventWrap. The preventWrap argument results in text getting clipped or cut off when it exceeds width. Think of singleLineWrap as overflow:visible and preventWrap as overflow:hidden declaration/ value pairs in CSS.

Example

sIFR.replace(test, {
  selector: 'h1',
  css: '.sIFR-root { color: #cccccc; width: 100%; text-align: left; letter-spacing:1;}',
  wmode: 'transparent',
  forceSingleLine: true;
});

2. tuneWidth

The tuneWidth argument adjusts the width of the Flash movie for adjusting the space around the flash movie.

Values
Positive or negative number

Example

sIFR.replace(test, {
  selector: 'h1',
  css: '.sIFR-root { color: #cccccc; width: 100%; text-align: left; letter-spacing:1;}',
  wmode: 'transparent',
  tuneWidth: 1;
});
  • yes I’ve a problem with sifr text in Safari. sifr text not taking full width of parent div.

  • Ouh, you saved my day! 🙂

    Thanks so much, by the way i was experiencing trouble with Opera – Firefox an IE did everything normally!

    Have a good day!

  • Jitendra: Hope you found a solution.

    Prowebdesign: Glad it helped you out.

  • Ekant Kaushik

    Hi,
    I am trying to provide sIFR titles to my website. At one place I have provided width to flash that is actually less than text width. I want that in this case my text should get wrapped to below line since I have provided excess width to the container but text is not wrapping.

    Kindly provide me with some solution.