How Can I Get The Height Of The Baseline Of A Certain Font?

I'm hoping to be able to find the height of the baseline of a piece of text in a div using javascript. I can't use a predefined font, because many of my users will be using a larg

Solution 1:

I made a tiny jQuery plugin for that. The principle is simple:

In a container, insert 2 inline elements with the same content but one styled very small . and the other very big A. Then, since there are vertical-align:baseline by default, the baseline is given as follow:

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

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

Here is the 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))

then, smoke it with:

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

--

Give it a try at: http://bl.ocks.org/3157389

Solution 2:

Following the discovery by Alan Stearns (http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/) that inline-block elements change the baseline alignment of other inline elements, I put together a demo which I found more accurate than https://stackoverflow.com/a/11615439/67190, and actually more simple to derive a value in JavaScript: http://codepen.io/georgecrawford/pen/gbaJWJ. Hope it's useful.

<div><spanclass="letter">T</span><spanclass="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;
}

Solution 3:

Vanilla JS, no font info required tested on Chrome, Firefox and Edge :

functiongetBaselineHeight(el){
    let bottomY = el.getBoundingClientRect().bottom;//viewport pos of bottom of ellet baselineLocator = document.createElement("img"); // needs to be an inline element without a baseline (so its bottom (not baseline) is used for alignment)
    el.appendChild(baselineLocator);

    baselineLocator.style.verticalAlign = 'baseline' ; // aligns bottom of baselineLocator with baseline of ellet baseLineY = baselineLocator.getBoundingClientRect().bottom;//viewport pos of baseline
    el.removeChild(baselineLocator);
        
    return (bottomY - baseLineY) ;        
}

functionpositionLine(){
    let line = document.getElementById("line");
    let lorem = document.getElementById("lorem");
    let baselineHeight = getBaselineHeight(lorem);
    let newLinePos = lorem.getBoundingClientRect().bottom - baselineHeight ;
    line.style.top = newLinePos + "px" ;

}

#lorem{
    background-color: lightblue;
}
#line{
    position:absolute;
    left : 0 ;
    height:1px;
    width:100%
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet"/><spanid="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</span><br><br><buttonclass="btn btn-primary"onclick="positionLine();">position line on baseline</button><br><br><svgid="line"><linex1="0"y1="0"x2="100%"y2="0"style="stroke:rgb(255,0,0);stroke-width:1"></line></svg>