Merge pull request #271 from SixLabors/js/vertical-mixed

Support Vertical Mixed Text

Author: JimBobSquarePants

src/ImageSharp.Drawing/ImageSharp.Drawing.csproj

@@ -18,7 +18,7 @@
     <None Include="..\..\shared-infrastructure\branding\icons\imagesharp.drawing\sixlabors.imagesharp.drawing.128.png" Pack="true" PackagePath="" />
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="SixLabors.Fonts" Version="1.0.0-beta19.10" />
+    <PackageReference Include="SixLabors.Fonts" Version="1.0.0-beta19.13" />
     <PackageReference Include="SixLabors.ImageSharp" Version="2.1.3" />
   </ItemGroup>
   <Import Project="..\..\shared-infrastructure\src\SharedInfrastructure\SharedInfrastructure.projitems" Label="Shared" />

src/ImageSharp.Drawing/Processing/Processors/Text/RichTextGlyphRenderer.cs

@@ -24,7 +24,6 @@ internal sealed class RichTextGlyphRenderer : BaseGlyphBuilder, IColorGlyphRende
         private const byte RenderOrderOutline = 1;
         private const byte RenderOrderDecoration = 2;
 
-        private readonly RichTextOptions textOptions;
         private readonly DrawingOptions drawingOptions;
         private readonly MemoryAllocator memoryAllocator;
         private readonly Pen defaultPen;
@@ -40,6 +39,7 @@ internal sealed class RichTextGlyphRenderer : BaseGlyphBuilder, IColorGlyphRende
         private TextDecorationDetails? currentUnderline;
         private TextDecorationDetails? currentStrikout;
         private TextDecorationDetails? currentOverline;
+        private bool currentDecorationRotated;
 
         // Just enough accuracy to allow for 1/8 px differences which later are accumulated while rendering,
         // but do not grow into full px offsets.
@@ -60,7 +60,6 @@ public RichTextGlyphRenderer(
             Brush brush)
             : base(drawingOptions.Transform)
         {
-            this.textOptions = textOptions;
             this.drawingOptions = drawingOptions;
             this.memoryAllocator = memoryAllocator;
             this.defaultPen = pen;
@@ -101,7 +100,7 @@ protected override void BeginText(in FontRectangle bounds)
         protected override void BeginGlyph(in FontRectangle bounds, in GlyphRendererParameters parameters)
         {
             this.currentColor = null;
-
+            this.currentDecorationRotated = parameters.LayoutMode.IsVertical() || parameters.LayoutMode.IsVerticalMixed();
             this.currentTextRun = parameters.TextRun;
             if (parameters.TextRun is RichTextRun drawingRun)
             {
@@ -219,41 +218,40 @@ public override void SetDecoration(TextDecorations textDecorations, Vector2 star
                 }
             }
 
-            // Clamp the line to whole pixels
-            Vector2 pad = new(0, thickness * .5F);
-            Vector2 tl = start - pad;
-            Vector2 bl = start + pad;
-            Vector2 tr = end - pad;
-
-            tl = ClampToPixel(tl);
-            bl = ClampToPixel(bl);
-            tr = ClampToPixel(tr);
-
             // Always respect the pen stroke width if explicitly set.
-            if (pen is null)
+            if (pen is not null)
             {
-                thickness = bl.Y - tl.Y;
-                pen = new SolidPen(this.currentBrush ?? this.defaultBrush, thickness);
+                thickness = pen.StrokeWidth;
             }
             else
             {
-                thickness = pen.StrokeWidth;
+                // Clamp the thickness to whole pixels.
+                thickness = MathF.Max(1F, MathF.Round(thickness));
+                pen = new SolidPen(this.currentBrush ?? this.defaultBrush, thickness);
             }
 
             // Drawing is always centered around the point so we need to offset by half.
             Vector2 offset = Vector2.Zero;
+            bool rotated = this.currentDecorationRotated;
             if (textDecorations == TextDecorations.Overline)
             {
                 // CSS overline is drawn above the position, so we need to move it up.
-                offset = new Vector2(0, -(thickness * .5F));
+                offset = rotated ? new(thickness * .5F, 0) : new(0, -(thickness * .5F));
             }
             else if (textDecorations == TextDecorations.Underline)
             {
                 // CSS underline is drawn below the position, so we need to move it down.
-                offset = new Vector2(0, thickness * .5F);
+                offset = rotated ? new(-(thickness * .5F), 0) : new(0, thickness * .5F);
             }
 
-            this.AppendDecoration(ref targetDecoration, tl + offset, tr + offset, pen, thickness);
+            // We clamp the start and end points to the pixel grid to avoid anti-aliasing.
+            this.AppendDecoration(
+                ref targetDecoration,
+                ClampToPixel(start + offset, (int)thickness, rotated),
+                ClampToPixel(end + offset, (int)thickness, rotated),
+                pen,
+                thickness,
+                rotated);
         }
 
         protected override void EndGlyph()
@@ -395,6 +393,24 @@ protected override void EndText()
         [MethodImpl(MethodImplOptions.AggressiveInlining)]
         private static Point ClampToPixel(PointF point) => Point.Truncate(point);
 
+        [MethodImpl(MethodImplOptions.AggressiveInlining)]
+        private static PointF ClampToPixel(PointF point, int thickness, bool rotated)
+        {
+            // Even. Clamp to whole pixels.
+            if ((thickness & 1) == 0)
+            {
+                return Point.Truncate(point);
+            }
+
+            // Odd. Clamp to half pixels.
+            if (rotated)
+            {
+                return Point.Truncate(point) + new Vector2(.5F, 0);
+            }
+
+            return Point.Truncate(point) + new Vector2(0, .5F);
+        }
+
         // Point.Truncate(point);
         private void FinalizeDecoration(ref TextDecorationDetails? decoration)
         {
@@ -428,24 +444,47 @@ private void FinalizeDecoration(ref TextDecorationDetails? decoration)
             }
         }
 
