just another inlet to tributary

inlet.js

var startX = 267
var startY = 337
var size = 200



var options = {'mittellaenge': 144, 'oberlaenge': 31, 'unterlaenge':41}
    
var fonts = ['Arial', 'Times', 'Verdana', 'Monospace']    
    analyseTypeface('Tributary', size, startX, startY, fonts[0], options)


function analyseTypeface(text, fontsize, startX, startY, fontfamily, options){

var options2 = {'mittellaengeY': startY-options['mittellaenge'],'oberlaengeY': startY-options['mittellaenge']-options['oberlaenge'],'unterlaengeY':startY}

  	var text = d3.select('svg').append('text')
        .attr("x",startX)
        .attr("y",startY)
        .style("font-size", fontsize+"px")
        .style("font-family", fontfamily)
        .style("fill", "black")
        .text(text) 

      var textLength = text.node().getComputedTextLength()

        
      basictextX = startX-187
      basictextY = startY-268

      calcX = basictextX
      calcY = basictextY + 30


      d3.select('svg').append('text')
        .attr("x",basictextX)
        .attr("y",basictextY)
        .style("font-size", "20px")
        .style("fill", "black")
        .text('Typeface / font-family: '+fontfamily) 


      d3.select('svg').append('text')
        .attr("x",calcX)
        .attr("y",calcY)
        .style("font-size", "20px")
        .style("fill", "black")
        .text('SVG FONT SIZE: '+fontsize+'px') 
// ---------------- Oberlaenge ----------------------
      var oberX = startX - 10
      var oberY = options2['oberlaengeY'] 
      var ober = options2['oberlaengeY'] + options['oberlaenge']

       d3.select('svg').append('line')
        .attr("x1",oberX)
        .attr("x2",oberX)
        .attr("y1",oberY)
        .attr("y2",ober)
        .style("stroke-width", 3)
        .style("stroke", "blue")

      d3.select('svg').append('text')
        .attr("x",oberX-100)
        .attr("y",ober-10)
        .style("font-size", "20px")
        .style("fill", "blue")
       .text(ober-oberY+'px')  
        
      d3.select('svg').append('line')
        .attr("x1",oberX-16)
        .attr("x2",oberX+textLength+100)
        .attr("y1",oberY)
        .attr("y2",oberY)
        .style("stroke-width", 3)
        .style("stroke", "blue")          
        
      d3.select('svg').append('text')
        .attr("x",oberX+textLength+110)
        .attr("y",oberY)
        .style("font-size", "20px")
        .style("fill", "blue")
       .text('Ascent line')   
// // ---------------- Mittellaenge oder x-hoehe ----------------------
      var mittelX = startX - 10
      var mittelY = options2['mittellaengeY'] 
      var mittelaenge = options2['mittellaengeY'] + options['mittellaenge']

      d3.select('svg').append('line')
        .attr("x1",mittelX)
        .attr("x2",mittelX)
        .attr("y1",mittelY)
        .attr("y2",mittelaenge)
        .style("stroke-width", 3)
        .style("stroke", "green")

      d3.select('svg').append('text')
        .attr("x",mittelX-100)
        .attr("y",mittelaenge-53)
        .style("font-size", "20px")
        .style("fill", "green")
        .text((mittelaenge-mittelY)+'px')
        
      d3.select('svg').append('line')
        .attr("x1",mittelX-16)
        .attr("x2",mittelX+textLength+100)
        .attr("y1",mittelY)
        .attr("y2",mittelY)
        .style("stroke-width", 3)
        .style("stroke", "green")           

      d3.select('svg').append('text')
        .attr("x",mittelX+textLength+110)
        .attr("y",mittelY)
        .style("font-size", "20px")
        .style("fill", "green")
       .text('Cap line')          
        
// // ---------------- Unterlaenge ----------------------

      var unterX = startX - 10
      var unterY = options2['unterlaengeY'] 
      var unter = options2['unterlaengeY'] + options['unterlaenge']

       d3.select('svg').append('line')
        .attr("x1",unterX)
        .attr("x2",unterX)
        .attr("y1",unterY)
        .attr("y2",unter)
        .style("stroke-width", 3)
        .style("stroke", "purple")

      d3.select('svg').append('text')
        .attr("x",unterX-100)
        .attr("y",unter-10)
        .style("font-size", "20px")
        .style("fill", "purple")
       .text(unter-unterY+'px')  
        
      d3.select('svg').append('line')
        .attr("x1",unterX-16)
        .attr("x2",unterX+textLength+100)
        .attr("y1",unterY)
        .attr("y2",unterY)
        .style("stroke-width", 3)
        .style("stroke", "purple")   
        
      d3.select('svg').append('text')
        .attr("x",unterX+textLength+110)
        .attr("y",unterY)
        .style("font-size", "20px")
        .style("fill", "purple")
       .text('Baseline')   
        
      d3.select('svg').append('line')
        .attr("x1",unterX-16)
        .attr("x2",unterX+textLength+100)
        .attr("y1",unterY + options['unterlaenge'])
        .attr("y2",unterY + options['unterlaenge'])
        .style("stroke-width", 3)
        .style("stroke", "purple")   
        
      d3.select('svg').append('text')
        .attr("x",unterX+textLength+110)
        .attr("y",unterY + options['unterlaenge'])
        .style("font-size", "20px")
        .style("fill", "purple")
       .text('Descent Line')          

// // ---------------- Eigentliche Groesse ----------------------

      d3.select('svg').append('text')
        .attr("x",basictextX)
        .attr("y",startY+100)
        .style("font-size", "20px")
        .style("fill", "black")
        .text('Calculated Size: '+((ober-oberY)+(mittelaenge-mittelY)+(unter-unterY))+'px') 

}

 d3.selectAll('text').each(function(elem){ createBoundingBox(this)})

      function createBoundingBox(idElem){

          var bb = d3.select(idElem).node().getBBox()
          d3.select('svg').append('rect')
            .style('fill','none')
            .attr('x',bb.x)
            .attr('y',bb.y)
            .attr('width',bb.width)
            .attr('height',bb.height)
            .attr('stroke','red')
            .attr('stroke-width',1)  
      }