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:

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

Here's an example implementation:

#include <SDL.h>
#include <SDL_ttf.h>

#include <sstream>
#include <string>
#include <vector>

std::vector<std::string> wrapText(
  TTF_Font* font, const std::string& text,
  int maxWidth) {
  std::vector<std::string> lines;
  std::istringstream iss(text);
  std::string line, word;
  int lineWidth = 0;

  while (iss >> word) {
    int wordWidth;
    TTF_SizeText(font,
                 (line + " " + word).c_str(),
                 &wordWidth, nullptr);

    if (lineWidth + wordWidth > maxWidth) {
      if (!line.empty()) {
        lines.push_back(line);
        line.clear();
        lineWidth = 0;
      }
      TTF_SizeText(font, word.c_str(),
                   &lineWidth, nullptr);
      line = word;
    } else {
      if (!line.empty()) { line += " "; }
      line += word;
      lineWidth = wordWidth;
    }
  }

  if (!line.empty()) { lines.push_back(line); }

  return lines;
}

void renderWrappedText(SDL_Surface* dest,
                       TTF_Font* font,
                       const std::string& text,
                       int x, int y,
                       int maxWidth,
                       SDL_Color color) {
  std::vector<std::string> lines = wrapText(
    font, text, maxWidth);
  int lineHeight = TTF_FontHeight(font);

  for (const auto& line : lines) {
    SDL_Surface* lineSurface =
      TTF_RenderText_Blended(
        font, line.c_str(), color);
    SDL_Rect dstRect = {x, y, 0, 0};
    SDL_BlitSurface(lineSurface, nullptr, dest,
                    &dstRect);
    SDL_FreeSurface(lineSurface);
    y += lineHeight;
  }
}

// Usage
renderWrappedText(screenSurface, font,
  "This is a long text that needs to be wrapped.",
  10, 10, 200, {255, 255, 255, 255}
);

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

Answers to questions are automatically generated and may not have been reviewed.

sdl2-promo.jpg
Part of the course:

Game Dev with SDL2

Learn C++ and SDL development by creating hands on, practical projects inspired by classic retro games

Free, unlimited access

This course includes:

  • 53 Lessons
  • 100+ Code Samples
  • 91% Positive Reviews
  • Regularly Updated
  • Help and FAQ
Free, Unlimited Access

Professional C++

Comprehensive course covering advanced concepts, and how to use them on large-scale projects.

Screenshot from Warhammer: Total War
Screenshot from Tomb Raider
Screenshot from Jedi: Fallen Order
Contact|Privacy Policy|Terms of Use
Copyright © 2024 - All Rights Reserved