What I want to do:
I want to use a non-standard font on the web in a various combinations of font-color and font-size without having to assign individual configs for each. So far sIFR seems to pick up font-size no problem. but not font color, so I am working on a work around.
The problem I am running into:
sIFR is breaking text to the next line without a linebreak <BR> being present.
Here is the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>sIFR 3 - barebones test</title>
<style type="text/css">
.red{color:#660000;}
.blue{color:#006699;}
</style>
<link type="text/css" rel="stylesheet" href="sifr.css">
<script type="text/javascript" src="sifr.js"></script>
<script type="text/javascript" src="sifr-config.js"></script>
</head>
<body>
<span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span>
</body>
</html>
sifr-config.js For some reason sifr is not pulling the color from the CSS. So I spec it in the config file. The colors in the config are intentionally different then the css.
/*****************************************************************************
It is adviced to place the sIFR JavaScript calls in this file, keeping it
separate from the `sifr.js` file. That way, you can easily swap the `sifr.js`
file for a new version, while keeping the configuration.
You must load this file *after* loading `sifr.js`.
That said, you're of course free to merge the JavaScript files. Just make sure
the copyright statement in `sifr.js` is kept intact.
*****************************************************************************/
//## Create objects that point to the flash files
var fontName = { src: 'fontName.swf' };
//## Set configuration settings if desired
//sIFR.useStyleCheck = true; // read <http://wiki.novemberborn.net/sifr3/DetectingCSSLoad>.
//## Activate sIFR
sIFR.activate(fontName);
//## Replace elements using sIFR
sIFR.replace(fontName, {
selector: '.fontName'
,css: [
'.sIFR-root{color:#000000;leading:-6;}',
'.red{color:#FF0000;}',
'.blue{color:#0000FF;}'
]
,ratios: [8, 1.41, 10, 1.33, 14, 1.31, 16, 1.26, 20, 1.27, 24, 1.26, 25, 1.24, 26, 1.25, 35, 1.24, 49, 1.23, 74, 1.22, 75, 1.21, 79, 1.22, 80, 1.21, 81, 1.22, 1.21]
,wmode:'transparent'
});
What can I do to achieve the desired results without premature breaking?
*please note that not all situations will be appropriate for display:block;