Writing from a form to a webpage in real time

[Bes]

Hi

I am looking for a way to write from a textbox to an html element in real time... For example, as the user types into a textbox, the text is writtern out elsewhere on the screen.. That is easy to do.... but it must be in my chosen font (The user won't have this font on their computer)... Is this possible?

Thanks

 

[RobH]

Off the top of my head I can only think of an AJAX request to a Flash (SWF) file with an embedded font. You might also need some server side scripting in there to deal with the communication between the Flash file and the AJAX request. The easiest way would be using something Like PHP and GD but that is not done in real time, I guess it could be but that might require a lot of server resources.

 

[Bes]

I can do it real time using ImageMagick's MagickWand API for PHP, but again it is heavy on the server and formatting isn't 100%.. I think thus might be the way I do it.

Thanks

 

[unwashed potato!]

does the font have to be actual text or can you use an image of the letter? if so you could just simply use javascript. onkeyup check what the letter is, get the image required, show that image.

 

[Sic]

The problem with doing that, Mammalian, is that you have to get the spacing absolutely perfect, and it's different for each letter, ergo impossible with chopped out images if you actually want it to look right.

Your initial idea is probably the way to go Bes, or look at sifr. Not sure if you can change it dynamically without page load, but read the docs; I'm sure you'll find something

 

[unwashed potato!]

The problem with doing that, Mammalian, is that you have to get the spacing absolutely perfect, and it's different for each letter, ergo impossible with chopped out images if you actually want it to look right.

ah shucks. surely it wouldn't look that bad if all the text had the same spacing? i guess it depends on what Bes is using this for and what font is being used.

 

[Sic]

Yeah, it does largely depend on the font, but I had to do something similar for an eBay company and some of the fonts just looked awful in places. They ended up putting a disclaimer at the bottom saying to the effect "the product won't look anything like this". Still paid, though

 

[ChrisB]

I think IE will support what you're after, however I'd advise against it.

Firstly you need to convert your font to an open embedded type:
http://www.microsoft.com/typography/web/embedding/weft3/default.htm

Then, using css, you have to declare the font face (IE will download it at this point)

@font-face {
  font-family: "Your special font";
  src: url(http://www.YourSite.com/SpecialFont.eot);
}

Then you should be able to use it normally, i.e.

#ExampleDiv {font-family: "Your special font", arial, sans-serif;}

Plus you've got the fall backs to the ones already installed on the OS.