R – Sifr 3 Barebones test – unusual line breaks

flashsifr

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;*

It looks like my question has been broken down into a couple smaller questions.

  1. Line break
  2. What css is inherited from the page. (thanks for the answer Mark!)

Mark and Pekka, both of you mention letter-spacing in your responses. I am afraid I don't understand why since I am not defining letter-spacing in css/sifr-config. It is left up to browser default. How does it relate to text width in regards to line breaks?

I modified the code as follows:

<!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;}

    .sIFR-active #SpacingTest .fontName
    {
     letter-spacing:1px;
    }
  </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>
    <b>box model and available width tests</b><br>

  1. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
  2. <div class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
  3. <div style="width:1024px;"><span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span></div>
  4. <div style="width:1024px;" class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
  5. <span class="fontName" style="display:block;"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>

  <hr>
  <b>box model and available width tests</b><br>
  <div id="SpacingTest">
    6. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
  </div>
 </body>
</html>

Additional Information:

  1. span with a sIFR-targeted fontName class on it
    available width: entire body
  2. div with a class="fontName"
    available width: entire body (via div)
  3. div with an explicit width set, containing a span with class="fontName"
    available width: 1024px (fixed width div)
  4. div w/ explicit width and class="fontName"
    available width: 1024px (fixed width div)
  5. span w/ display:block; and class="fontName"
    available width: entire body (via display:block;)

Results:

1,3,and 6 still breaks when the page loads.
6 takes up more space, but still breaks prematurely.
5 looks fine, until the browser is resized, then it adds a line break and holds onto it no matter what.

2 and 4 display on a single line (as intended by this example).

4 does not reflow when the browser is resized. This is expected since the width is fixed. No problem here.

2 reflows when the browser is shrunk, but only the word 'blue' is forced to the next line, the rest of the text remains on the first line.

I re-sized the text with ctrl+= and ctrl+- and something interesting happened. All cases (excluding 4 – expected) reflowed much more smoothly when the browser/available space was resized.

Conclusion from this test:

  • block elements with a fixed width (set to that element or it's parent/ancestor) are safe bets, but your limited to fixed width.
  • block elements with a fluid width are iffy at smaller font-sizes
  • use on inline elements at own risk. Do not use in the middle of a paragraph, the flash object itself can not be anything but block.

Mark, could you clarify what sIFR looks at as available width? I could not find it on the sIFR 3 wiki. (on a side note: all the livedoc links to adobe seem to be broken links, I'm afraid I could not find them by searching adobe's site). Am I looking at 'available space' the wrong way? Shouldn't the entire body element be plenty of width?

For the sake of the project I am working on, it looks like setting the standard to block level elements only with font-sizes of 18px and above will be the route taken to keep from holding it up further, but I still have personal interest and would like to pursue understanding sIFR and the line breaking further.

I am new to Stack Overflow and am concerned this may be an 'extended discussion' which the FAQ says is beyond the scope of this site. If there is a more appropriate place to discuss this please let me know and I will move the inquiry as needed.

Regards

Best Answer

This is most often because the underlying HTML (that is replaced by the sIFR output) is too small, and thus too little space is reserved for sifr to use.

I have had this when I used a negative letter-spacing value on a h1 that got replaced by a siFR output. Try giving more space to the element being replaced.

Related Topic