-        private void AppendDecoration(ref TextDecorationDetails? decoration, Vector2 start, Vector2 end, Pen pen, float thickness)
+        private void AppendDecoration(
+            ref TextDecorationDetails? decoration,
+            Vector2 start,
+            Vector2 end,
+            Pen pen,
+            float thickness,
+            bool rotated)
         {
             if (decoration != null)
             {
                 // TODO: This only works well if we are not trying to follow a path.
                 if (this.path is null)
                 {
                     // Let's try and expand it first.
-                    if (thickness == decoration.Value.Thickness
-                        && decoration.Value.End.Y == start.Y
-                        && (decoration.Value.End.X + 1) >= start.X
+                    if (rotated)
+                    {
+                        if (thickness == decoration.Value.Thickness
+                        && decoration.Value.End.Y + 1 >= start.Y
+                        && decoration.Value.End.X == start.X
                         && decoration.Value.Pen.Equals(pen))
+                        {
+                            // Expand the line
+                            start = decoration.Value.Start;
+
+                            // If this is null finalize does nothing.
+                            decoration = null;
+                        }
+                    }
+                    else
                     {
-                        // Expand the line
-                        start = decoration.Value.Start;
+                        if (thickness == decoration.Value.Thickness
+                        && decoration.Value.End.Y == start.Y
+                        && decoration.Value.End.X + 1 >= start.X
+                        && decoration.Value.Pen.Equals(pen))
+                        {
+                            // Expand the line
+                            start = decoration.Value.Start;
 
-                        // If this is null finalize does nothing.
-                        decoration = null;
+                            // If this is null finalize does nothing.
+                            decoration = null;
+                        }
                     }
                 }
             }
@@ -456,7 +495,7 @@ private void AppendDecoration(ref TextDecorationDetails? decoration, Vector2 sta
                 Start = start,
                 End = end,
                 Pen = pen,
-                Thickness = MathF.Abs(thickness)
+                Thickness = thickness
             };
         }
 

src/ImageSharp.Drawing/Shapes/Text/BaseGlyphBuilder.cs

@@ -1,8 +1,10 @@
 // Copyright (c) Six Labors.
 // Licensed under the Apache License, Version 2.0.
 
+using System;
 using System.Collections.Generic;
 using System.Numerics;
+using System.Runtime.CompilerServices;
 using SixLabors.Fonts;
 
 namespace SixLabors.ImageSharp.Drawing.Text
@@ -145,33 +147,65 @@ public virtual void SetDecoration(TextDecorations textDecorations, Vector2 start
                 return;
             }
 
+            thickness = MathF.Max(1F, (float)Math.Round(thickness));
             var renderer = (IGlyphRenderer)this;
 
-            Vector2 height = new(0, thickness);
-            Vector2 tl = start;
-            Vector2 tr = end;
-            Vector2 bl = start + height;
-            Vector2 br = end + height;
+            // Expand the points to create a rectangle centered around the line.
+            bool rotated = this.parameters.LayoutMode.IsVertical() || this.parameters.LayoutMode.IsVerticalMixed();
+            Vector2 pad = rotated ? new(thickness * .5F, 0) : new(0, thickness * .5F);
+
+            // Clamp the line to the pixel grid.
+            start = ClampToPixel(start, (int)thickness, rotated);
+            end = ClampToPixel(end, (int)thickness, rotated);
+
+            // Offset to create the rectangle.
+            Vector2 a = start - pad;
+            Vector2 b = start + pad;
+            Vector2 c = end + pad;
+            Vector2 d = end - pad;
 
             // Drawing is always centered around the point so we need to offset by half.
             Vector2 offset = Vector2.Zero;
             if (textDecorations == TextDecorations.Overline)
             {
                 // CSS overline is drawn above the position, so we need to move it up.
-                offset = new(0, -(thickness * .5F));
+                offset = rotated ? new(thickness * .5F, 0) : new(0, -(thickness * .5F));
             }
             else if (textDecorations == TextDecorations.Underline)
             {
                 // CSS underline is drawn below the position, so we need to move it down.
-                offset = new Vector2(0, thickness * .5F);
+                offset = rotated ? new(-(thickness * .5F), 0) : new(0, thickness * .5F);
             }
 
-            // MoveTo calls StartFigure();
-            renderer.MoveTo(tl + offset);
-            renderer.LineTo(bl + offset);
-            renderer.LineTo(br + offset);
-            renderer.LineTo(tr + offset);
+            renderer.BeginFigure();
+
+            // Now draw the rectangle clamped to the pixel grid.
+            renderer.MoveTo(ClampToPixel(a + offset));
+            renderer.LineTo(ClampToPixel(b + offset));
+            renderer.LineTo(ClampToPixel(c + offset));
+            renderer.LineTo(ClampToPixel(d + offset));
             renderer.EndFigure();
         }
