Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Typewritten Web Page

I'm creating a page for a friend's band and they want "it to look like it was made on a typewriter" Now i downloaded me a nice typewritery font. And snazzy it is too. But until CSS allows me to make users download my font i can't use it just as text. I see myself with three options: 1. make images using photoshop Pros: Looks how i want it to look- can add other effects. Cons: It'll mean that I personally have to do EVERY update on their site 2. make the content in flash Pros: Can load data from a text file so they can update the site theyself. Cons: I have absolutely no idea how to do this. And scrollbars? How do they work in flash again? 3. Use PHP GD to create images Pros: If it works it'd be nice Cons: loads- how do you know how tall to make the image? I got some wierd newline errors when i tried tihs- i'm not exactly clued up on the GD front. What would you suggest?
«1

Comments

  • Options
    MarkMark Vanilla Staff
    the gd option will be a big pain. The flash option is nice, I guess, but I don't do flash. I hate the idea of constantly being harrassed to make changes. I'd recommend courier or sans-serif.
  • Options
    http://www.flowerburger.com use sifr for headings and courier for everything else. xhtml/css is the only to go.
  • Options
    edited April 2006
    Yeah, I'd go with Courier New. Are these the types of looks your going for - http://www.fox.com/prisonbreak/bios/ http://www.nbc.com/The_Office/
  • Options
    edited April 2006
    http://www.spoono.com/html/tutorials/tutorial.php?id=19 that may help you. keep your font, display it as text.
  • Options
    edited April 2006
    Use the pre tag? :)
    I'm all for it :)
  • Options
    Embedded fonts only work in IE right now as pointed out in the tutorial.
  • Options
    lechlech Chicagoland
    sifr is a good method of faking it at least when it comes down to the headers. You can easily duplicate the typewritter effect with a decent assortment of standard fonts and using the correct weight/size achive pretty much what you want without skimping on the effect. I would recommend not using flash, that's pretty much creating a major headache for yourself in the long-run. Instead, just toss together a nice template atop an existing cms and do it all in css. GD would help things along providing you work out a system to manage the users ability to create their own headers.
  • Options
    why not use something like Courier as the secondary font, and then make a note somewhere asking folks to download the font (free) and sort them out? font-family: 'Styling special font', courier, serif; might be a decent work-around
  • Options
    I'm all for courier.. but having not seen the typewriting font you're looking at I have no idea. Also as mentioned you can use GD to grab text from a text file and convert it to an image. That's probably an idea.
  • Options
    I don't know why but when GD does that font writing it ends up looking really bad imho.
  • Options
    Check out A List Aparts <a href="http://www.alistapart.com/articles/dynatext/">Dynamic Text Replacement</a> Article. Text ist replaced via JavaScript with GD-generated Images. It's accessible for users and searchengines and very easy to set up.
  • Options
    I might go for Courier New for the main text and GD for headings. That one for the office looks good (it even uses the same coffee stain brush i was thinking about using :P) Might be a bit of a headache to design, but twill all work out in the end. Thanks for the advice/convincing me courier can do the trick
  • Options
    Keep in mind you can use Sifr, and have it fall back to the GD-created image if the user isn't running flash. Also keep in mind that, if you use GD, you can cache the generated images on the server to keep performance up, since headlines don't change much.
  • Options
    I want to recant my opinion that GD replacement doesn't look very good. That ala article is sweet, and the example is very nicely done. Takes a very difficult font and replaces text with it quite well.

    Seems like a simple script, and exchanging it for H2 and H1 is an easy gig.

    Might start messing with that myself...
  • Options
    that example had me confused for a minute... is a fontache anything like a moustache?
  • Options
    I thought it was more like a headache
  • Options
    hahahaha...

    Isn't it just a matter of adding the php code as an include or a require, loading the font to somewhere, pointing the script to the font and then telling it that H1 and H2 need to be rewritten as that font?

    seems pretty simple.

    Tell ya what... I'll try it, and then I'll write it up and point out the link if I'm successful. I really should refrain from saying that anything looks "good" or "simple" until I've done it myself...
  • Options
    edited May 2006
    This just got a lot more interesting:

    sifr
  • Options
    Didn't navitron mention sIFR back in the third post?
  • Options
    If you want it a little more authentically worn and less 'perfect' than Courier, here are some free typewriter fonts for using with DTR/sIFR, or a selection of other commercial fonts, which won't necessarily break the bank. Some good classics include American Typewriter or Trixie.
This discussion has been closed.