在 DIV 内对齐字体基线或在画布“外部”显示内容答案

【问题标题】：Align font baseline inside DIV or display content "outside" canvas在 DIV 内对齐字体基线或在画布“外部”显示内容
【发布时间】：2013-05-31 02:38:03
【问题描述】：

我有一点设计问题，我似乎无法理解。也许我可以在这里找到一些有创造力的人，他们可以为我指明方向 - 我相信我现在有创造力障碍:(

在我解释之前，请先看看下面的例子。这使事情变得更容易： http://jsfiddle.net/DV9SE/3/

<canvas id="mycanvas" width="100" height="20"></canvas>
<div id="mydiv">ASDqpjy</div>

#mycanvas {
  position:absolute;
  left:20px;
  top:20px;
  border:1px solid #999999;
}
#mydiv {
  position:absolute;
  height:20px;
  width:100px;
  left:20px;
  top:50px;
  border:1px solid #999999;
  font-family:arial;
  font-size:14px;
  line-height:2.2;
}

var canvas = $('#mycanvas')[0];
var ctx = canvas.getContext('2d');

ctx.font = '14px arial';
ctx.fillText('ASDqpjy', 0, canvas.height);

如您所见，将文本的基线放在画布元素的最底部非常容易。这正是我需要的一个项目。基线必须位于元素的底部（稍后我可以通过 JQuery 将其呈现为可移动）。但问题是：文本被截断了，因为很明显，较低的部分会在画布之外，因此无法呈现。

另一种选择 - 或者我认为 - 是将所有内容放在 DIV 中，这使得渲染部分文本成为可能，即在实际边框/边距之外。但是这里的问题是：我必须通过使用 css line-height 来调整基线。当涉及一种或两种字体时，这不是问题。但是由于该项目将允许使用数十种字体进行字体选择，因此为每种字体创建像素精确的行高规则将是一项完整的工作。

有人知道如何解决这个问题吗？如何将字体的基线一致地移动到 DIV 元素的底部，或者一个创造性的解决方案，如何在画布中显示实际上“外部”的部分？ ;)

非常感谢！

【问题讨论】：

标签： jquery css canvas fonts baseline

【解决方案1】：

您可以使用display:table-cell 和vertical-align:bottom。喜欢这里：

http://jsfiddle.net/DV9SE/1/

【讨论】：

非常感谢蒂姆的回答。不过，您的解决方案并不完全是我想要的。您会看到，在您的示例中，字体基线并不精确地位于 div 的底部边缘。 “边界框”的底部是。但我需要基线，就像在画布中一样。
看起来您可以通过将line-height 设置为font-size 的一半来复制它。这更像吗？ jsfiddle.net/DV9SE/2
差不多，但也不完全是这样，我也试过这个。如果您使用 60 或更大的字体大小并将 line-height 相应地设置为 30+，您会注意到它并没有将字体基线完全放在 div 下边距。此外，当我使用更多“不寻常”的字体（例如书法字体）时，此解决方案也不起作用。
也许我应该解释一下基线位置在这个项目中是如此重要，因为它的精确坐标稍后会发送到一个 php 脚本，该脚本会创建一个包含 POST 发送数据的 PDF。因此，准确的位置非常重要。