Example: drawing text based on height of previous block

[webprofusion-chrisc]

While playing around with ImageSharp.Fonts I thought I'd try to make my own web browser :)

I initially got confused by looking at the "Samples" code in the repo as the CustomGlyphRenderer does some stuff with boxes (and uses internal classes) and I assumed this was how to measure text block height, turns out there is of course the TextMeasurer class which already does this.

Here is my sample which loads a web page, tries to find some text elements and then renders them (each block of text positioned after the last one). Note that I started to try to parse css styles but got bored :)

  [TestMethod]
        public async Task DrawSomeWebStuff()
        {
            var config = AngleSharp.Configuration
                .Default
                .WithDefaultLoader()
                .WithCss();

            var address = "https://acmeclients.com";
            var context = BrowsingContext.New(config);
            var document = await context.OpenAsync(address);

            const int wrappingWidth = 800;

            const int lineMarginTop = 4;

            Vector2 textBlockLocation = Vector2.Zero;

            using (var img = new Image<Rgba32>(800, 600))
            {
                img.Mutate(x => x.Fill(Color.White));

                var nodes = GetElements(document.Body.Children[0]);

                foreach (var node in nodes)
                {
                    if (!string.IsNullOrEmpty(node.Text()))
                    {
                        try
                        {
                            var style = node.ComputeCurrentStyle();

                            var bounds = Draw(textBlockLocation, node.Text(), img, style, wrappingWidth);

                            textBlockLocation.Y += bounds.Height + lineMarginTop;
                        }
                        catch { }
                    }

                }

                Directory.CreateDirectory("Output");

                img.Save("Output/WebStuff.png");
            }
        }

        private List<IElement> GetElements(IParentNode node)
        {
            var list = new List<IElement>();
            foreach (var c in node.Children)
            {

                var children = GetElements(c);
                if (children.Count > 0)
                {
                    list.AddRange(children);
                }
                else
                {
                    if (!string.IsNullOrEmpty(c.Text()))
                    {
                        list.Add(c);
                    }
                }

            }
            return list;
        }

        float _defaultFontSize = 12;

        private float FontSizeToPX(string fontSize)
        {
            if (fontSize.EndsWith("em"))
            {
                float sizeEm = float.Parse(fontSize.Replace("em", ""));
                return _defaultFontSize * sizeEm;
            }
            else
            {
                float sizePx = float.Parse(fontSize.Replace("px", ""));
                return sizePx;
            }
        }

        private List<Font> _fontCache = new List<Font>();

        public FontRectangle Draw(Vector2 location, string text, Image<Rgba32> img, AngleSharp.Css.Dom.ICssStyleDeclaration cssStyle, float wrappingWidth)
        {
            var fontFamily = cssStyle.FirstOrDefault(c => c.Name == "font-family")?.Value ?? "Arial";

            var fontSize = cssStyle.FirstOrDefault(c => c.Name == "font-size")?.Value ?? $"{_defaultFontSize}px";

            var fontSizePX = FontSizeToPX(fontSize);

            Font font = _fontCache.FirstOrDefault(f => f.Name == fontFamily + "_" + fontSizePX);

            if (font == null)
            {
                font = SystemFonts.Families.FirstOrDefault(o => o.Name == fontFamily).CreateFont(fontSizePX);

                _fontCache.FirstOrDefault(f => f.Name == fontFamily + "_" + fontSizePX);
            }

            TextOptions textOptions = new(font)
            {
                TabWidth = 4,
                WrappingLength = wrappingWidth,
                Origin = location
            };

            var bounds = TextMeasurer.MeasureBounds(text, textOptions);

            img.Mutate(x => x.DrawText(textOptions, text, Color.Black));

            return bounds;
        }

Output: