Archive for February, 2009

Custom Fonts in Silverlight

This is the first of many Silverlight posts.  Just a quick note of how to create a Silverlight style with a custom font.



The FontFamily is set to the font file name, hash and the font family name.  There is a great video about it here.

Advertisements

sIFR 3 for Navigation

I couldn’t find any documentation on how to use sIFR for navigation but found plenty of forum posts about people using it (I’m sure I’m missing something).  So I thought I should make a quick note about how to use it.

sIFR replaces <li> tags to create a horizontal or vertical navigation.  I don’t know if <li> tags are the only way to do it?

<ul class="flash_nav">
<li><a id="menu_home" class="degradingLink left_menu" href="index.html">Home</a></li>
<li><a id="menu_diary" class="degradingLink left_menu" href="diary.html">Diary</a></li>
</ul>

And the CSS in the sifr-config.js goes

sIFR.replace(letter_gothic, {
selector: 'ul.flash_nav li',
css:    [
'.sIFR-root {color:#000000; cursor:pointer; text-decoration:none;}',
'a { color: #000000; text-decoration: none; }',
'a:link { color: #000000; text-decoration: none;}',
'a:hover { color: #666666; text-decoration: none;}',
]
});

Degrading Link and Image

Here’s some code that I’ve been using all over.  It displays and image with markup for degrading gracefully.  Nothing fancy but very useful.

The CSS

.degradingImg {
display:block;
text-decoration:none;
background-repeat:no-repeat;
}

.degradingImg span{
left:-9999px;
position:relative;
}

The markup

<div id="header_cern" class="degradingImg"><span><h1>CERN - European Organization for Nuclear Research</h1></span></div>

A link works in the same way but makes a block of and ancor tag.

The CSS

.degradingLink {
display:block;
text-decoration:none;
background-repeat:no-repeat;
}

.degradingLink:hover {
text-decoration:none;
opacity: 0.5;
filter: alpha(opacity = 50);
}

.degradingLink span{
left:-9999px;
position:relative;
}

The markup

<a id="thumbs_2" class="degradingLink left_menu" href="particles_matter.html"><span>Particles Matter - What are Particles?</span></a>

Font Replacement

Just been doing some research about font replacement.  The conclusion is that – for the time being – sIFR is the only crossbrowser solution.  But there were some interesting projects I wanted to keep a note of.

Microsoft EOT is still around and has been submitted to W3 for standardisation.  If it becomes a standard it will allow DRMed fonts on the web making everybody happy.

CSS3 @font-face looks great and should be a standard but is currently only working in Firefox 3 (and probably Webkit but I haven’t checked).

Typeface is similar to sIFR but only uses Javascript and Canvas.  It doesn’t let you convert copyrighted fonts.

On a final note there are quite a few websafe fonts out there.

Edit: There is now something called Cufon that does font replacement through the Canvas tag.