How can I create a similar Penzu.com style text area?

2 replies
Hi, thanks for checking out my post.

I'm having a wordpress site developed for me and one of the features of the site will be to give members the option of writing notes on lessons they study, these notes will be added on the content page itself. I've always been a huge fan of the A4 paper style background when writing in my journal at Penzu.com, for instance the text appearing perfectly just above each line looks so slick.

This got me thinking about how I could create a similar effect on my wordpress site. I got my developer to use a lined paper background for the text area where my members add their notes; however, getting the text you type to appear perfectly just above each line is the really hard part. We've played around with varying pixel sizes for the font, but nothing ever looks as slick as what the guys over at Penzu have accomplished.

Does anyone reading this have any ideas on how we can get the text to appear perfectly just above each line (Penzu style), is there any fancy coding involved? We're really struggling with this and would love any help and tips you could give us.

Thanks everyone,

Chris Curwen
#area #create #penzucom #similar #style #text
  • Profile picture of the author WillR
    I would have thought it was just a matter of playing around with the text size, the text spacing, and where you actually place the paper background on the page.

    I tried doing the same thing in Photoshop with an A4 page background and it took me a little try and error but I finally got the right text size and spacing that worked.

    If you are really stuck, you could sort out the text and then get someone to create the background for you based on the text so it definitely fits.
    {{ DiscussionBoard.errors[3339901].message }}
    • Profile picture of the author rosetrees
      I don't think it's quite as simple as that.

      If you view penzu in Internet Explorer and use the text resize function, the text doesn't resize. On most sites the text will resize and the graphics will stay the same size.

      I'm sure someone much more knowledgeable than me will come along and explain that the site is rendering in Java - or something!!
      {{ DiscussionBoard.errors[3340686].message }}

Trending Topics