Site Re-re-Design: Attack of the Fonts

[Lenny]

EDIT: I find a link to the site sometimes helps, too.

http://lenco.110mb.com/ineffably_so/index.html

-----

After the success of my first project, in which I battled fiercely with the monster hidden deep within Internet Explorer 6, the Director General has given me permission to go ahead with my second project. This time, I cross blades with a much more elegant, yet no less terrible monster - Count F'ont de Support.

On my re-re-designed blog site, I make use of the commercial font Lisboa Sans SF Light. Now it's one thing to have to buy a font, but entirely another to find out that I need some kind of hack to make it visible to everyone who views the website - if you don't have a font installed on your PC, then when you try to view it on a website, the computer obviously can't load it, and thus allows its laziness circuits to kick in, loading instead a default font that everyone has, like Arial or Times New Roman. All very well if you don't want your poor computer to exert itself and convert that flab into proper muscle, but it's an absolute headache for those of us who build websites with pretty fonts that no-one will ever see!

To cut to the chase, I've employed a work-around called sIFR which I hope has fixed the problem. This is where you, my loyal audience, comes in. Remember my PNG Alpha Channel fix? I'm going to ask of you something similar.

There are five bits of text on my new site that use the Lisboa font. I need you to compare the pictures below with what is actually shown by your browser. Simple!

On this picture, the five areas to look at have been squared with lime green, and here is what the font should look like when displayed:

1.

2.

3.

4.

If you could give a simple "Yes" or "No" to each of the four, then I'd be grateful. Also, could you tell me your browser and the version (Help > About).

Thankee.

If you find any problems with the site, then please tell me (I already know of one in IE6 - there's a nice white line below the Copyright Warning... Microsoft be damned!).

Oh, it won't work in Safari, so if you're using Safari and everything shows up in Arial and Times New Roman then it's because the makers of sIFR have yet to find a way to make fonts work in Safari.

----------

If anyone is interested in how it works:

A flash document is created with a dynamic textbox set to the font you want to display. Code within the document takes whatever is passed to it and displays it in the textbox. This document is exported as a flash movie (.swf).

Javascript is employed to pass sections of text to the flash movie. The script knows which bits to pass as within the stylesheet behind the webpage, sections are declared, and then used in the HTML document (for example, the header tags - <h1>Text</h1>).

The Javascript also displays the flash movie file on top of these sections (size and whatnot varies depending on the text size, which is itself set in a second stylesheet). Code at the bottom of each HTML document indicates which sections (<h1>, <h2> etc) are replaced by which flash movie file.

I've got five flash movie files, each one replacing a different header (h1, h2, h3, h4, h5). The reason for this is because the text I want to show in a nice font is on a coloured background. As background transparency is not supported for Flash in HTML, I've made each movie file with the background that would be shown.

And here's the sIFR site: Mike Davidson - sIFR

[Ursa major]

In my browser (IE7), it looks like hebrew script printed on a dot-matrix printer with a head working with a 4 x 3 character resolution.

[Lenny]

Now that's not a good sign. Do you mind sending me a screenshot of it?

[Ursa major]

I would like to, but when I used the link again, the page looked okay. (I should have mentioned before that the page was no more than 4 times wider than your Chrons avatar when I first looked at it, hence the blocky text.)


As far as I can tell, the font on the items empahsized - though they're no longer highlighted with green(?) - now looks like that show in your first post.


Ah! Found it again:




I see what I've done: I've used your key picture instead of the target. (As the first link wasn't there, I'm no longer "Sorry". )

[Lenny]

Ah, you viewed the post before I added the link to the site! Silly Ursa.

So it works? In which case, I can use one of my favourite quotes, which I also used in the first thread:

Originally Posted by Moi

Buzzin'! 100% success record so far.

[Leisha]

Well, since I didn't get to visit the lakes today, I lurked here for a few mins. And guess what? Yup, Opera is set to ruin you, Len!

I get a white line under the bottom text, and this is on the proper link.

However, since Opera's great and lets me change your source code, I took out this bit and it didn't show the white line (or the copyright text, but that's to be expected):

<script type="text/javascript">
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */

if(typeof sIFR == "function"){

// This is the preferred "named argument" syntax
	sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"Java and CSS/Lisboa-H1.swf", sColor:"#FFFFFF", sFlashVars:"textalign=right"}));
	sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"Java and CSS/Lisboa-H2.swf", sColor:"#FFFFFF", sFlashVars:"textalign=left"}));
	sIFR.replaceElement(named({sSelector:"h3", sFlashSrc:"Java and CSS/LisboaSansSFLight.swf", sColor:"#CD736F", sBgColor:"#EFEFE6", sFlashVars:"textalign=left"}));
	sIFR.replaceElement(named({sSelector:"h4", sFlashSrc:"Java and CSS/Lisboa-H4.swf", sColor:"#FFFFFF", sFlashVars:"textalign=center"}));
	sIFR.replaceElement(named({sSelector:"h5", sFlashSrc:"Java and CSS/Lisboa-H5.swf", sColor:"#FFFFFF", sFlashVars:"textalign=center"}));
};

//]]>
</script>

So it's your javascript that's causing it!



Oh, and I'm running Opera 9.27

[Lenny]

Opera on the whole? I think not. It works fine on mine, therefor I can conclude that it is your Opera that is out to get me.

That script, btw, is what's used to replace the headers with the flash movies.

I'll see what happens if I move it around.

By the way, what resolution is your monitor set to?

EDIT: Try it now.

EDIT2: Gah! You've made me kill it!!

EDIT3: And it's alive again. Phew.

[Leisha]

Gah! My internet crashed AGAIN!!! (I HATE Service Pack 1.)

Yeah, I know what the script does (you're talking to me, remember? ), but when I had a look at what in the javascript code caused the white line, I couldn't find it. Odd. Then again, I'm not used to javascript. I don't work in it.

And I'm on 1440 x 900. However, I keep Opera windowed to about 1000 x 900 (cos I'm silly and like watching the RAM meters in my sidebar ).

[Lenny]

Hmmm... just to satisfy my curiosity, could you try it maximised, please?

[Leisha]

Heh. Sorry you nearly killed it!

And it's the same maximised. I'll have to see what my sister sees when she looks at it (if she does come here again sometime). She's running Opera too.

[Leisha]

Okay, after fiddling around with your code I know the problem lies in the line that adds the text to the very bottom (H5):

sIFR.replaceElement(named({sSelector:"h5", sFlashSrc:"Java and CSS/Lisboa-H5.swf", sColor:"#FFFFFF", sFlashVars:"textalign=center"}));

If I take it out, everything looks fine. If I remove all the other javascript from the bottom of your source code, the rest of the flash text is missing (obviously), but the bottom info plus the white bar are there.

Hope this helps...

[Lenny]

In which case, methinks it's the Flash movie file. I'll upload one that's a pixel bigger and see what that does.

[Leisha]

Yay! I was wondering the same thing (if it perhaps was raising the red colouring 1 pixel too high). I'll let you know once you've fixed it.

(sorry to be a pain )

[Lenny]

I swear you're out to get me, Frank.

Uploaded a new flash movie, by the way. See if it works.

[Leisha]

Beware of Leish.

And... nope. When it's loading you can see the problem better:



The white bar's right at the bottom of the flash file.

You may as well leave it, Lenny. As you say, it works on your Opera and on Ursa's IE.


Edit: Gah! Stoopid Photobucket resized the image! You should have seen it more clearly, but alas not.