如何将文本的基线垂直对齐到 HTML/CSS 中的设定点

Question

I have created an algorithm that converts text formatted in SVG into HTML, the algorithm works well but the positioning of the text in the HTML version is slightly out compared to the SVG.

我意识到这是由于 SVG 中的坐标系造成的； 它的原点在左下角而不是左上角。 因此，我的 HTML 文本应该低于 position。 这是商业软件，我个人宁愿保留文字为SVG，但由于客户要求，我不能，而且这需要是一个像素完美的副本！

为了修复 HTML，我需要对齐文本，使其基线位于我从 SVG 读取的位置。 我试图通过垂直对齐来做到这一点，但没有成功。

问题不在于这里的坐标，我已经知道文本的基线应该在哪里。

有谁知道如何将某些文本的基线与 HTML 中的设定点对齐？ 或者有谁知道是否可以使用基线而不是左上角放置文本。

谢谢

Answer 1

line-height 应该适合你。 但老实说，你需要尝试一些东西，比如填充，边距才能让它恰到好处。

Answer 2

您应该能够使用 div 底部和左侧（或任何您将每一行文本设置为）CSS 属性（并确保它的 position 设置为绝对）来定义位置。

Answer 3

CSS 无法更改基线的 position。 根据字体，它在哪里。

我很想通过试错来做到这一点，但这需要适用于任何 SVG 文件，它可以使用任何字体，任何大小。 因此，保证金每次都会有所不同。

这排除了任何类型的“黑客”以使其看起来正确..

查看vertical-align的所有可能值。

如果这些都没有帮助，我不知道该建议什么。

Answer 4

解决方法

一种方法是将 fonts 包装在一个元素中，以允许在视口中垂直轻推它。

<style>
.font-vertical-fix {
  position: relative;
  bottom: -0.2em;
}
</style>

<span class="font-vertical-fix">
  Some badly designed font family ported to the web.
</span>

示例： https://jsfiddle.net/rkc3ho48/

解决方案

解决方案是使用专为 web 设计的 Webfont。

并非所有为 Adobe/Sketch 等桌面应用程序设计的 fonts 在设计时都考虑到了 web。 在这些平台上，设计人员只需垂直微调 canvas 中的字体即可。