# Site Re-re-Design: Attack of the Fonts



## Lenny (May 24, 2008)

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 (May 24, 2008)

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 (May 24, 2008)

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


----------



## Ursa major (May 24, 2008)

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 (May 24, 2008)

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:



			
				Moi said:
			
		

> Buzzin'! 100% success record so far.


----------



## Erin99 (May 24, 2008)

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 (May 24, 2008)

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.


----------



## Erin99 (May 24, 2008)

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 (May 24, 2008)

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


----------



## Erin99 (May 24, 2008)

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.


----------



## Erin99 (May 24, 2008)

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 (May 24, 2008)

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


----------



## Erin99 (May 24, 2008)

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 (May 24, 2008)

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

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


----------



## Erin99 (May 24, 2008)

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.


----------



## Lenny (May 24, 2008)

How about now?


----------



## Erin99 (May 24, 2008)

YAYAYAY!

Second load worked!!!

I even cleared my cache and tried a third time, and no mistakes!


And if you're wondering what it looked like after the first load, here:


----------



## Lenny (May 24, 2008)

So it all works properly? Does this mean I can claim two out of two?


----------



## Erin99 (May 24, 2008)

YES! Success rate: 100%

And I just tried it in IE7. First load didn't go anywhere; second load worked perfectly!


----------



## Lenny (May 24, 2008)

Well, seeing as I've defeated Leisha and the All-Powerful Opera, does anyone dare step up and challenge the Mighty Emu?


----------



## Rane Longfox (May 25, 2008)

Heheh, I'm on Opera 9.27 too... and it looks fine. The only thing is, it takes a little while for the dates and copyright stuff to flash into place - there's a white box there for a very short time before... don't know why that is.


----------



## Lenny (May 25, 2008)

The white box is the flash movie. Methinks it just takes time to load.


----------



## HoopyFrood (May 25, 2008)

Right, well, then I go and spoil it all by saying something like -- I get this:








And I'm running Firefox 2.0.0.14


----------



## Lenny (May 25, 2008)

There's always one, isn't there? 

---

Right, I've changed the H4 flash mvie file which is the "Lenco. Productions" bit), and I've changed the font size of the warning, which should put it back onto one line, so try it again and see what it does, please.

What's your monitor resolution, out of interest?

EDIT: Actually, I don't know if it will go back onto one line... ah well, that's what makes experimentation so fun!


----------



## HoopyFrood (May 25, 2008)

I do apologise. And I'm afraid it's still the same.

My screen resolution, apparently, is 1280x800


----------



## Lenny (May 25, 2008)

Exactly the same?! Could you try a Ctrl + F5 just to make sure, please?

Oh, are the other bits OK?


----------



## HoopyFrood (May 25, 2008)

Ah! Sorted. It's fine now.

However, there's also this white line that extends beyond the edges -- I don't think it's supposed to do that?


----------



## Lenny (May 25, 2008)

That'll be a bad height somewhere - one tiny thing is a pixel out, or a bit of text is a size too big. 

The reason it extends beyond the edges and suddenly stops is because the graphics with shadow are in cells in the table which have a background colour of white (#FFFFFF), and are set to not repeat if the the cell is forced bigger than it should be, which is what's happening there - something from the last blog sections is a pixel bigger than it should be, which forces the things below it down a pixel, making the white line appear.

And now (Ctrl + F5 again - F5'ing simply refreshes the page. Ctrl + F5 clears the cache and reloads the whole page, including any elements it uses to load, in case you're wondering)?


----------



## HoopyFrood (May 25, 2008)

Yes, I'm aware of what F5 and Ctrl does.

Pesky white line is still there.


----------



## Lenny (May 25, 2008)

Gah.

How about now?


----------



## HoopyFrood (May 25, 2008)

Still there, I'm afraid.


----------



## Lenny (May 25, 2008)

Hmph. You're as bad as Leisha!

Right, I think I'll go through all the code and look for irregularities, then. I'll post when I reckon I've solved it.


----------

