I am very new to web development, and I need to create objects that contain text in a box with rounded edges, as in the image
The size of the border should grow with the size of the text.
I can’t use any css libraries or css3 border-radius. Would anyone mind pointing me in the right direction? I don’t want full working code – I want to figure the details out on my own – but a list of links or subjects to research would be much appreciated.
Thanks!
—edit—-
I also can’t use any css or javascript libraries. I’m doing this for an assignment rather than a real-world scenario – hence the limitations.
Well, if you don’t use libraries and css3.. you have two options:
Slice up images of a rounded rect, put the text within a div and create a bunch of other divs with background set to those images, details can be found here
Use a canvas refer here
Don’t worry, canvas isn’t a library, its a part of the Html5 spec (though I don’t know if you can use html5) Read more about canvas and how to use it here and a simple tutorial here. How to draw text within a canvas is explained here