views:

368

answers:

1

I am trying to get leading and kerning to work on some sIFR 3 type on a site I'm working on (as described in the wiki: http://wiki.novemberborn.net/sifr3/Styling), but these two parameters seem to have no effect no matter what I do.

I am not using intergers (no 'px' or 'em') just as it requires. I've also tried several different font swf files, just to make sure it's not the font. I don't know why it doesn't work. All of the other css parameters that I assign to .sIFR-root work just fine. Here's a sample of my code using 'leading'.

In sifr_config.js:

sIFR.replace(snl, {
    selector: '.section-title h1',
    css: ['.sIFR-root { color: #FFFFFF; text-align: center; leading:2; }'],
    wmode: 'transparent'
});

In the HTML doc:

<div class="section-title">
    <h1>sIFR Text</h1>
</div>

(I've also tried the css code with and without the square brackets, as I've seen it done both ways. Doesn't seem to make a difference).

What am I doing wrong? Any help would be greatly appreciated; thanks!

A: 

ETA: Found an less hackish way: line-height seems to work when added to the CSS for the replaced element (in my example that'd be: .sIFR-active .section-title h1). So I was able to use regular old line-height to fake a margin.


All righty—since this one left everyone speechless, here's what I discovered:

Originally, there were many suggestions for using leading as a replacment for margin-top or padding-top since these will not work with sIFR. This is what I was trying to use it for. I had a single line of text and needed to give it some space up top, so I was trying to do this by increasing the leading (line height) to no avail. I think this worked at one point, but then as I was looking at the change logs for all the revisions of sIFR, I found a note about a "fix" to leading. Apparently the developer considered leading being recognized on single-line text as a bug, so "fixed" it so that leading is only applied when the text is multiple lines. I tested by putting a line-break before my text, and sure enough, leading started to work!

So it seems that now, in order to achieve a top margin on my sIFR header, I have to add unneccessary code one way or another—by wrapping it in a div or span with a top margin, or by adding a line break and using negative leading.

I still have no idea about the kerning, but letter-spacing seems to be working, so…

If anyone has any additional insight to offer, I'm all ears!

Kerri
You can use `offsetTop` to move the text down, and `tuneHeight` to make the Flash movie taller so the text won't get cut off at the bottom.
Mark Wubben
Thanks! I'd actually tried that, but for some reason I couldn't get tuneHeight to work as I needed. I actually ended up doing it in a different way that was a lot less hackish than what I posted above. I was able to apply line-height to the .sIFR-active replaced class, and that seemed to work perfectly.
Kerri