October 26, 2010

Javascript resize text as an image

Question by Andrew Jones

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 tag? E.g. when you set the width and height attribute of an image, it resizes the image to fill that area. I need to take an arbitrary width and height value and stretch a div containing text to those dimensions. 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.

Answer by Starx

Ok, Here is how to do that.

http://www.jsfiddle.net/Zp8AH/

However, some factors like Font Family, Division width have to be fixed, in order for this code to work.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!