Positioning a text in front of a image

[joaofx]

Hi!

First of all, thank you very much for sharing this library!

I have question. Is it possible to position a text in front of an image? I would like to render a image in a block and write a text over this image in specific position.

Thanks!

[joaofx]

Okay! I think I figured out here. Just need to use negative padding:

container.Stack(stack =>
{
  stack.Element()
      .Debug()
      .Image(headerImage);
  
  stack.Element()
      .Debug()
      .PaddingTop(-130)
      .PaddingLeft(80)
      .Stack(x =>
  {
      x.Element().Text("Line 1");
      x.Element().Text("Line 2");
      x.Element().Text("Line 3");
  }); 
});

Thanks!

[chiranstha]

How to Define Container Height in the Stack

container.Stack(stack =>
            {
                stack.Element()
                    .Image(bytes);

                stack.Element()
                    .Debug()
                    .PaddingTop(-130)
                    .PaddingLeft(80)
                    .Stack(x =>
                    {
                        x.Element().Text("Line 1");
                        x.Element().Text("Line 2");
                        x.Element().Text("Line 3");
                    });
            });

[MarcinZiabek]

Please take a look here: https://www.questpdf.com/documentation/api-reference.html#constrained

[MarcinZiabek]

Hello,

This is a really good question :) And I have great news for you! In release 2021.5, I am preparing a new component called Layers. This component is designed specifically for your needs, that is it allows you to put elements behind and above the main layer. You may want to make a try with the released alpha version. However, please note that the new release will include a couple of minor breaking changes that are yet not documented.

Take a look at the last test in this file: https://github.com/QuestPDF/library/blob/2021.05/QuestPDF.Examples/ElementExamples.cs

// This is a small concept, how such functionality may work:
container.Layers(layers =>
{
  layers.Layer().Image(headerImage);
  
  layers.PrimaryLayer().Stack(x =>
  {
      x.Element().Text("Line 1");
      x.Element().Text("Line 2");
      x.Element().Text("Line 3");
  }); 
});

If you have any questions or suggestions, please let me know. I am still trying to figure out proper namings here and there :)

[MarcinZiabek]

I am not sure if I am able to help much in regard to file size. Generating the PDF file is handled by SkiaSharp. Try changing image quality or raster DPI in the metadata settings: https://www.questpdf.com/documentation/patterns-and-practices.html#document-metadata. By default, the library uses lossless image encoding.

[joaofx]

That's a good tip! Thank you very much!

Ps: great documentation by the way.

[MarcinZiabek]

Thank you for your encouragement! I have plans to improve documentation even more with more examples, screenshots and patterns. However, my current priority is to work on missing features. I still fear the moment when introducing a breaking change will be a huge problem due to (hopefully at some point) bigger community.

[joaofx]

That makes sense! I like a lot that in the documentation you've added image previews of how the output pdf would look like. By the way, I've just noticed you live in Kraków as well :). Dziękuję bardzo za pomoc!

[MarcinZiabek]

I am always glad to help :)