Làm thế nào tôi có thể nhận được chiều cao của đường cơ sở của một phông chữ nhất định?

Question

Tôi hy vọng có thể tìm thấy chiều cao của baseline của một đoạn văn bản trong div bằng javascript.

Tôi không thể sử dụng phông chữ được xác định trước vì nhiều người dùng của tôi sẽ sử dụng cài đặt phông chữ lớn hơn trong trình duyệt của họ.

Tôi có thể làm điều này bằng javascript như thế nào?

Answer 1

Tôi đã tạo một plugin jQuery nhỏ cho điều đó. Nguyên tắc rất đơn giản:

Trong vùng chứa, chèn 2 phần tử nội tuyến có cùng nội dung nhưng một phần rất nhỏ theo kiểu . và khác rất lớn A. Sau đó, kể từ khi có vertical-align:baseline theo mặc định, các cơ sở được đưa ra như sau:

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

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

Đây là plugin trong 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)) 

sau đó, hút thuốc nó với:

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

-

Hãy dùng thử t: http://bl.ocks.org/3157389

Answer 2

Sau khi phát hiện bởi Alan Stearns (http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/) mà inline-block yếu tố thay đổi căn chỉnh ban đầu của các yếu tố nội tuyến khác, tôi đặt lại với nhau một bản demo mà tôi tìm thấy chính xác hơn https://stackoverflow.com/a/11615439/67190, và thực sự đơn giản hơn để lấy được một giá trị trong JavaScript: http://codepen.io/georgecrawford/pen/gbaJWJ. Hy vọng nó hữu ích.

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