R – sIFR is scaling text down instead of wrapping text

multilinesifrword-wrap

I inherited a site that uses sIFR 2.0.7 and for reasons beyond my control upgrading to sIFR3 is unlikely.

I have a div with text that is successfully being replaced with sIFR. The text is fairly large and should wrap to the next line, but instead it is scaled down by sIFR. Without sIFR it wraps correctly.

I've searched both the documentation on 2.0.7 and other threads without much luck. Tried setting smaller text, a fixed height on the div, setting line-height, and changing letter-spacing.

Any tips or ideas would be greatly appreciated, thanks!

Base styles are included unchanged from the sIFR download. Relevant code:

HTML:

<div id="menu_header_FuturaStdMedium">Sample Header Text</div>

CSS:

.sIFR-hasFlash div#menu_header_FuturaStdMedium {
    letter-spacing: -4px;
    visibility: hidden;
    font-size: 26px;
}

Javascript:

    if(typeof sIFR == "function"){
        // Headers
        sIFR.replaceElement("div#menu_header_FuturaStdMedium", named
        ({sFlashSrc: "FuturaStdMedium.swf", sColor: "#000000", sCase: "upper", sWmode: "transparent", sFlashVars: "textalign=center"}));
}

Generated HTML:

<div class="sIFR-replaced" id="menu_header_FuturaStdMedium" style="padding-top: 15px;"><embed style="width: 230px; height: 24px;" class="sIFR-flash" type="application/x-shockwave-flash" sifr="true" bgcolor="transparent" wmode="transparent" flashvars="txt=Sample Header Text&amp;textalign=center&amp;textcolor=#000000&amp;w=230&amp;h=24" quality="best" src="FuturaStdMedium.swf" height="24" width="230"><span class="sIFR-alternate">Sample Header Text</span></div>

Thanks again!

Wes

Best Answer

I had the same issue and found this entry through google. Just in case anyone else comes across the same issue: it seems like most of the weird text-scaling sifr does can be solved by putting the text one wants to replace into a span-tag and replacing the span-tag (this also solved some weird down-scaling sifr did when it just should have wrapped the text...)

So in this case:

HTML:

<div id="menu_header_FuturaStdMedium"><span>Sample Header Text</span></div>

JS:

if(typeof sIFR == "function"){
    // Headers
    sIFR.replaceElement("div#menu_header_FuturaStdMedium span", named
    ({sFlashSrc: "FuturaStdMedium.swf", sColor: "#000000", sCase: "upper", sWmode: "transparent", sFlashVars: "textalign=center"}));

}

I hope this helps anyone :)

Related Topic