如何计算文本的基线

Question

我正在尝试编写一个测试来确定 <input> 中呈现的文本是否具有与标签相同的基线：

为此，我想计算每个元素中呈现的文本的基线并比较这两个值。这可能吗？如果可以，它是如何实现的？如果不是，是否有更好的方法来确定两个元素的基线相同？

我找到了一种确定标签基线的方法，该方法似乎可以可靠地工作：

function getBaseline(element) {
    var span = document.createElement("span");
    span.setAttribute("style", "font-size:0");
    span.innerText = "A";
    jQuery(element).prepend(span);
    return span.getBoundingClientRect().bottom;
}

但是，此方法不适用于 <input>，因为在那种情况下我无法插入跨度。

Answer 1

我找到了一种根据您的函数获取计算基线的方法。诀窍是创建一个包装器并将元素中的所有样式应用到它。我可以确认它在 OSX 上的 Firefox (v38) 和 Chrome (v44) 中有效。不幸的是，它在 Safari 中无法正常工作。

DEMO

function getBaseline(element) {
    element = jQuery(element);
    var span = document.createElement("span");
    span.setAttribute("style", "font-size:0");
    span.innerText = "A";

    var wrapper = document.createElement("span");
    applyCSSProperties.call(wrapper, element);
    element.wrap(wrapper);
    element.before(span);

    var computed = span.getBoundingClientRect().bottom;

    span.remove();
    element.unwrap(wrapper);

    return computed;
}

function applyCSSProperties(element) {
    var styles = {};
    var comp = getComputedStyle(element[0]);

    for(var i = 0; i < comp.length; i++){
        styles[comp[i]] = comp.getPropertyValue(comp[i]);
    }

    jQuery(this).css(styles);
}

如何计算文本的基线

How to compute the baseline of text

html

javascript

css

baseline