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

Labels

enhancementNew feature or request

Type

No type

Fields

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