I need to store in a database pieces of text and the size of the layer that will wrap the text in the browser screen (I cannot build the layer in the client side - it is a requirement of the project). The whole piece of text must fit into the square layer properly. Users will be able to use different font size and font families from a small group of options and we'll know the selection at the time of computation.
Right now, I compute the layer volume based in the theory that every character size is its font-size pixels height and 50% of the font-size width. With the 50% value, I got the best approximation for the average cases, but it is still not a good solution because it cuts pieces of text or leaves too much blank space at the end. And it's even worst with some wider font-types.
Any idea on how to approach this problem?
Given how easy it is for users to override font choices in the browser, at best this would only be a "best guess" attempt, but you could use GD to draw the text and then compute a bounding box for it using imagettfbbox().
But this only supports simple text, so if you're doing "complicated" stuff with boldface/italics, variable sizes, etc.. then you're SOL for the most part.
Given the requirements, the only way to do this 100% guaranteed is to:
Render the image on the server -- this can be to a normal image, to a vector format such as SVG, or even (more extreme) to Flash -- and use the generated output on the client in some form which guarantees precise rendering as any CSS rendering/local-font issues may differ from the server-generated values and is thus unreliable!
The exact dimensions of the box are thus known independent upon local font rendering issues as they depend only upon the servers "view".
Happy coding.