WEB typeface.js

Discussion in 'OT Technology' started by drpepper, Oct 28, 2008.

  1. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
  2. Die Antwoord

    Die Antwoord New Member

    Joined:
    Nov 5, 2007
    Messages:
    7,913
    Likes Received:
    0
    Location:
    Orlando, FL
    Awesome thank you. :bigthumb:
     
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    After reviewing I have come to the conclusion that...

    typeface.js > sifr
     
  4. themolsen

    themolsen New Member

    Joined:
    Sep 29, 2006
    Messages:
    7,414
    Likes Received:
    0
    Location:
    Jacksonville, FL
    totally
     
  5. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    I'll take sifr over typeface.
     
  6. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    How come
     
  7. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    the JS is busy as fuck:

    vs

    SIFR

    -no support for highlighting
    -weak support for CSS
    -no support for pseudo classes
    -flash > JS :o
     
  8. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    Some valid points you make there, sir. No highlighting + psuedo class support I didn't even consider. I assume the weak support for CSS follows along with psuedo classes though. :o
     
  9. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    noob. they all valid
     
  10. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    ul:has(li)
     
  11. Supergeek

    Supergeek New Member

    Joined:
    Jan 23, 2007
    Messages:
    1,855
    Likes Received:
    0
    Location:
    Colorado
    What is the percentage of users that have

    Flash plugin installed
    vs.
    Javascript enabled

    ?

    I know Flash has enormous market penetration. Is Javascript coverage even better (since most people have no idea how to turn it off)?

    The only thing I worry about with Flash is downgrading to a non-Flash client, but the percentage of them is pretty low.
     
  12. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    That was one of the points I was debating with myself when doing the analysis but then I realized sifr also uses JavaScript to implement their idea, along with highlighting, and support for psuedo classes, etc.

    So basically, the support coverage looks something like this:
    flash and javascript enabled: sifr, typeface
    just javascript enbled: typeface
    just flash enabled: none, they'll both degrade gracefully
    javascript and flash disabled: none, they'll both degrade gracefully

    Looking at that, you might think that you'll more coverage on users using typeface, but not by much.

    According to w3schools, 95% of users have JavaScript enabled, 5% turned off. According to adobe, 98% of users have flash installed. I wouldn't rely on these as reliable source, because I would assume most users who go to www.adobe.com DO have flash installed (or leave the site with it installed). And I would assume people who go to www.w3schools.com would also have JavaScript enabled. But if you were to use these percentages as a reliable metric for the deciding factor on whether to use sifr or typeface, they would be marginally equal.
     
  13. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    its like 99% of people have flash, and a little less hve JS enabled
     
  14. saw this on webresourcesdepot.com and gave it a try.

    for the most part, it works awesome, but be careful with font styles...a lot of them won't be supported unless you convert that individual font-style font (if it's a separate file)
     
  15. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    another reason i like sifr :o
     
  16. yeah, i used a helvetica neue that had a seperate font file (.otf?) for each style, condensed, medium condensed, oblique, medium oblique, etc....and typeface.js won't support doing just a font call and setting it's style to medium oblique. you'd have to convert the actual font file through their website for it to work. -__-
     
  17. Supergeek

    Supergeek New Member

    Joined:
    Jan 23, 2007
    Messages:
    1,855
    Likes Received:
    0
    Location:
    Colorado
    Thanks for the detailed response! :bigthumb:
     
  18. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    not really necessary. typo is not a functional element, if the user doesn have flash or JS, no biggie, they don't get all the bells and whistles.
     
  19. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    The margin of people who will hit that niche is so tiny it's probably not even worth the effort.
     
  20. Mikenotmike

    Mikenotmike

    Joined:
    Jun 1, 2001
    Messages:
    6,244
    Likes Received:
    0
    Location:
    USA
    I ended up using sifr yesterday for a project, didn't try typeface.js.. sifr was sort of a bitch for me as I didn't realize how tricky the "font ratio" was between the .sIFRhasflash class and the regular <h1> class, I kept getting this weird padding at the bottom and all the google searching I did kept leading me to false solutions....

    Either way I'm glad to have it as part of my arsenal now :cool:
     
  21. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    It's pretty clever what they've done with sifr and typeface but I found it caused so many annoying glitches and problems with various browsers and mixing with CSS and graphics. Maybe they've solved a lot of that since then?

    I came to the conclusion that I could have far more control and better performance by a script that could create and render my fancy headings with GD, and include graphical effects and the like. Rendered to a static image, and the knowledge that it'd work perfectly.
     
  22. Mikenotmike

    Mikenotmike

    Joined:
    Jun 1, 2001
    Messages:
    6,244
    Likes Received:
    0
    Location:
    USA

    can you elaborate more on that method?
     
  23. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    A simple script that I based on some code I found somewhere, to be used like this as an example:

    <img alt="Development" src="/title.php?title=Development"/>

    And would come out with something like this:

    [​IMG]

    Code going like this:

    Code:
    
    $title = strtoupper( html_entity_decode( $_GET['title']) );
    
    $fontfile = 'MyriadPro-Bold.otf';
    
    $width  = 505;
    $height = 31;
    $size   = 32;
    
    putenv('GDFONTPATH=' . realpath('../config/fonts') );
    
    $image = imagecreate($width, $height);
    
    $gray  = ImageColorAllocate($image, 223, 226, 228); 
    $blue  = ImageColorAllocate($image,  10, 166, 255); 
    $white = ImageColorAllocate($image, 255, 255, 255);
    $black = ImageColorAllocate($image,   0,   0,   0);
    
    // Set up dotted line
    $style = array($blue, $white, $white);
    ImageSetStyle($image, $style);
    
    ImageFill($image, 1, 1, $white);
     
    // Get the bounding box for the text
    $bb = ImageTTFBBox( $size, 0, $fontfile, $title);
    
    $textwidth   = $bb[2] - $bb[0];
    $textbottomy = $bb[1] > $bb[3] ? $bb[1] : $bb[3];
    $textbottomy = $textbottomy < 0 ? $height - 2 : $textbottomy; 
    
    // Draw line
    ImageLine($image, 0, $height - 1, $width - 1, $height - 1, IMG_COLOR_STYLED);
    
    // Output title 
    ImageTTFText($image, $size, 0, $width - $textwidth - 2, $height - 1, $gray, $fontfile, $title);
    
    header('Content-Type: image/gif');
    
    imagegif($image);
    
    imagedestroy($gd);
    
    
    That's quite old code now and I'd make a few changes. Being some exception handling to make sure resources get cleaned up, caching the image so that it doesn't get re-generated each time.
     
  24. Mikenotmike

    Mikenotmike

    Joined:
    Jun 1, 2001
    Messages:
    6,244
    Likes Received:
    0
    Location:
    USA
    I like that, saved for future use. Doesn't seem like a good seo solution, so unless I'm missing something, I'll save it for use in titles that don't "define" the page. :cool:
     
  25. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    except it doesn't degrade like typeface or sifr
     

Share This Page