Welcome Guest ( Log In | Register )



 
Reply to this topicStart new topic
> Sifr 2.0: A System For Embedding Non Web-safe Fonts, Has anyone tried this?
foolakadugie
post Mar 1 2007, 10:21 PM
Post #1


Premium Member
Group Icon

Group: Members
Posts: 242
Joined: 4-August 05
From: Los Angeles
Member No.: 7,624



sIFR 2.0
an open source solution to rich typography for the web

I plan on trying this soon and just wanted to see if anyone else has had any experience with it. It looks like it could really come in handy.
I was going to try it out and experiment on a past job, but the coding of the website ended up being passed on to a web programmer.
Apparently it uses a combination of flash, javascript and CSS to embed non web-safe fonts into a web page while still making it appear
like a normal html page. What I mean is that the user should still be able to highlight and copy text etc. If the user does not have the flash
plugin or has java disabled it will just revert to the CSS styles using a web-safe font.

Go here to see sIFR in action: http://www.mikeindustries.com/blog/files/sifr/2.0/ (thanks .:Brian:.) smile.gif
You can read more about it at: http://www.mikeindustries.com/sifr/ and http://usabletype.com/weblog/how-and-when-to-use-sifr/

Here is a description from http://www.mikeindustries.com/sifr/

QUOTE
How it works

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

1. A normal (X)HTML page is loaded into the browser.
2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
3. If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".
4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.
Here is some more info from http://usabletype.com/weblog/how-and-when-to-use-sifr/
QUOTE

* sIFR does not require any changes to the (X)HTML code, all the work is done by Javascript, Flash and CSS.
* If the user does not have Flash installed or Javascript enabled then the (X)HTML text is displayed and styled by CSS.
* sIFR is scalable, and when rendered will adjust to the users font size settings.
* sIFR is compatible with all screen readers. No problems or issues have ever been reported.
* sIFR text is selectable with the mouse, although visual confirmation of the selection may be absent when selected with body text.
* sIFR does not affect search engine placement or ranking, nor does it hide textual content from search engines or users.

The conclusion should be that sIFR is an accessible, mature technology, and that its use must be given serious consideration by designers and developers.


This post has been edited by foolakadugie: Mar 2 2007, 04:24 AM
Go to the top of the page
 
+Quote Post
.:Brian:.
post Mar 1 2007, 10:39 PM
Post #2


Premium Member
Group Icon

Group: Members
Posts: 219
Joined: 13-February 07
Member No.: 20,371



Wow, i like the idea of this.

I have often wanted to put some strange font on my site for some reason or another (usually a heading of some sort), and I can't stand when I have to use images for that sort of thing.

The idea of being able to use this for displaying the stuff is nice.

Also, after looking at the page, they do have an example page: http://www.mikeindustries.com/blog/files/sifr/2.0/

So you may want to have a look at it (it looks really nice).

I am not sure if I want to use this or not though, just because I have gotten my site set up, and it looks perfectly fine with standard fonts. But maybe the next time my site gets re-designed? Or maybe some other website?
Go to the top of the page
 
+Quote Post
Mark420
post Mar 2 2007, 12:30 AM
Post #3


The Modernator
Group Icon

Group: Members
Posts: 486
Joined: 6-August 06
From: The Interweb!
Member No.: 15,021



I must say I am VERY impressed by this!! The graphic designer I work with is going to have a mental breakdown over this wink.gif
I am forever telling him to STOP using his thousands of fancy of fancy fonts on stuff that we build..maybe now I can offer a comprimise wink.gif

Thanks a lot for posting this up!!
Marky;)
Go to the top of the page
 
+Quote Post
Valkyria
post Mar 2 2007, 12:43 AM
Post #4


Member [ Level 2 ]
Group Icon

Group: Members
Posts: 58
Joined: 9-January 07
Member No.: 19,280



I'm definitely going to try this out! I'm so sick of the same fonts for all the web, and if you want to add a not-so-common-but-great font, you have to make a big image, which increases loading times, and I usually leave it out...
Now perhaps we can work with more freedom in design. I'll post here what comes out from this.
Go to the top of the page
 
+Quote Post
foolakadugie
post Mar 2 2007, 03:49 AM
Post #5


Premium Member
Group Icon

Group: Members
Posts: 242
Joined: 4-August 05
From: Los Angeles
Member No.: 7,624



Yeah I will play with it soon and I would be interested in seeing anyone else's results with it.
The same old fonts really can get old after a while and it seems like it would definitely make things
easier with fancy headers. This kind of technology really could bring a new look and more freedom
to web design.

I know it says that it is mainly for smaller blacks of text. Do you think the reason for that is that
body type may take too long to render?

I suppose that if this method is used, it would be best to use a typeface with similar proportions to
that of a web-safe font so that if it does revert back to the web-safe font, their won't be any serious
typographic changes that would mess with the layout.

Edit: I found the answer to one of my questions:

from http://usabletype.com/weblog/how-and-when-to-use-sifr/
QUOTE
Loading speed

The rendering speed of the replaced text is an important consideration when using sIFR, and although speeds have been significantly increased since early versions, there can still be a distinct delay if there are many instances of sIFR on screen at one time. This is perhaps the best example of why using sIFR in moderation (ie. one headline per page, or headline per post) is currently the ideal way to use the technique.

This is one of the most frustrating drawbacks of using Flash replacement. The temptation when first implementing sIFR is to replace too many elements on the one page. For this to be viable, loading speeds have to be greatly increased; and although a nice nippy server will help you out, the true culprit is the time that the rather bulky Javascript takes to run.


This post has been edited by foolakadugie: Mar 2 2007, 06:05 AM
Go to the top of the page
 
+Quote Post
pyost
post Mar 2 2007, 10:41 AM
Post #6


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 1,013
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500



Even though I am not a fan of Flash myself, I must admin that this idea/project is very good. It gives web designer a lot more freedom when choosing what fonts to use. Just like Valkyria said, you see the same fonts all the time - Arial, Verdana, Tahoma, Times New Roman and Trebuchet MS - it has become monotonous. Unfortunately, I don't believe this idea will live, since Astahost is the first place where I see it mentioned. Otherwise, it would be all over the web wink.gif Nevertheless, thumbs up for the creators!
Go to the top of the page
 
+Quote Post
closed
post Mar 6 2007, 04:58 PM
Post #7


Newbie [ Level 2 ]
Group Icon

Group: Members
Posts: 26
Joined: 6-March 07
Member No.: 20,755



This tricks is best for headers and some quoted elements not suited for the whole site text replacement coz it used javascripts and flash which make your site too long load.

And the version 3 is currently in beta, new features and some bug fixes.
link: http://novemberborn.net/sifr3/look-into-the-future
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Embedding XML into HTML(2)
  2. Embedding Ads in Forums(4)
  3. Embedding PSD Files Into Dreamweaver(6)


 



- Lo-Fi Version Time is now: 11th October 2008 - 12:43 PM