PDA

View Full Version : JS Resize text like an image



akrylic
Oct 24th, 2010, 09:46 AM
Hi,
I was wondering how to resize a div containing some text by setting a width and height so it would stretch to fill that area like an <img> tag? E.g. when you set the width and height attribute of an image, it resizes the image to fill that area. I do not wish to send a request to a php script to build an image containing the text since it will be slow and affect the scalability of the web app. Oh, and I would preferably not like to use html5 because it is a requisite that I need compatibility with ie7+ (and firefox/chrome).

Thanks,
akrylic

Philip M
Oct 24th, 2010, 09:55 AM
Have a look at:-

http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.htm


It is your responsibility to die() if necessary….. - PHP Manual

akrylic
Oct 24th, 2010, 10:55 AM
Hi,
That looks interesting but I need to be able to specify an arbitrary width and height and have the text "stretched" to fill that space, so that is not quite what I'm looking for.

siberia-man
Oct 24th, 2010, 01:45 PM
... how to resize a div containing some text by setting a width and height ...

Thinking that all you need is modify width or height properties of an element:


var el = document.getElementById(...);
el.style.width = ... + 'px';
el.style.height = ... + 'px';

akrylic
Oct 24th, 2010, 02:08 PM
This will resize the div itself, but the text will stay the same size. I need to stretch the text (even if it ends up looking horrible) to fit some dimensions. If you have an image that is say 600 by 400 pixels and have an img tag with a width of 100px and a height of 100px, then the image is stretched to fit the 100x100px position that is provided.

siberia-man
Oct 24th, 2010, 02:46 PM
el.style.fontSize