Image Size via CSS

[tzia_n]

Hi,

I recently encountered a problem where setting the width and height of an image via CSS caused the image to disappear in the converted docx. After tinkering with the code a bit, I noticed that removing the CSS height and width property (in px) would cause the image to show up. Moreover, comparing the docx shows that the cx and cy value of the image becomes 0 in the docx if I set the CSS height and width in the html. Any idea what could be wrong?

I tried to check the source code a bit, I'm not sure if the units are being converted twice. XHTMLImporterImpl.java has addImage function calling UnitsOfMeasurement.twipToEMU once. And then XHTMLImageHandlerDefault.java's addImage function in turn calls BinaryPartAbstractImage.java's createImageInline functon which according javadoc expects the values in twip, and hence calls UnitsOfMeasurement.twipToEMU once more. Seems like the conversion is being done twice.

Any idea if this is a bug or I am missing something in setup?

Thanks,
Jonathan

[jason]

I had a quick look at the code; at a glance it seems OK:- there are different code paths depending on whether cx and cy are known or not.

I also tried the following code, which produced images as expected for me.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

        public void testHeightWidthInPx() throws Exception {
               
                String PNG_IMAGE_DATA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAgMAAAAP2OW3AAAADFBMVEUDAP//AAAA/wb//AAD4Tw1AAAACXBIWXMAAAsTAAALEwEAmpwYAAAADElEQVQI12NwYNgAAAF0APHJnpmVAAAAAElFTkSuQmCC";              
                String html= "<div>" +
                                        "<p><img src='" + PNG_IMAGE_DATA + "' width='40px' height='20px' /></p>" +
                                        "<p><img src='" + PNG_IMAGE_DATA + "' style='width:40px; height:20px' /></p>" +
                                "</div>";
        XHTMLImporterImpl XHTMLImporter = new XHTMLImporterImpl(wordMLPackage);        
                List<Object> convert = XHTMLImporter.convert(html, null);
                wordMLPackage.getMainDocumentPart().getContent().addAll(convert);
                wordMLPackage.save(new File(System.getProperty("user.dir") + "/px.docx") );
        }
 

Parsed in 0.016 seconds, using GeSHi 1.0.8.4

Can you provide a simple test case showing what isn't working for you?

Please note all the above is with current dev tip on GitHub.\:- https://github.com/plutext/docx4j-ImportXHTML

[tzia_n]

Turns out, I have another CSS causing conflict with the output. Having width + height in CSS along with position: absolute causes my image to disappear. I'm using 3.0 beta (not beta 2 at the moment). Any idea how position absolute will affect the calculation of cx and cy?

Thanks.

[jason]

cx and cy are height and width, not position, so not affected by positioning.

I expect XHTMLImageHandlerDefault completely ignores positioning, absolute or otherwise.

[tzia_n]

So yeah, I've tried it with a div containing 1 image with style set as "position: absolute; width: 100px; height: 100px;" and the image does not get rendered. document.xml of the docx file has cx and cy value as 0.

Attached is the java code I used and the output I had.

[tzia_n]

Was anyone able to generate a correct docx with the earlier attached html?