특정 글꼴의 기준선 높이를 어떻게 얻을 수 있습니까?

Question

javascript를 사용하여 div에있는 텍스트 조각의 높이를 찾을 수 있기를 바랍니다.

많은 사용자가 브라우저에서 더 큰 글꼴 설정을 사용하기 때문에 미리 정의 된 글꼴을 사용할 수 없습니다.

어떻게 이것을 자바 스크립트에서 할 수 있습니까?

Answer 1

작은 jQuery 플러그인을 만들었습니다. 원리는 간단합니다 :

컨테이너에는 같은 내용의 인라인 요소 2 개를 삽입하지만 하나는 매우 작게 스타일이 다른 하나는 .이고 다른 하나는 매우 큰 A입니다. vertical-align:baseline 기본적으로 있기 때문에 가 그런 다음, 기준은 다음과 같이 주어진다 :

:

$ = @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)) 

으로 연기 후 : 여기

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

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

는 커피 스크립트에서 플러그인 ( JS here)입니다

$('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/) 요소가 다른 인라인 요소의 초기 정렬을 변경하는 인라인 블록, I 함께 https://stackoverflow.com/a/11615439/67190보다 정확하고, 파생 실제로 더 간단 I 발견 데모 넣어 이어 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; 
}