Prerequisites
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:

Chrome with css:

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
Prerequisites
DEBUGandRELEASEmodeImageSharp.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:

Chrome with css:

Steps to Reproduce
In web browser (Chrome):
Images
No response