मैं एक निश्चित फ़ॉन्ट की आधार रेखा की ऊंचाई कैसे प्राप्त कर सकता हूं?

Question

मैं जावास्क्रिप्ट का उपयोग कर div में पाठ के एक टुकड़े के baseline की ऊंचाई को खोजने में सक्षम होने की उम्मीद कर रहा हूं।

मैं एक पूर्वनिर्धारित फ़ॉन्ट का उपयोग नहीं कर सकता, क्योंकि मेरे कई उपयोगकर्ता अपने ब्राउज़र में एक बड़ी फ़ॉन्ट सेटिंग का उपयोग करेंगे।

मैं जावास्क्रिप्ट में यह कैसे कर सकता हूं?

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 
======================= 

यहाँ coffeescript में प्लगइन (JS here) है

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

-

इसे आज़माएं टी: 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 से अधिक सटीक, और डाल के बाद जावास्क्रिप्ट में मूल्य: 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; 
}