Jump to:

23450 Posts in 18899 Topics by 2877 members

General Questions

SilverStripe Forums » General Questions » PHP/JS solution to needing a custom 'font'

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 479 Views
  • MartinPhone
    Avatar
    Community Member
    57 Posts

    PHP/JS solution to needing a custom 'font' Link to this post

    OK not quite sure where to start here -

    I'm working on something which has a diy/collage look & feel. The typography is very simple letters as if made from glued strips of paper. So I'd like to be able to enter text in the CMS and have it appear in this 'font'. Just menu items really.

    http://www.doubledotdash.org/sss/index.htm

    So the question is how!

    Create a new font from the images I have and embed it? I wouldn't mind but I can't find any software to help with this.

    Is there a javascript/php script out there that will take a string, examine each letter and pick from a source image or images the correct letter and piece it together?

    Will I have to write this myself (somehow?!)

    Any pointers will be appreciated!

  • Howard
    Avatar
    Community Member
    215 Posts

    Re: PHP/JS solution to needing a custom 'font' Link to this post

    Hey Martin,

    There are a number of different ways that you could do this. The simplest way (and probably the least semantic) is to do as you suggested and make a image for each letter and just include them with javascript. The problems with this are the actual kerning of the letters is difficult to control and you would maybe want to think about a none js fallback. To get you started here is some jQuery based javascript that might come in handy:

    // The HTML
    <ul>
    <li id="menuItem1">Contact Us</li>
    <ul>

    // The jQuery
    $("#menuItem1").html(
    $.map($('#menuItem1').html().split(""), function(char) {
    return "<img src='images/crazyFont/"+char+".png' alt='"+char+"' />";
    }).join("")
    );

    This will take the contents of the first menuItem and convert it into a series of images which you will need to create in images/crazyFont/a.png etc...

    Hope this point you in the right direction. Depending on if this is just for yourself or a client you may want to put some sort of validation on the menu field so that they dont try to include characters that you dont have images for.

    P.S. You can see it in action here http://jsfiddle.net/FRmKb/1/ (obviously the images don't actually work)

  • MartinPhone
    Avatar
    Community Member
    57 Posts

    Re: PHP/JS solution to needing a custom 'font' Link to this post

    Howard, that's just perfect! Thank you very much for that - it's going to be very helpful!

  • swaiba
    Avatar
    Forum Moderator
    1788 Posts

    Re: PHP/JS solution to needing a custom 'font' Link to this post

    To add to the options there is sifr and cufon too. I just searched for a sifr module (I am sure there was one by willr) but only found one by nicolaas that I dont' recall using.

    479 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.