Rendering Text with SDL_ttf

Implementing Text Wrapping

How can I implement text wrapping within a specific width?

3D art representing computer programming

Implementing text wrapping within a specific width involves breaking the text into lines that fit within the given width. SDL_ttf doesn't provide built-in text wrapping, so we need to implement it ourselves. Here's a step-by-step approach:

Measure the width of each word using TTF_SizeText().
Add words to a line until it exceeds the maximum width.
When a line is full, start a new line.
Render each line separately.

Here's an example implementation:

1#include <SDL.h>
2#include <SDL_ttf.h>
3
4#include <sstream>
5#include <string>
6#include <vector>
7
8std::vector<std::string> wrapText(
9  TTF_Font* font, const std::string& text,
10  int maxWidth) {
11  std::vector<std::string> lines;
12  std::istringstream iss(text);
13  std::string line, word;
14  int lineWidth = 0;
15
16  while (iss >> word) {
17    int wordWidth;
18    TTF_SizeText(font,
19                 (line + " " + word).c_str(),
20                 &wordWidth, nullptr);
21
22    if (lineWidth + wordWidth > maxWidth) {
23      if (!line.empty()) {
24        lines.push_back(line);
25        line.clear();
26        lineWidth = 0;
27      }
28      TTF_SizeText(font, word.c_str(),
29                   &lineWidth, nullptr);
30      line = word;
31    } else {
32      if (!line.empty()) { line += " "; }
33      line += word;
34      lineWidth = wordWidth;
35    }
36  }
37
38  if (!line.empty()) { lines.push_back(line); }
39
40  return lines;
41}
42
43void renderWrappedText(SDL_Surface* dest,
44                       TTF_Font* font,
45                       const std::string& text,
46                       int x, int y,
47                       int maxWidth,
48                       SDL_Color color) {
49  std::vector<std::string> lines = wrapText(
50    font, text, maxWidth);
51  int lineHeight = TTF_FontHeight(font);
52
53  for (const auto& line : lines) {
54    SDL_Surface* lineSurface =
55      TTF_RenderText_Blended(
56        font, line.c_str(), color);
57    SDL_Rect dstRect = {x, y, 0, 0};
58    SDL_BlitSurface(lineSurface, nullptr, dest,
59                    &dstRect);
60    SDL_FreeSurface(lineSurface);
61    y += lineHeight;
62  }
63}
64
65// Usage
66renderWrappedText(screenSurface, font,
67  "This is a long text that needs to be wrapped.",
68  10, 10, 200, {255, 255, 255, 255}
69);

This approach allows for flexible text wrapping within any specified width. Remember to handle punctuation and hyphenation for more advanced wrapping scenarios.

This Question is from the Lesson: