特定のフォントのベースラインの高さを取得するにはどうすればよいですか？

Question

javascriptを使用してdiv内のテキストの高さをbaselineの高さで見つけることができたらと思っています。

多くのユーザーがブラウザでより大きなフォント設定を使用するため、定義済みのフォントを使用することはできません。

どうすればjavascriptで行うことができますか？

Answer 1

小さなjQueryプラグインを作成しました。

コンテナには同じコンテンツの2つのインライン要素を挿入しますが、1つは非常に小さいスタイルの.ともう1つは非常に大きい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() 

-

T：http://bl.ocks.org/3157389

Answer 2

アラン・スターンズ（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; 
}