I need to center the img element of the html

[MuriloIPM]

Hi guys,
I need to center an image that comes through a dataSet in HTML format, but birt doesn't interpret the style of the element

<p style="line-height:100%;margin-bottom:0cm;"><span style="font-size:12pt;font-family:arial, helvetica, sans-serif;">&nbsp;</span> <img height="118" src="data:image/png;base64,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" width="118" style="margin-left:auto;display:block;font-size:16px;font-family:arial, helvetica, sans-serif;margin-right:auto;"></p>

HTML interpreted by the browser:

Birt Version: 4.10

My report:

Thanks...

[merks]

Problems will (and can) only be fixed in version 4.14. So best you test with the current development version and provide a way to reproduce the problem if it’s currently still a problem.

[MuriloIPM]

Same problem


Follow and test report:
new_report.txt
Just print to PDF

[hvbtup]

I'm not sure if the HTML you supply is correct at all.

You explicitly say "display:block" for the image element.
And it is contained inside the dynamic text item which is explicitly left-aligned.
To my understanding, BIRT renders this correctly.

In fact I wonder why the browser renders this centered?

[MuriloIPM]

But even keeping only the IMG element it doesn't work. Any ideas?

[hvbtup]

I think your expectations are wrong. What do you expect and how do you try to achieve it? If you want the image centered, you have to specify this.

[MuriloIPM]

How would you recommend me to do this?

[MuriloIPM]

I encountered 2 issues regarding image rendering in HTML:

1. The formatting, birt is not able to interpret the style of the element
   

2. In some formats the image does not appear eg docx, odt and ods
   
   

Follow and test report:
new_report.txt

[hvbtup]

BIRT is not able to interprete the style.

Well, BIRT is not a browser. You cannot expect it to work like a browser.
The HTML support in BIRT was made for highlighting text basically, and to allow basic formatting of text.

And it seems you didn't test with 4.14.

[MuriloIPM]

[speckyspooky]

The point is like descripted before. You cannot use the CSS-styles to define the layout for PDF, Excel, etc.
BIRT is based on the standard properties of the designer and again the available styling properties of the (HTML-)text are very basic styles which based on HTML 4.0.

The next point is that you use not realy a standard image because you use the image as data-URL.
The dataURL of images isn't full available.

But I created based on your report a demo which you can use. By default you should use the BIRT-image.
On the BIRT-image you can use (standard)-)URL-images (path based)
or embedded images on the repoirt level
or dynamic images from parameter or dataset based
or shared resources of your project.

My personal favorit are the "embedded images" for static images because so I have all images at the report.
But therefore the report-file is much bigger.

But all options of the BIRT-image have the same behavior if you want to center the image then wrap it with a grid an set the column or cell to center. Then you will get a centered image.

Here the screen of the test report, HTML vs. PDF:

The demo report is here:

report_image_centered.zip

[MuriloIPM]

Thank you, now I understand. One last question, does birt have any documentation similar to the book "Integrating and Extending BIRT"? I looked for a newer one and couldn't find it.

[speckyspooky]

This is one of the lates books. A half year before a field guied was published:

• BIRT: A Field Guide (Eclipse Series), 9. Februar 2011

other books would be

• Packt Publishing, Practical Data Analysis and Reporting with BIRT, 22. Februar 2009
• Paul Bappoo, BIRT by Example, 2. November 2012

But I check sometimes too new published documents/books but these are the lates books which I found.

[MuriloIPM]

Ok, thank...