Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

PHP/JS solution to needing a custom 'font'


Go to End


4 Posts   933 Views

Avatar
MartinPhone

Community Member, 57 Posts

19 October 2011 at 12:46pm

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!

Avatar
Howard

Community Member, 215 Posts

19 October 2011 at 5:34pm

Edited: 19/10/2011 5:51pm

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)

Avatar
MartinPhone

Community Member, 57 Posts

19 October 2011 at 8:42pm

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

Avatar
swaiba

Forum Moderator, 1899 Posts

19 October 2011 at 10:31pm

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.