iText7 - CSS3 text-overflow property not rendering when converting HTML to PDF

Question

I'm playing with iText7 as a proof of concept project.

I need to prove that iText7 can utilise CSS3 and HTML5 as they suggest on their site.

However, Im finding when i generate the pdf, the css3 properties are lost.

Below is the .Net code that generates the pdf file.

public class HtmlToPdfService : IHtmlToPdfService
    {
        public async Task CreatePdfFromHtmlFileStreamAsync(IFormFile file)
        {
            try
            {
                if (file == null)
                {
                    throw new ArgumentException("file cannot be null or empty.");
                }

                var filename = $"{Path.GetFileNameWithoutExtension(file.FileName)}.pdf";

                var stream = new MemoryStream();

                var html = string.Empty;
                using (var reader = new StreamReader(file.OpenReadStream()))
                {
                    var converterProperties = new ConverterProperties();

                    html = reader.ReadToEnd();

                    using (var pdfWriter = new PdfWriter(stream))
                    {
                        pdfWriter.SetCloseStream(false);
                        HtmlConverter.ConvertToPdf(html, pdfWriter, converterProperties);
                    }
                }

                stream.Position = 0;


                using (var fileStream = new FileStream(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot/pdf", filename), FileMode.OpenOrCreate, FileAccess.ReadWrite, FileShare.None))
                {
                    await stream.CopyToAsync(fileStream);
                }

            }
            catch (Exception x)
            {
                throw x;
            }
        }
    }
}

Here is the HTML I have tried convert to PDF:-

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
     p {
        width: 200px;
        border: 1px solid;
        padding: 2px 5px;

        /* BOTH of the following are required for text-overflow */
        white-space: nowrap;
        overflow: hidden;
    }

    .overflow-visible {
        white-space: initial;
    }

    .overflow-clip {
        text-overflow: clip;
    }

    .overflow-ellipsis {
        text-overflow: ellipsis;
    }

    .overflow-string {
    /* Not supported in most browsers, 
        see the 'Browser compatibility' section below */
        text-overflow: " [..]"; 
    }
</style>
</head>
    <body>
            <p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </body>
</html>

Is it not respecting any CSS or specific properties? There's a lot of CSS3 that isn't supported by all browsers. If the render engines don't support everything, it's hard to expect a custom engine too do so. (they state right in the docs that they don't use something traditional like WebKit or Gecko... — Bryce Howitson
– Bryce Howitson, Commented Apr 9, 2019 at 23:02
ive tried a few different css3 properties and none of them are rendered in the final pdf. — Derek
– Derek, Commented Apr 10, 2019 at 11:09
does Any CSS render? eg font-weight: bold or is it just specific properties? If its just some, I would contact their support and ask what portion of the CSS3 spec is allowed (no browsers implement the full spec either) — Bryce Howitson
– Bryce Howitson, Commented Apr 11, 2019 at 17:28
I think its the Java version that supports css3. iText7 is pretty bad from my recent needs for a PDF maker. — Deckerz
– Deckerz, Commented Apr 15, 2019 at 13:39

Sergey Kirienko · Accepted Answer · 2019-04-16 08:05:01Z

1

PDF is supposed to be used for printed-like documents, with precise page layout. These properties (text-overflow, text-ellipsis) are not very relevant to fixed layout documents, they are more relevant to media with variable dimentions, like screens. If you create a document with some text being ellipsised, how should reader read it on paper?

There is no big need to implement these screen-related features in PDF.

answered Apr 16, 2019 at 8:05

Sergey Kirienko

3134 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BJ Coder · Accepted Answer · 2019-04-16 07:09:36Z

1

Use alternate properties instead of text-overflow like

overflow:hidden;white-space:nowrap;

answered Apr 16, 2019 at 7:09

BJ Coder

4021 gold badge7 silver badges17 bronze badges

Comments

Hassan Siddiqui · Accepted Answer · 2019-04-12 13:58:33Z

0

There is a property in CSS -webkit-print-color-adjust: exact; that's allow CSS3 property in print. Try this I hope it'll help you out. Thanks

body {
  -webkit-print-color-adjust: exact;
}

edited Apr 12, 2019 at 13:58

answered Apr 10, 2019 at 8:54

Hassan Siddiqui

2,8511 gold badge15 silver badges23 bronze badges

3 Comments

Derek Over a year ago

What does this have to do, with the text-overflow css3 property?

Hassan Siddiqui Over a year ago

I'm not sure but this will allow your css3 prop in print.

Bryce Howitson Over a year ago

iText7 docs explicitly state that they don't use a common layout render engine like Webkit or Gecko so this will have no effect. @Derek that's a trick for webkit based browsers (Chrome, Safari, soon Edge) to get them to respect print layouts.

Collectives™ on Stack Overflow

iText7 - CSS3 text-overflow property not rendering when converting HTML to PDF

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related