Choosing the right technology/library for adding user specified text on a path in previously defined regions

Question

I am building an admin area using CodeIgniter 2, where the admin has the ability to add specific images that are "blank", when it comes to text overlay. When they upload the image, they should have a way of defining certain paths on which regular users can add desired text. Basically, this can be used for shirts, mugs...any type of custom printable surfaces.

The paths need to support straight lines, bezier curves and circles. And one base image needs to support multiple paths.

I used the Raphael JS library and SVG.

Here is my current approach:

• I open up the base image in InkScape and draw a path
• Export the path as SVG
• Use that path for creating a Raphael JS path
• Place the text on that path

The problem with this approach is that some letters display rather strange when placed on a curved/circular path and I can't quite place it exactly where it needs to be, so there is some offset letters that I just can't have.

Here is a sample site of where this kind of stuff has been implemented using .net. Basically, you enter the text in Line 1, Line 2 etc. and it displays on the badge on the right hand side. It also retains the text in the defined region, so if you enter more text than can fit in the region, it squeezes the text so it could fit.

Does anyone have any pointers for me as to what I should be looking for? Main points being: the paths/regions need to be defined by the admin (using JS or a third party application) and the text must be placed on those paths.

This does not have to be done using HTML5, it can be done using any kind of PHP library as well.

Answer 1

Right, if your paths can be defined by an admin, rather than by the user, then draw them in Inkscape and get Inkscape to do your rendering on the server. This is easy to achieve on the command line, though of course you'll need admin access to your server to install Inkscape. Then, where a path needs to support text, give it a special id that you can recognise in your application, then rewrite the SVG file using one of PHP's XML writers, and convert using Inkscape to PNG output.

If you get text input from users then you'll need to do a certain amount of cleaning (swapping angle-brackets to their htmlentities etc) but otherwise it's quite easy. Files take around 0.7 sec to process on my dev machine, and if you expect much in the way of load, you can do it on a queue.

Edit: it's not as quick as Raphael, but it's much more reliable in terms of browser support. I've not looked into Raphael much, but I'm pretty sure the text flow stuff I'm doing just doesn't have good support client-side (yet, anyway).

Edit 2: this is what my current work looks like. The item on the left is an SVG template, rendered in-browser as a low-res PNG image, and the input boxes on the right are editing boxes (the last one containing symbols is using a home-made markup syntax, in case you're wondering). Now, the red outlines are bounding boxes that are retrieved using the Inkscape CLI. So, since we can detect an outline, in your case, you could determine by what percentage some text has overrun, and reduce the font-size inside a tspan element accordingly. (When you say "transform", I presume you mean "reduce in size").

That would be in effect a poor man's auto-fit feature. It would be nice if there was direct support in SVG for that, but I am not aware that there is. But, it does sound like the above suggestion would work for your case.