Styling

With sIFR 3 you can easily style the Flash text. Different colors inside the same element? No problem! Leading, underline, text transformation? Sure!

Here's how it works. Flash supports a subset of CSS. The most important difference is that it only supports one class per element, and that there is only one way to encode colors. If you are replacing elements with more than one class name, sIFR will look for one prefixed with sIFR-class. If such a class does not exist it uses the first class found. As an example, the class sIFR-class-foo is picked and converted to foo. The only way to encode the color red is #FF0000. Blue is #0000FF. (You cannot use css short cut colors like #F00 and #00F).

In order to apply CSS properties to the entire Flash movie you need to use .sIFR-root as the selector. Other elements can be selected normally, so if the replaced text has an em element, you can select it using em. If an element does not show up try setting its display to block. Flash does not let you select span elements however, you have to specify a class name and use the class name as a selector. For example use <span class="span"> and .span as a selector.

The following properties are special in that they are handled by sIFR, and not Flash. This means they have to be specified in the sifr-config.js file, and are not inherited from the stylesheet, which some may consider a drawback. Please note that no shorthands exist for these properties:

background-color

Specifies the background color of the Flash movie. A value of transparent does not imply wmode: 'transparent', as the specified background-color is used as a fallback in case transparency is not supported.

leading

Use leading: with a number. You can only use a number, without a unit. Ex. leading: -10;
See Livedoc 2812.

kerning

See Livedoc 2811.

letter-spacing

Use letter-spacing: with a number. You can only use a number, without a unit. Ex. letter-spacing: -3;

opacity

See Livedoc 2732.

text-transform

Specifes text transformation. This is handled by sIFR because Flash does not support this natively. It is applied to all text, if you want to apply it to a specific element you'll need to use the modifyContent function. If sIFR.forceTextTransform is false, sIFR will not perform the transformation.

font-size

(revision 209+) When specified for the .sIFR-root class and given a px unit, this determines the actual font size sIFR uses to render the Flash movie. This prevents the text from scaling with the browser text. Think very, very hard about doing this, and then think again.

When specified for other selectors, use the % unit to make the font size relative to the main font size. This only works when specified in JavaScript. Use a unit-less value to hardcode a pixel size, but be aware that this breaks scaling.

cursor

This property needs to be specified for the .sIFR-root class. Its only accepted value is arrow, which stops the default pointer ("hand") cursor to appear when using mouse events with the sIFR Flash movie.

The following properties are supported by Flash natively:

text-align

You can use left, center, right.

text-decoration

You can use none and underline.

margin-left

You can only use a number, without a unit.

margin-right

You can only use a number, without a unit.

font-weight

You can use normal and bold. Make sure you've embedded the font in bold if you want to use it.

font-style

You can use normal and italic. Make sure you've embedded the font in italic if you want to use it.

text-indent

You can only use a number, without a unit.

color

As explained above.

display

You can use inline, block and none.

Use the following properties at your own risk:

font-family

Updated on April 02, 2008 20:51 by paul irish (12.33.239.250)