Skip to content

Text Render With Underline And Tracking Not Rendered Properly #405

Description

@slimsim3

Prerequisites

  • I have written a descriptive issue title
  • I have verified that I am running the latest version of ImageSharp.Drawing
  • I have verified if the problem exist in both DEBUG and RELEASE mode
  • I have searched open and closed issues to ensure it has not already been reported

ImageSharp.Drawing version

3.0.0

Other ImageSharp packages and versions

4.0.0

Environment (Operating system, version and so on)

Windows 11

.NET Framework version

.NET 10.0

Description

When rendering a text that contains underline and tracking, the underline is not well rendered. It applies the underline on every glyph but not on the actual tracking between the glyphs.

ImageSharp:
Image

Chrome with css:
Image

Steps to Reproduce

using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;

var fontCollection = new FontCollection();
fontCollection.AddSystemFonts();
var fontFamily = fontCollection.Get("Arial");
var font = fontFamily.CreateFont(24);
var text = "Hello World!";

var textOptions = new RichTextOptions(font)
{
    Tracking = 2,
    TextRuns = new List<RichTextRun>
    {
        new() { Start = 0, End = text.Length, TextDecorations = TextDecorations.Underline },
    },
};

var img = new Image<Rgba32>(800, 200);
img.Mutate(ctx =>
{
    ctx.BackgroundColor(Color.White);
    ctx.Paint(c =>
    {
        c.DrawText(textOptions, text, Brushes.Solid(Color.Black), null);
    });
});
img.Save("render.png");

In web browser (Chrome):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImageSharp Tracking Underline Repro</title>
     <style>
			.tracking {
					letter-spacing: 2em;
					font-family: Arial, Helvetica, sans-serif;
					text-decoration: underline;
			}
	</style>
</head>
<body>
   <p class="tracking">Hello World !</p>
</body>
</html>

Images

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions