Wie kann ich die Grundlinie eines HTML-Elements sehen?

Question

Die Devtools jedes Browsers zeigen die Felder für Inhalt, Füllung, Rand und Rand eines Elements an. Gibt es eine Möglichkeit, einen Browser (irgendeinen Browser) dazu zu bringen, mir die Grundlinie eines Elements zu zeigen? Es würde erheblich beim Debuggen der Inline-Box-Ausrichtung helfen.

Answer 1

Dies wird Ihre Frage nicht vollständig beantworten, aber ich hoffe, es kann mindestens einige Verwendung sein ... oder vielleicht wird es auch jemanden inspirieren, um mit einem besseren zu kommen!

Der Trick besteht darin, a) die Position der Basislinie zu berechnen und b) diese Information für alle Elemente verfügbar zu machen.

Die Methode zur Berechnung der Grundlinie ist überraschend nicht geradlinig: Wir müssen zwei Elemente erstellen, von denen eines die Schriftgröße 0 hat, und dann den Unterschied in der obersten Position zwischen ihnen berechnen.
Um diese Berechnung in alle HTML-Elemente einzufügen, verwenden wir die Methode defineProperty, um dem Prototyp der Klasse HTMLElement eine neue Eigenschaft hinzuzufügen.

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

Der Nachteil hierbei ist, dass Sie einen Browser benötigt, die alle Eigenschaften von HTML-Element-Knoten zeigen. Bisher ist das einzige, was ich gefunden habe, SeaMonkey's DOM Inspector.

Andere Browser entweder nicht über die Fähigkeit, JavaScript-Knoteneigenschaften zu zeigen, oder sie zeigen nur die integrierten in diejenigen, nicht die vom Benutzer hinzugekommenen.

Wie auch immer, hoffe das hilft ein bisschen!