• Registered: 2006-08-01
  • Posts: 19

Topic: Question about text/layout

I'm not precisely sure where the best place to put this is, but since it's a layout issue, I'm putting it here.

What I'm doing is I have a textarea where the user leaves a comment and then along side of that I have a "live preview div" where the user can see their formatting immediately (a neat toy I'm just messing around with).  So, as they type they can see the allowed tags being parsed and whatnot.

Thing is, this preview area is relatively small (8x30 ems of Helvetica 11pt), and while the text will automatically wrap once it reaches the right edge of the div, if I don't do anything as the post gets long the preview text will spill off the bottom of the preview area and start messing the layout up.

What I'm asking is, is there any graceful way to make a font (especially variable-width) conform to a specific area?  And, beyond that, when we've reached the capacity, how to scroll old characters off the screen and new ones on?

Just a thought experiment.

Thanks,

Andrew

  • ryanb
  • Yardmaster
  • Offline
  • Registered: 2006-06-14
  • Posts: 6,324

Re: Question about text/layout

Check out the overflow css property. You can set it to scroll when the text goes out of the div bounds. You can probably use Javascript to move the scroll bar to the bottom on each update. Not sure about that though.

Railscasts - Free Ruby on Rails Screencasts

ryanb's Website

  • Kelli
  • Illusionist
  • Offline
  • Registered: 2006-05-11
  • Posts: 300

Re: Question about text/layout

You can probably use Javascript to move the scroll bar to the bottom on each update. Not sure about that though.

Or another option for this would be to set the overflow to "none" and then use javascript to scroll the div, if you don't want ugly scrollbars. Here's an example of usingn this technique for horizontal scrolling. For vertical scrolling, you just need to effect the top or bottom margin instead of the left or right.

KSD

Kelli's Website

  • Registered: 2006-08-01
  • Posts: 19

Re: Question about text/layout

Thanks!  Something like that was exactly what I needed.