How can I see the baseline of an HTML element?

Question

Every browser's devtools will show you the content, padding, border, and margin boxes of an element. Is there any way to get a browser (any browser) to show me the baseline of an element? It would help considerably in debugging inline box alignment.

Answer 1

This won't answer your question completely, but I hope it can be at least of some use... or maybe it will even inspire someone to come up with a better one!

The trick is a) to calculate the position of the baseline, and b) to make this info available for all elements.

The method of calculating the baseline is surprisingly non-straightforward: we have to create two elements, one of which has font size 0, and then calculate the difference in top position between them.
To put this calculation into all HTML elements, we use the defineProperty method to add a new property to the prototype of the HTMLElement class.

// the main functionality
Object.defineProperty(Element.prototype, 'baselinePosition', 
{
  get: function() {
    var fs0 = document.createElement('span');
    fs0.appendChild(document.createTextNode('X')); fs0.style.fontSize = '0'; fs0.style.visibility = 'hidden';
    var fs1 = document.createElement('span');
    fs1.appendChild(document.createTextNode('X'));
    this.appendChild(fs1); this.appendChild(fs0);
    var result = fs0.getBoundingClientRect().top - fs1.getBoundingClientRect().top;
    this.removeChild(fs0); this.removeChild(fs1);
    return result;
  },
  enumerable: true
});

// and a test run.
var pos = document.getElementById('test').baselinePosition;
console.log('The baseline is at ' + pos + ' px.');

<p id="test">This is the test.</p>

The caveat here is that you will need a browser that can show all properties of HTML element nodes. So far, the only one I found that does that is SeaMonkey's DOM Inspector.

Other browsers either don't have the ability to show JavaScript node properties, or they show only the built-in ones, not the user-added ones.

Anyway, hope this helps a bit!