Images are not positioned correctly in the resulting DOCX file

Open BangemannGuilherme opened this issue 1 year ago • 1 comments

Images are not positioned correctly in the resulting DOCX file when inside a tag

. Instead of being inline with the text as they appear in the HTML, the images are placed in separate paragraphs, disrupting the intended layout.

Try the following HTML:

<html>
<body>
<div class="questao">
<p><strong>Questão 60</strong></p>
<p><p style="margin-bottom: 0cm; line-height: normal; mso-layout-grid-align: none; text-autospace: none;">Em 2011, a costa nordeste do Jap&atilde;o foi sacudida por um terremoto com magnitude de 8,9 graus na escala Richter. A energia liberada E por esse terremoto, em kWh pode ser calculada por <img src="https://simulado.metodomedicina.com.br/uploads/questoes/2024/07/30/66a8fc0828b04.png" style="width: 100px; height: 47px;"> sendo <img src="https://simulado.metodomedicina.com.br/uploads/questoes/2024/07/30/66a8fc0828b92.png"> e R a magnitude desse terremoto na escala Richter. Considere 0,84 como aproxima&ccedil;&atilde;o para log7.</p>
<p style="margin-bottom: 0cm; text-align: right; line-height: normal; mso-layout-grid-align: none; text-autospace: none;">Dispon&iacute;vel em: http://oglobo.globo.com. Acesso em: 2 ago. 2012.</p>
<p style="margin-bottom: 0cm; line-height: normal; mso-layout-grid-align: none; text-autospace: none;">&nbsp;</p>
<p>A energia liberada pelo terremoto que atingiu a costa nordeste do Jap&atilde;o em 2011, em kWh,&nbsp;foi de</p>
</p>
</div>
<div class="alternativa"><div class="content"><strong>A)</strong> <p><img src="https://simulado.metodomedicina.com.br/uploads/questoes/2024/07/30/66a8fc0828c4d.png" style="width: 81px; height: 38px;"></p></div></div><div class="alternativa"><div class="content"><strong>B)</strong> <p><img src="https://simulado.metodomedicina.com.br/uploads/questoes/2024/07/30/66a8fc0828cc3.png" style="width: 83px; height: 37px;"></p></div></div><div class="alternativa"><div class="content"><strong>C)</strong> <p><img src="https://simulado.metodomedicina.com.br/uploads/questoes/2024/07/30/66a8fc0828d4d.png" style="width: 83px; height: 40px;"></p></div></div><div class="alternativa"><div class="content"><strong>D)</strong> <p><img src="https://simulado.metodomedicina.com.br/uploads/questoes/2024/07/30/66a8fc0828db9.png" style="width: 83px; height: 37px;"></p></div></div><div class="alternativa"><div class="content"><strong>E)</strong> <p><p>10<sup>17,19</sup></p></p></div></div>
</body>
</html>

The images are OK in the HTML preview

But after converting to Docx, the images are placed in separate paragraphs.

Sep 02 '24 20:09 BangemannGuilherme

Hello! I reviewed the issue you raised, and after testing your code, I confirmed that the project indeed couldn't handle inline images properly. Firstly, I fixed the missing run object by initializing it with self.run = self.paragraph.add_run() before inserting text or images. This ensures that both images and text are added within the same run, avoiding the creation of separate paragraphs. Next, to address the line spacing issue, I added paragraph_format.line_spacing = 1.0, ensuring appropriate spacing between images and text. Additionally, I ensured all operations within a paragraph remain in the same run to prevent unnecessary line breaks, keeping the images and text inline. I've submitted a PR with the changes, and if you'd like more details, feel free to leave me a message! I hope this helps!

Oct 24 '24 01:10 cyy-2024