Flexbox layout not rendered to PNG properly

Aspose.HTML Product Family
1

I’ve got a HTML file with flexbox layout that looks fine in a browser but when rendered to PNG by aspose, the layout is nowhere near proper. I’m using the java API to force the output to a specific size, that same size is also what’s configured in the HTML file.

In the attached zip you’ll find the HTML file I’m using. It passes HTML validation rules and renders properly in every browser I’ve checked: Chrome, Firefox, Edge
There are also two images: one with the java code constraining the size of the image to a given dimension, one without. You’ll see there is different behavior in both images.

va4.zip (7.6 KB)

Here’s the code I’m using to do the rendering.

void gen_it() throws FileNotFoundException, Exception {
	    // Initialize License Instance
	    com.aspose.html.License license = new com.aspose.html.License();
	    // Set license from Stream
	    
	    license.setLicense(this.getClass().getClassLoader().getResourceAsStream("licenses/Aspose.HTML.Java.lic"));    
		
		
		HTMLDocument doc = new HTMLDocument("/opt/aspose-test/va4/template.html");

		ImageSaveOptions saveOpts = new ImageSaveOptions(ImageFormat.Png);
		saveOpts.setSmoothingMode(SmoothingMode.None);
		saveOpts.getText().setTextRenderingHint(TextRenderingHint.SingleBitPerPixelGridFit);
		
		Page page = new Page();
		page.setSize(new Size(Length.fromPixels(240), Length.fromPixels(128)));
		
		PageSetup pageSetup = new PageSetup();
		pageSetup.setAnyPage(page);
		saveOpts.setPageSetup(pageSetup);
		saveOpts.setBackgroundColor(Color.getWhite());
		FileCreateStreamProvider fileCreateStreamProvider = new FileCreateStreamProvider("/opt/aspose-test/va4", "output");
		Converter.convertHTML(doc, saveOpts, fileCreateStreamProvider);
	}

Am I doing something improperly in either the template or the java code? Is this not HTML that Aspose will be able to convert?

Thanks

2

@briancribbs

We are checking it and will get back to you shortly.

1 Like
3

@briancribbs

We have tested the scenario in our environment using Aspose.HTML for Java 21.12 and were able to notice issues in the output image. However, would you please share an expected output image for our reference so that we can further proceed to log an issue in our issue management system and share the ID with you.

4

The expected output would look like the HTML rendered in the browser. If you change the CSS for the html body declaration to border: 1px solid black; the box rendered around that will allow you to see how the image should appear. I’ve attached a screengrab from my machine when I did the above.

exampleDesiredOutput.png (1.7 KB)

5

@briancribbs

We have already implemented a feature in Aspose.HTML for .NET API where you can generate the expected output using below code:

using (var document = new Aspose.Html.HTMLDocument("input.htm"))
{
    var options = new Aspose.Html.Saving.ImageSaveOptions();
    options.PageSetup.PageLayoutOptions = PageLayoutOptions.FitToContentWidth | PageLayoutOptions.FitToContentHeight;
    Aspose.Html.Converters.Converter.ConvertHTML(document, options, "out.png");
}

We have also logged an investigate ticket as HTMLJAVA-1230 in our issue management system to further analyze this feature and implement it in Java API. We have linked the ticket ID with this forum thread so that you will receive a notification as soon as the ticket is resolved. Please be patient and spare us some time.

We apologize for the inconvenience.

6

I’m not sure that simply changing the sizing of the output will fix all of the issues. If you compare the output in the PNG files that Aspose generates, the layout of the flex items is completely different to how it’s rendered in-browser. The PNG I attached to my previous pose was a screengrab from Chrome’s rendering of the output. Compare that to either of the PNGs in the zip file attached to my original post and you’ll see the differences.

7

@briancribbs

The ticket has been further updated as per your shared concerns. We will investigate it from this perspective as well and let you know once it is resolved. Please spare us some time.

We apologize for the inconvenience.