带有富文本的 QML 文本元素：如何调整 <img> 的垂直位置

Posted 2023-02-16

【中文标题】带有富文本的 QML 文本元素：如何调整 <img> 的垂直位置

【英文标题】：QML Text element with rich text: How to adjust vertical position of an <img>

【发布时间】：2012-11-27 12:37:38

【问题描述】：

我有一个包含一些 html 内容的 Text 元素，其中包含一个 <img> 标记。我想调整这个图像的基线，因为它显示了一个光栅化的乳胶数学公式。检测图像中的基线是另一项任务。这个问题是当我知道我必须移动图像多少像素时如何调整图像的垂直位置。

在 HTML 中，我可以使用相对定位。由于 Qt 只支持a subset of CSS，所以我必须使用不同的 CSS 属性。但是，当使用 QML Text 元素显示 HTML 时，它们中的 none 似乎正在工作！怎么了？

Text 
    text: 'test <img style="padding: 100px" src="latex/182.png"/>'

与省略样式属性相比，这显示完全相同。就像 QML 忽略样式属性一样。 QML 是否使用另一个（甚至更小）的 HTML 引擎？

我已经发现图像仅在“富文本”模式下受支持（还有“样式文本”模式不支持图像但其他 HTML 标记，如 <b> 和 <i>）。

【问题讨论】：

这是一个老问题，所以下面的答案可能已经过时了。无论哪种方式，我必须为我的用例将 Text 元素上的 textFormat 属性（现在？）设置为 Text.RichText。然后基本的 CSS 属性和表格元素按预期工作。

【参考方案1】：

我已经通过使用 HTML <table>s 解决了类似的问题。它们在 Qt 中得到了更好的支持。

【讨论】：

值得一试。但是，这将引入一个新问题：文本换行......我无法想象如何解决这个问题......还是我理解错了？您想将整个文本包装在一个表格中（因此在图像之前有一个带有文本的单元格，在图像之后有一个带有文本的单元格，在图像之后有一个带有文本的单元格，或者如果有更多图像，则更多）或者只是换行一个单元格的表格中的图像？

我已经将每个图像包装在单个单元格表中。 CSS float 似乎工作正常，至少在 <table> 元素中。

我不明白...如果我将图像包装在一个带有单个单元格的表格中，表格会引入一个新段落，这不是我想要的。如果我在表格上指定float:right 或left，它会浮动在段落文本旁边。示例：text before <table><tr><td><img src="test.png"/></td></tr></table> text after Qt 可以内联显示表格吗？

呃，我的想法是使用float: both，但现在，我意识到QT 不支持（在我的应用程序中我只需要float: left）:(

P.S.作为最后的手段，您可以尝试使用 webkit (QML WebView) 或尝试使用字体度量并在图像中手动填充。