Text wrap with SkiaSharp

andris — Mon, 15 Jun 2020 09:49:40 +0000

Context

I am working on https://morepuzzles.com/ where we are drawing our puzzles with SkiaSharp. More on that in this post: https://medium.com/@brianelete/a-brief-experience-with-skiasharp-20478ca05ef2

How to wrap text lines

My main issue when displaying text with Skia was that the lines were sometimes long and went out of the canvas or the current column. Skia’s DrawText method works like that it starts at the given position and draws the text in one line with the given paint (what is containing the text size). Lucky for us we can measure text and break lines where we need them to be wrapped. That may be the edge of the page or at the start of a new column (we can add margins too).

We use bounding boxes inside the document to determine the position and the relative size of things. You can measure the text height and length using a given font size so you can calculate what font size fits the box and where you should wrap each line.

void WrapLines(string longLine, float lineLengthLimit, SKCanvas canvas, SKPaint defPaint)
{
    var wrappedLines = new List<string>();
    var lineLength = 0f;
    var line = "";
    foreach (var word in longLine.Split(' '))
    {
        var wordWithSpace = word + " ";
        var wordWithSpaceLength = defPaint.MeasureText(wordWithSpace);
        if (lineLength + wordWithSpaceLength > lineLengthLimit)
        {
            wrappedLines.Add(line);
            line = "" + wordWithSpace;
            lineLength = wordWithSpaceLength;
        }
        else
        {
            line += wordWithSpace;
            lineLength += wordWithSpaceLength;
        }
    }
    var x = 0;
    var y = 0;
    foreach (var wrappedLine in wrappedLines)
    {
        canvas.DrawText(wrappedLine, x, y, paint);
        y += paint.FontSpacing;
    }
}

This is a slightly modified example to fit this post’s topic. You can of course separate the line wrapping and the drawing itself if it better fits your needs.

DEV Community: andris

Text wrap with SkiaSharp