Nested HTML/Span Styling Not Working

Aspose.HTML Product Family
1

Aspose HTML seems to ignore valid HTML when saving as an image if the HTML contains nested span tags with styles in each. It seems to only take the innermost CSS styling. The attached files show what is occurring. HTML generated with a WYSIWYG editor often add multiple nested spans. The first few lines of this HTML has spans that set the size, then set the font. It takes the innermost font, but ignores the sizing. One of the attached images show the HTML in the browser on the left (looks good as expected), but on the right, the output image is generated and the size is ignored.

nested-span-issue.zip (499.0 KB)

2

@MarcomUSER1

We have logged an issue as HTMLNET-4096 in our issue tracking system for the sake of correction. We will further look into its details and keep you posted with the status of its resolution. Please be patient and spare us some time.

We are sorry for the inconvenience.

3

@MarcomUSER1

The attached example uses different documents for conversion. What will be the result if you use the same document?

For example, if you do this, what will be the result?
…
using (var imageMemoryStream = new MemoryStream())
using (var imageDevice = new ImageDevice(new ImageRenderingOptions(), imageMemoryStream))
using (var htmlRenderer = new HtmlRenderer())
using (var htmlDocument = document)// The same document was used for conversion
{
htmlRenderer.Render(imageDevice, htmlDocument);
var image = Image.FromStream(imageMemoryStream);
image.Save(“C:\sample-image-using-renderer.jpg”);
}

4

That makes no difference, the problem is still there. There were simply two documents because I was trying to solve the problem by trying different things. Neither work correctly. Thank you.

5

@MarcomUSER1

We were unable to reproduce the described problem and would like to clarify the following points:

  1. Are you using the latest version of the library?
  2. In the screenshots you provided, the document looks different, it has a different background and there are images. Perhaps the differences in the document that you provided us and the one with which the picture was made lead to the fact that we cannot reproduce the error. Could you check if the problem is reproducible with the code you provided?

We checked the rendering in Chrome with the addition of an absolute block so that we could compare font sizes. The size of the text in Chrome and on the image obtained using Aspose.HTML are the same.

files.zip (87.4 KB)

6

I had an additional line in my CSS resets that I did not include. It defaults the font-size to 14px. When that is included in my CSS resets, it is overriding the font-size explicitly set if the spans are nested. This should not occur if it is subsequently set in a span, Chrome handles it fine. But I have removed the default font size from my CSS resets and that seems to fix it. The images make no difference. I excluded those from my sample since you don’t have access to my images.

2022-11-02_14-12-13.png (87.0 KB)

7

@MarcomUSER1

Your feedback has been recorded under the logged ticket. We will let you know after performing investigation against it.

8

@MarcomUSER1

We checked the rendering considering the information provided and got a result similar to Chrome.
According to the specification the normal inline styles take precedence over any other normal author styles, no matter the specificity of the selector.

You can learn more about the priority of styles by following the links:

https://drafts.csswg.org/css-cascade/

AsposeHTML.zip (201.2 KB)