如何获取某个字体的基线高度？
如何获取某个字体的基线高度？
提问于 2012-04-20 21:23:16
我希望能够使用javascript在div中找到一段文本的baseline的高度。
我不能使用预定义的字体，因为我的许多用户将在他们的浏览器中使用更大的字体设置。
我如何在javascript中做到这一点？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-07-23 23:17:28
我为此做了一个小的jQuery插件。原理很简单：
在容器中，插入两个内容相同的内联元素，但一个样式为非常小的.，另一个样式为非常大的A。然后，由于默认情况下有vertical-align:baseline，因此基线如下所示：
^ +----+ ^
| | +-+| | top
height | |.|A|| v
| | +-+|
v +----+
=======================
baseline = top / height
=======================下面是coffeescript (JS here)中的插件：
$ = @jQuery ? require 'jQuery'
detectBaseline = (el = 'body') ->
$container = $('<div style="visibility:hidden;"/>')
$smallA = $('<span style="font-size:0;">A</span>')
$bigA = $('<span style="font-size:999px;">A</span>')
$container
.append($smallA).append($bigA)
.appendTo(el);
setTimeout (-> $container.remove()), 10
$smallA.position().top / $bigA.height()
$.fn.baseline = ->
detectBaseline(@get(0))然后，用以下命令抽出它：
$('body').baseline()
// or whatever selector:
$('#foo').baseline()--
试一试吧：http://bl.ocks.org/3157389
Stack Overflow用户
发布于 2014-12-04 21:41:19
在Alan Stearns (http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/)发现内联块元素改变了其他内联元素的基线对齐之后，我做了一个演示，我发现它比https://stackoverflow.com/a/11615439/67190更准确，实际上在JavaScript：http://codepen.io/georgecrawford/pen/gbaJWJ中导出值也更简单。希望它是有用的。
<div>
<span class="letter">T</span>
<span class="strut"></span>
<div>div {
width: 100px;
height: 100px;
border: thin black solid;
}
.letter {
font-size: 100px;
line-height: 0px;
background-color: #9BBCE3;
}
.strut {
display: inline-block;
height: 100px;
}Stack Overflow用户
发布于 2019-05-24 21:54:16
Vanilla JS，不需要字体信息，在Chrome，Firefox和Edge上测试：
function getBaselineHeight(el){
let bottomY = el.getBoundingClientRect().bottom;//viewport pos of bottom of el
let baselineLocator = document.createElement("img"); // needs to be an inline element without a baseline (so its bottom (not baseline) is used for alignment)
el.appendChild(baselineLocator);
baselineLocator.style.verticalAlign = 'baseline' ; // aligns bottom of baselineLocator with baseline of el
let baseLineY = baselineLocator.getBoundingClientRect().bottom;//viewport pos of baseline
el.removeChild(baselineLocator);
return (bottomY - baseLineY) ;
}
function positionLine(){
let line = document.getElementById("line");
let lorem = document.getElementById("lorem");
let baselineHeight = getBaselineHeight(lorem);
let newLinePos = lorem.getBoundingClientRect().bottom - baselineHeight ;
line.style.top = newLinePos + "px" ;
}#lorem{
background-color: lightblue;
}
#line{
position:absolute;
left : 0 ;
height:1px;
width:100%
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<span id="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</span>
<br><br>
<button class="btn btn-primary" onclick="positionLine();">position line on baseline</button>
<br><br>
<svg id="line">
<line x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:1"></line>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10247132
复制相关文章
相似问题
腾讯云开发者