+
+        [MethodImpl(MethodImplOptions.AggressiveInlining)]
+        private static Point ClampToPixel(PointF point) => Point.Truncate(point);
+
+        [MethodImpl(MethodImplOptions.AggressiveInlining)]
+        private static PointF ClampToPixel(PointF point, int thickness, bool rotated)
+        {
+            // Even. Clamp to whole pixels.
+            if ((thickness & 1) == 0)
+            {
+                return Point.Truncate(point);
+            }
+
+            // Odd. Clamp to half pixels.
+            if (rotated)
+            {
+                return Point.Truncate(point) + new Vector2(.5F, 0);
+            }
+
+            return Point.Truncate(point) + new Vector2(0, .5F);
+        }
     }
 }

tests/ImageSharp.Drawing.Tests/Drawing/Text/DrawTextOnImageTests.cs

@@ -792,6 +792,105 @@ public void PathAndTextDrawingMatch<TPixel>(TestImageProvider<TPixel> provider)
               });
         }
 
+        [Theory]
+        [WithBlankImage(500, 400, PixelTypes.Rgba32)]
+        public void CanFillTextVertical<TPixel>(TestImageProvider<TPixel> provider)
+            where TPixel : unmanaged, IPixel<TPixel>
+        {
+            Font font = CreateFont(TestFonts.OpenSans, 36);
+            Font fallback = CreateFont(TestFonts.NotoSansKRRegular, 36);
+
+            const string text = "한국어 hangugeo 한국어 hangugeo 한국어 hangugeo 한국어 hangugeo 한국어 hangugeo";
+            RichTextOptions textOptions = new(font)
+            {
+                Origin = new(0, 0),
+                FallbackFontFamilies = new[] { fallback.Family },
+                WrappingLength = 300,
+                LayoutMode = LayoutMode.VerticalLeftRight,
+                TextRuns = new[] { new RichTextRun() { Start = 0, End = text.GetGraphemeCount(), TextDecorations = TextDecorations.Underline | TextDecorations.Strikeout | TextDecorations.Overline } }
+            };
+
+            IPathCollection glyphs = TextBuilder.GenerateGlyphs(text, textOptions);
+
+            // TODO: This still leaves some holes when overlaying the text (CFF NotoSansKRRegular only). We need to fix this.
+            DrawingOptions options = new() { ShapeOptions = new() { IntersectionRule = IntersectionRule.NonZero } };
+
+            provider.RunValidatingProcessorTest(
+                c => c.Fill(Color.White).Fill(options, Color.Black, glyphs),
+                comparer: ImageComparer.TolerantPercentage(0.002f));
+        }
+
+        [Theory]
+        [WithBlankImage(500, 400, PixelTypes.Rgba32)]
+        public void CanFillTextVerticalMixed<TPixel>(TestImageProvider<TPixel> provider)
+            where TPixel : unmanaged, IPixel<TPixel>
+        {
+            Font font = CreateFont(TestFonts.OpenSans, 36);
+            Font fallback = CreateFont(TestFonts.NotoSansKRRegular, 36);
+
+            const string text = "한국어 hangugeo 한국어 hangugeo 한국어 hangugeo 한국어 hangugeo 한국어 hangugeo";
+            RichTextOptions textOptions = new(font)
+            {
+                FallbackFontFamilies = new[] { fallback.Family },
+                WrappingLength = 400,
+                LayoutMode = LayoutMode.VerticalMixedLeftRight,
+                TextRuns = new[] { new RichTextRun() { Start = 0, End = text.GetGraphemeCount(), TextDecorations = TextDecorations.Underline | TextDecorations.Strikeout | TextDecorations.Overline } }
+            };
+
+            IPathCollection glyphs = TextBuilder.GenerateGlyphs(text, textOptions);
+
+            // TODO: This still leaves some holes when overlaying the text (CFF NotoSansKRRegular only). We need to fix this.
+            DrawingOptions options = new() { ShapeOptions = new() { IntersectionRule = IntersectionRule.NonZero } };
+
+            provider.RunValidatingProcessorTest(
+                c => c.Fill(Color.White).Fill(options, Color.Black, glyphs),
+                comparer: ImageComparer.TolerantPercentage(0.002f));
+        }
+
+        [Theory]
+        [WithBlankImage(500, 400, PixelTypes.Rgba32)]
+        public void CanDrawTextVertical<TPixel>(TestImageProvider<TPixel> provider)
+            where TPixel : unmanaged, IPixel<TPixel>
+        {
+            Font font = CreateFont(TestFonts.OpenSans, 36);
+            Font fallback = CreateFont(TestFonts.NotoSansKRRegular, 36);
+
+            const string text = "한국어 hangugeo 한국어 hangugeo 한국어 hangugeo 한국어 hangugeo 한국어 hangugeo";
+            RichTextOptions textOptions = new(font)
+            {
+                FallbackFontFamilies = new[] { fallback.Family },
+                WrappingLength = 400,
+                LayoutMode = LayoutMode.VerticalLeftRight,
+                TextRuns = new[] { new RichTextRun() { Start = 0, End = text.GetGraphemeCount(), TextDecorations = TextDecorations.Underline | TextDecorations.Strikeout | TextDecorations.Overline } }
+            };
+
+            provider.RunValidatingProcessorTest(
+                c => c.Fill(Color.White).DrawText(textOptions, text, Brushes.Solid(Color.Black)),
+                comparer: ImageComparer.TolerantPercentage(0.002f));
+        }
+
+        [Theory]
+        [WithBlankImage(500, 400, PixelTypes.Rgba32)]
+        public void CanDrawTextVerticalMixed<TPixel>(TestImageProvider<TPixel> provider)
+            where TPixel : unmanaged, IPixel<TPixel>
+        {
+            Font font = CreateFont(TestFonts.OpenSans, 36);
+            Font fallback = CreateFont(TestFonts.NotoSansKRRegular, 36);
+
+            const string text = "한국어 hangugeo 한국어 hangugeo 한국어 hangugeo 한국어 hangugeo 한국어 hangugeo";
+            RichTextOptions textOptions = new(font)
+            {
+                FallbackFontFamilies = new[] { fallback.Family },
+                WrappingLength = 400,
+                LayoutMode = LayoutMode.VerticalMixedLeftRight,
+                TextRuns = new[] { new RichTextRun() { Start = 0, End = text.GetGraphemeCount(), TextDecorations = TextDecorations.Underline | TextDecorations.Strikeout | TextDecorations.Overline } }
+            };
+
+            provider.RunValidatingProcessorTest(
+                c => c.Fill(Color.White).DrawText(textOptions, text, Brushes.Solid(Color.Black)),
+                comparer: ImageComparer.TolerantPercentage(0.002f));
+        }
+
         private static string Repeat(string str, int times) => string.Concat(Enumerable.Repeat(str, times));
 
         private static string ToTestOutputDisplayText(string text)

tests/ImageSharp.Drawing.Tests/ImageSharp.Drawing.Tests.csproj

@@ -26,6 +26,9 @@
     <None Update="TestFonts\*.woff">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </None>
+    <None Update="TestFonts\*.otf">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </None>
     <None Update="xunit.runner.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </None>