CODEWITHSUNDEEP
flashsifr
nick
nick

Reputation: 11

Sifr 3 Barebones test - unusual line breaks

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:

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

Upvotes: 0

Views: 548

Answers (2)

Mark Wubben
Mark Wubben

Reputation: 3349

As spans are inline elements, sIFR only gets the width of the HTML text. If the Flash text is wider, it won't fit and cause a linebreak. You can add letter-spacing to the elements you are about to replace with a little help of the .sIFR-active class.

sIFR doesn't pick up anything else but font size from the page CSS because 1) it's hard to do this reliably cross-browser and 2) sIFR adds some custom CSS properties just for Flash.

Upvotes: 0

Pekka
Pekka

Reputation: 449425

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.

Upvotes: 0

Related Questions