Image CSS style is ignored and rendered full size after HTML to DOCX using .NET

Aspose.Words Product Family
1

For example this html code

<input type="image" src="/Resources/images/flags/gif/nl.gif" style="width:0px;height:0px">

The image is rendered in full in the Word when I convert the html to word.

Latest version of aspose words (Aspose.Words for .NET 10.8.0)

2

Hi Rene,

Thank you for reporting this problem to us. I have managed to reproduce it on my side. Your request has been linked to the appropriate issue. You will be notified as soon as it is resolved.

3

Hi
Thanks for your request. The problem occurs because Aspose.Words does not support style attribute on IMG tag. This causes that Aspose.Words does not read size of the image from your source HTML. I linked your request to the appropriate issue. We will let you know once it is resolved. To work this problem around you can specify size of the image using width and height attributes of IMG tag instead of using style.
Best regards,

4

Hi Rene,

The workaround of mentioned problem is, use height and width properties of img tag instead to use height/width in style.

Use:

<img src='d:/image.jpg' width="10" height="10" />

instead of:

<img src='d:/image.jpg' style='width:10;height:10' />
5

Hi,

I would like to know if this has been resolved by now. I.e., can aspose get the image’s width/height and other attributes from the style when they are not specified as an IMG attribute? If so - how?

Thanks, Neva

6

Hi Neva,

Thanks for your inquiry. I am afraid this issue WORDSNET-5689 has now been postponed till a later date due to some other important issues and new features. We will inform you as soon as there are any further developments. We apologize for your inconvenience.

Aspose.Words does support the ‘style’ attribute of ‘img’. I suggest you please use the latest version of Aspose.Words for .NET 14.3.0 and let us know how it goes on your side. Hope this helps you.

7

Hi Tahir,
Thanks for your response.
So are you suggesting that we apply properties from Shape.getImageData() on the Shape object?
Is there a way to apply these attributes in a generic manner? Otherwise we need to know explicitly which attributes are mentioned in the style for the particular image in order to know to apply them on the Shape object.
It would be nice if you could refer us to an example… :slight_smile:

(by the way, we use aspose.words for Java)

Thanks, Neva

8

Hi Neva,
Thanks for your inquiry. Following is the detail of WORDSNET-5689.
Image CSS style is ignored and the image is rendered full size in the word file. Please see following two examples of html tags. The style is ignored when user convert html to doc file.
If you are facing some different issue, please share your input document along with some more detail about your query. I will investigate the issue on my side and provide you more information.
Following code example shows how to get the height/width of Shape node.

Document doc = new Document(MyDir + "in.html");

for (Shape shape: (Iterable <Shape> ) doc.getChildNodes(NodeType.SHAPE, true))
{
    System.out.println(shape.getWidth());
    System.out.println(shape.getHeight());
}
9

Hi Tahir,

Below I present the problem in a more explicit manner. Hope it’s comprehensible.
My question from above still stands: is there a generic manner to update the shape properties using the image properties?

We also convert HTML to doc (and other formats). We do it by inserting an HTML text in place of a merge field. In our case, the image style includes non-zero dimensions, but for some reason the Shape object dimensions are different. It seems that it gets some sort of default size - 24 px for both width and height.

Here is a snippet from the code:

…
here we parse the htmlText variable and maintain the image names
…

docBuilder.insertHtml(htmlText);
fieldMergingArgs.setText("");
NodeCollection shapes = docBuilder.getDocument().getChildNodes(NodeType.SHAPE, true);
for (Shape shape: shapes)
{
    inputStream = ...obtain image input streams using names from above...
    shape.getImageData().setImage(inputStream);
}

An example value of the htmlText variable is:

<img alt="" contenteditable="false" src="file://[IMAGE_BASE_PATH_PLACEHOLDER]imageName1.jpg" style="width: 341px; height: 224px; vertical-align: bottom; border: 0px solid black;" />

As I said in my previous comment - when I do shape.getImageData().getWidth / Height()
I get the dimensions specified by the image style.However shape.getWidth / Height()

both return a value of 24 (dot something) and in the resulting document we indeed get small images.

Thanks, Neva``

10

Hi Neva,

Thanks for sharing the detail.

HPSoftwareALM:

Hi Tahir,
is there a generic manner to update the shape

You can use Shape.Width and Shape.Height set/get shape height and width.

HPSoftwareALM:

We also convert HTML to doc (and other formats). We do it by inserting an HTML text in place of a merge field. In our case, the image style includes non-zero dimensions, but for some reason the Shape object dimensions are different. It seems that it gets some sort of default size - 24 px for both width and height.
…
As I said in my previous comment - when I do shape.getImageData().getWidth/Height()
I get the dimensions specified by the image style. However shape.getWidth/Height()

Your query seems not to be related with WORDSNET-5689. Shape.Width gets or sets the width of the containing block of the shape. Shape.Height gets or sets the width of the containing block of the shape.

ImageData class does not have getWidth/Height() methods. Perhaps, you are using Shape.getImageData().getImageSize().getHeightPoints()/getWidthPoints().

It would be great if you please share following detail for investigation purposes.

  • Please attach your input Word document.
  • Please attach your html document.
  • Pleasecreate a standalone/runnable simple Java application that demonstrates the code ( Aspose.Words code ) you used to reproduce this issue.
  • Please attach the output Word file that shows the undesired behavior.
  • Please
    attach your target Word document showing the desired behavior. You can
    use Microsoft Word to create your target Word document. I will
    investigate as to how you are expecting your final document be generated
    like.

Unfortunately, it is difficult to say what the problem is without the Document(s) and simplified application. We need your Document(s) and simple project to reproduce the problem. As soon as you get these pieces of information to us we’ll start our investigation into your issue.

11

The issues you have found earlier (filed as WORDSNET-5689) have been fixed in this Aspose.Words for .NET 18.12 update and this Aspose.Words for Java 18.12 update.