Dynamic textfield ?

[Yammaski]

When typing a name in a textfield, the name has to show up in another part of the page. The name also must appear in the choosen font from a menulist of available fonts. The font has to change when selecting another one.
Is this possible with js ?
I searched the net to find something likely. But this one is very complicated !
http://www.speedgraphics.net/lettern...ing_pop_up.php
Where do I start to create something like that ?
I only need this part :

[jscheuer1]

In about the simplest terms:

http://home.comcast.net/~jscheuer1/side/text/

Use your browser's 'view source' to get the code.

[Yammaski]

Thanks a lot John !

[Yammaski]

One more question :
Is there a way to embed fonts to it ?
Because I have a few fonts which are not available on every body's pc.

[jscheuer1]

I'm not all that familiar with font embedding. I think there are at least two ways to go about it, probably more. If the method you choose is transparent, that is if it allows you to specify fonts in your css as you normally would, the existing code will most likely work with that.

If you already have a method for font embedding that you are happy with, what is it? If not, find a method of font embedding that you like and get back to me.

[Yammaski]

I found css methods with Google : "embedding fonts css"
I don't know another way to do it !

[jscheuer1]

If that's WEFT, it will only (afaik) work in IE. However, support for it or something like it is coming to all browsers eventually (CSS 3). It works really well in IE though and should be transparent as defined in my previous post.

I can Google what you Googled, but there is no guarantee I will come up with the same method you did. What is it called? What page did it take you to?

If you are also looking at TrueDoc or Bitstream, I don't believe these are supported by any modern browser.

[Yammaski]

Hi,
I've been reading around and I didn't knew it was that complicated.
It seems that there's no real solution that can be used for all browsers simultaneous !?
In the broncode of the link I mentioned before, I can see that they link to their fonts with this function/code :

function show_fonts()
{
 url="/letternator/get_font.php?t="+escape(document.f1.text.value);
 open(url,'fonts','width=700,height=600,top=150,left='+(screen.width/2-350)+',toolbar=no,location=no,scrollbars=yes');
}

To let it work in the most used browsers, I think I should do it like the following :

/* CSS 3 Font Embed */
@font-face {
    font-family: "your FontName"
    src: url( "/location_of_font/FontName.eot" ); /* IE */
    src: local("real FontName"), url(" /location/of/font/FontFileName.ttf" ) format("truetype"); /* non-IE */
}  

/* THEN use like you would any other font */
    .yourFontName { font-family: "your FontName", verdana, helvetica, sans-serif;
}

Here I found it, but this page is not working in IE6, IE7 and IE8. It does work in FF 3.6.3 and Chrome 4.1.249.1045. In Safari I don't know.


Method : TTF ànd EOT

You can see the fonts I'am using in my static example-page.

[jscheuer1]

Their page doesn't work in IE, so either its advice for IE is wrong, or they haven't followed their own advice correctly.

Here's a page that works in IE:

http://www.spoono.com/html/tutorials/tutorial.php?id=19

Follow their advice for IE, see if you can get it working on a separate page. If so, we can use conditional comments instead of hacks to get the two working together on one page. But first you will have to get each method working separately.

[Yammaski]

Hi,
I tried Spoono's advice, but for some reason "WEFT" won't work. It starts up and after a while it shuts down. Maybe it's because my Win7 Pro 64 bit-system !?
Anyway ... I did it this way and used this converter.
My prototype-page
I hope it works on your site, I added 2 images to compare the fonts.
When the text becomes larger/wider then the box, it will overflow.
Is it possible to resize the text automatically so it will fit in the textbox ?
Textbox may be max 440px wide (max 40 characters can be filled in).