Как я могу получить высоту базовой линии определенного шрифта?

Question

Я надеюсь найти высоту baseline фрагмента текста в div, используя javascript.

Я не могу использовать предопределенный шрифт, потому что многие из моих пользователей будут использовать более крупную настройку шрифта в своем браузере.

Как это сделать в javascript?

Answer 1

Я сделал крошечный плагин jQuery для этого. Принцип прост:

В контейнере вставьте 2 встроенных элемента с тем же контентом, но в одном стиле очень маленький ., а другой очень большой 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

Answer 2

После открытия Алана 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; 
}