Clever Geek Handbook

Where to specify line height for sIFR

I have no luck changing the line height for sIFR. I tried changing the sIFR css and config file as well as my general stylesheet. Is there a special trick?

GENERAL CSS

h1 {
    font-family: Georgia, Times, serif;
    font-size: 24px;
    font-style: normal;
    line-height: 16px; (has had zero impact, even when I go negative)
    color: #000000;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    outline: none;
}

THE CONFIGURATION FILE

sIFR.replace(minionpro, {
  selector: 'h1', wmode: 'transparent',
  css: '.sIFR-root { color:#000000; text-transform: uppercase; }'
});
+2


source to share


4 answers


Flash uses leading

instead line-height

, so just use:

sIFR.replace(minionpro, {
  selector: 'h1', wmode: 'transparent',
  css: '.sIFR-root { color:#000000; text-transform: uppercase; leading: 1.5; }'
});


The value leading

should just be on its own without a dimension value like px, em,%, etc.

+3


source


At first I thought it didn't work, but I realized that the units for the guide are completely different from them. I tried a larger value for "leading: -10;" and it worked fine. I am using sIFR 3 r436.
+1


source


I'm going to take a wild guess and say that since the sIFR of the font size> (24px> 16px) will ignore the line-height property and use the font size to create your flash.

If you're trying to get two lines of overlapping text (24px text on a 16px line will result in an 8px overlap) you're probably stretching the sIFR capabilities.

EDIT

It looks like sIFR has some weird methods of calculating font size based on different factors ... check the link for details (not knowing the sIFR version, I can't comment on your situation).

Novemberborn: font size with sIFR

0


source


The line height inside the Flash is controlled by a (custom) leading

CSS property for the class .sIFR-root

. Flash has no clue line-height

as you may be familiar with CSS.

0


source






More articles:


All Articles