Wie kann ich die Höhe der Grundlinie einer bestimmten Schriftart erhalten?

Question

Ich hoffe, in der Lage, die Höhe der baseline eines Stück Text in einem div mit Javascript zu finden.

Ich kann keine vordefinierte Schriftart verwenden, weil viele meiner Benutzer eine größere Schriftarteinstellung in ihrem Browser verwenden.

Wie kann ich dies in Javascript tun?

Answer 1

Ich habe ein kleines jQuery-Plugin dafür gemacht. Das Prinzip ist einfach:

In einem Container, 2 Inline-Elemente mit dem gleichen Inhalt, aber einer gestylt sehr klein . und die andere sehr große A einfügen. Dann wird, da es vertical-align:baseline standardmäßig sind, wird die Basislinie wie folgt angegeben:

 ^+----+^
     | | +-+| | top 
height | |.|A|| v 
     | | +-+| 
     v +----+ 

======================= 
baseline = top/height 
======================= 

Hier ist das Plugin in 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)) 

dann rauchen sie mit:

$('body').baseline() 
// or whatever selector: 
$('#foo').baseline() 

-

Probieren Sie es aus a t: http://bl.ocks.org/3157389

Answer 2

Nach der Entdeckung von Alan Stearns (http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/), die Inline-Block-Elementen der Basislinie Ausrichtung von anderen Inline-Elementen zu ändern, I zusammen eine Demo, die ich genauer als https://stackoverflow.com/a/11615439/67190 gefunden, und tatsächlich einfachere a herzuleiten Wert in JavaScript: http://codepen.io/georgecrawford/pen/gbaJWJ. Ich hoffe, es ist nützlich.

<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; 
}