Server side calculation for client side text width

Question

Environment: ASP.NET MVC C# application.

Business case: creating a diagram which includes vertical column of labeled boxes, using divs for the graphics and text inside the divs for the labels. The divs and labels have fixed widths and variable heights. The height of the label , based on line count, determines the height of the div which in turn determines the top-position of the next div/graphic below it. (See image below).

Code architecture: the graphic heights and top positions are calculated at the server, and are also exported for use in other graphic formats; changing the location of that code is not in scope. The client JS code uses "word-wrap" and "break-word" to nicely fit the labels into the div/graphics (with truncation using "overflow hidden" as needed).

Code Detail: The label height is currently calculated at the server by looking for line breaks. The line breaks are determined by counting characters (and also doing complicated things with "break characters" eg blank, dash, comma). The count limit at the server for one line is 20 characters (this can be easily changed).

Issue: The JS/CSS produces different line breaks than the server side calculation, largely because of differences in character widths. For example, "BBBBBBBBBBBBBBBBBBBB" will be wider than "iiiiiiiiiiiiiiiiiiii" on the client (as seen here).

As a result, the "B's" will wrap after 17 characters, and require two lines, which the "1's" will fit on one line.

The problem then is that in some cases the server will calculate the need for a two-line height when only a single line height appears on the client display. In that case the div is taller than it needs to be, and the position of the div below it is lower than it needs to be. (The business case has been simplified; the visual result in the actual case is a little ickier because of the div height issue.)

Needed: a way to more accurately calculate the expected line count for the labels at the server, so that the corresponding div heights and related top-positions at the client are more accurately depicted.

Alternatives that have been considered:

1) refine the server side code using regex or other to account for upper case characters. This seems doable, but kludgy.

2) use a graphics class at the server to create a virtual graphic, place the text in it, and examine it for line breaks. This seems like it could potentially work, but it's not clear that the technology exists, and it might be non-performant.

Questions

A) Is alternative 2 technically feasible?

B) Are there other alternatives that could be considered?

Answer 1

You can't just rely on the length of the string to determine how wide it is actually going to be. The font width of the characters is what is going to give you a problem. I isn't as wide as W so therefore your calculation will always be inaccurate. You can use this code to determine the total length of your string:

using (System.Drawing.Graphics graphics = System.Drawing.Graphics.FromImage(new Bitmap(1, 1)))
{
    SizeF size = graphics.MeasureString("Hello there", new Font("Segoe UI", 11, FontStyle.Regular, GraphicsUnit.Point));
}

The just do some simple division to using the total length / the desired width and that should tell you how many lines the text will take up. This all changes if the user is using a different font than the one you used to calculate it though.