Question

I am looking for stable algorithm to draw possibly long text horizontally and vertically centered on a 2D surface. This is not language specific, so if you can provide examples in any language it would be very helpful.

The following information I have about the text I want to draw and the surface:

Text infomation:

• size of the text in px (line height), is of course way smaller than the height of the surface
• the type face (could be any though)
• simple character set from ASCII32 to ASCII126
• text could be relatively long, words are separated by spaces
• text should break “automatically” on spaces once it will not fit in the width of the surface anymore
• text is in English.

Surface information:

• width and height
• x and y coordinates in the global coordinate system (assuming the origin is left top corner of the screen)

I did implement my own approach, but it was very unstable: text spread over the surface, alignment not correct, sometimes not centered at all. Also googled for some good approaches though couldn’t find something useful. I hope the stackoverflow community can help me. Thank you very much.

Answer 1

The approach is simple in concept, a bit involved in execution. It involves only a few steps:

Split the text into lines that will fit horizontally
Compute the vertical position of the first line
for each line
    Compute its width and the X position
    Display it at the Y position
    Add the line height to the current Y position

The hard part is the first step. The rest is easy.

If you have a fixed-width font, then splitting the text into lines isn’t too hard. You simply compute how many characters will fit in the given width, index into the string to that position, and then back up to the previous word break. Grab the substring from the start of the previous line (or start of the string for the first line) to that position, and that’s your line. Repeat until you get to the end of the string.

With a variable-width font, things are a bit harder because you can’t just index into the string by n * character_width characters. Instead, you have to guess, test, refine the guess, etc. Every graphics subsystem I’ve worked with had some kind of MeasureString method that would tell me how many pixels it would take to render a string, given a particular font. Given that, what I’ve done in the past is:

Divide the surface width by the font's average character width
Index that far into the string, and find the next (or previous) word break.
Measure the string
If the result is wider than the width, go back one word and measure again.
If the result is narrower than the width, go forward one word and measure again.
Repeat the measure/adjust until you find the string that will fit.

Once you’ve found the substring that will fit, move your start index forward to the start of the next line, and do it again until you reach the end of the string.

Vertically centering the group of lines:

starting_position.Y = (Surface_height - (num_lines * line_height)) / 2

Horizontally centering a line is easily accomplished:

starting_position.X = (Surface_width - Measured_string_width) / 2

You have to compute the starting_position.X for each line. The Y coordinate is increased by line_height for each successive line.