Preserve ODT image dimensions in Markdown conversion

[Copilot]

Images converted from ODT to Markdown were losing their relative sizing, causing inconsistent display. ODT files define image dimensions via draw:frame attributes (svg:width, svg:height) which were being ignored during conversion.

Changes

• LibreOffice.ts: Added svg:width and svg:height XML attribute bindings to DrawFrame class
• OdtToMarkdown.ts: Extract and forward dimension strings from DrawFrame to image nodes
• MarkdownNodes.ts: Extended TagPayload.width/height to accept string | number for physical units
• markdownNodesUtils.ts: Render dimensioned images as HTML <img> tags with inline CSS; preserve physical units (in, cm, mm) directly from ODT

Images without dimensions continue using standard Markdown syntax.

Example

Before:

![](image.jpg)

After (4.5×1.3 inch image):

<img src="image.jpg" alt="" style="width:4.5256in; height:1.3055in;" />

This maintains relative sizing between images and aspect ratios without modifying image files.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• dl.deno.land
  • Triggering command: /usr/bin/curl curl -s REDACTED (dns block)
  • Triggering command: /usr/bin/curl curl --fail --location --progress-bar --output /home/REDACTED/.deno/bin/deno.zip REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Images lose relative sizing after Google Drive → HTML conversion</issue_title>
<issue_description>## Description:
After converting documents from Google Drive to HTML, images do not retain their relative sizes compared to other images in the document. This leads to inconsistent image display and layout issues in the resulting HTML.

Steps to Reproduce:

Upload a document with multiple images of varying sizes to Google Drive (for example https://docs.enterprisehealth.com/functions/reports/exporting-report-data/)
Convert the document to HTML.
Compare the sizes of images in the HTML output with the original document.

Expected Result:

Images maintain the same relative sizes as in the original Google Drive document.

Actual Result:

All images are rendered at inconsistent sizes; relative proportions between images are not preserved.

https://raw.githubusercontent.com/mieweb/docs/f75ff820102945ce4710eb8ae9567f82ad65d54a/content/functions/reports/exporting-report-data.md

</issue_description>

Comments on the Issue (you are @copilot in this section)

@horner ## Plan: Preserve ODT Image Display Size When Rendering to Markdown

Summary

When converting ODT documents to Markdown, render images using embedded HTML so they appear at the same physical size and aspect ratio defined in the original ODT, without modifying the image files.

Background

ODT documents define image display size via draw:frame attributes (svg:width, svg:height). Markdown image syntax alone cannot express physical dimensions, so raw HTML <img> tags must be embedded in the Markdown output.

Rendering Target

• Output format: Markdown
• Image rendering: Embedded HTML inside Markdown
• Image files: Extracted as-is from the ODT zip

Approach (Use Physical Units)

Use the ODT frame dimensions directly as CSS physical units (cm, mm, or in) on <img> elements embedded in Markdown.

Implementation Details

Source of truth (ODT)

Extract from content.xml or styles.xml:

<draw:frame svg:width="12.3cm" svg:height="6.7cm">
  <draw:image xlink:href="Pictures/foo.png" />
</draw:frame>

Markdown Output

<img
  src="Pictures/foo.png"
  style="width:12.3cm; height:6.7cm;"
  alt=""
/>

Requirements

• Output must be valid Markdown

• Use embedded HTML for images

• Do not alter image files (no rescaling, recompression, or DPI changes)

• Preserve:

  • Aspect ratio
  • Relative size across all images

• Use ODT-defined physical units exactly

Non-Goals

• Responsive resizing
• Pixel-based sizing
• DPI normalization
• PDF export optimization

Notes / Caveats

• Markdown renderers must allow inline HTML

• CSS physical units are browser-interpreted, but relative sizing remains consistent

• We already have a global safeguard (not required for this ticket):

  img { max-width: 100%; }

Acceptance Criteria

• Markdown renders images at the same apparent size as in the source ODT
• Multiple images maintain correct relative proportions
• Image binaries remain unchanged</comment_new>

• Fixes Images lose relative sizing after Google Drive → HTML conversion #617

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.