SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    seattle.usa
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how'd they do that? apfonts.com

    i thought this was pretty cool - you can enter some text to see how the fonts might look with your copy. i'm just curious to know how it was done? i'm assuming it was javascript..

    http://www.apfonts.com/s/en/fonts.php

    how do they do that?

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use AJAX and server side image creation or you could use Javascript. Here's an article on it - http://www.alistapart.com/articles/dynatext/

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    From the look of it that site uses AJAX and server side image creation since there is lots of Ajax code in the source and the main "text" is an image.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    seattle.usa
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx guys

  5. #5
    SitePoint Enthusiast Sjoerd's Avatar
    Join Date
    Jun 2005
    Location
    Leimuiden, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another way to do it is by creating all seperate characters and load them like this:

    HTML Code:
    <div id="example" style="border: 1px solid black; width: 300px; height: 70px;"></div>
    <input type="text" onkeyup="document.getElementById('example').innerHTML = ''; for (var i=0; i < this.value.length; i++) {document.getElementById('example').innerHTML += '<img src=\'char_' + this.value.charAt(i) + '.jpg\'>'}">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •