Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="svgresponsivetext" />
  <meta charset="utf-8">
  <title>svgresponsivetext</title>
  <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  <!-- does not support inner formatting -->
  <!-- like certain words bold or italic -->
  <!-- inherits style from parent -->
  <ul>
    <li class="textFit--left" style="position: static; letter-spacing: 1em;">Some short text</li>
    <li class="textFit--left">Some Longer text that mayyyyy have to be shrunk text</li>
    <li class="textFit--left">Some text</li>
    <li class="textFit--left">Some medium text which may get shrunk</li>
    <li class="textFit--left">Some medium text w shrunk</li>
    <li class="textFit--left">Some medium text which may  shrunk</li>
    <li class="textFit--left">Some medium text whicet shrunk</li>
    <li class="textFit--left">Some medium tex shrunk</li>
  </ul>
</body>
</html>
 
body {
  margin: 0;
  font-family: sans-serif;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  display: block;
  height: 2em;
  margin: 1em 1em 2em;
  position: relative;
  letter-spacing: 0.01px;
  font-weight: bold;
  
  &:hover {
    box-shadow: inset 0 0 0 1px #f00;
  }
  
  &:after {
    content: '';
    display: block;
    border-bottom: 1px solid #000;
    position: absolute;
    left: -1em;
    right: -1em;
    bottom: -1em;
    
  }
}
[class*="textFit"] {
  
  svg {
    max-height: 100%;
    max-width: 100%;
    overflow: visible;
    position: absolute;
    margin: auto;
    height: auto;
    width: auto;
  }
}
.textFit {
  
  &,
  &--left,
  &--top-left,
  &--bottom-left,
  &--top,
  &--bottom {
    svg {
      left: 0;
    }
  }
  
  &,
  &--right,
  &--top-right,
  &--bottom-right,
  &--top,
  &--bottom {
    svg {
      right: 0;
    }
  }
  
  &,
  &--left,
  &--right,
  &--top,
  &--top-left,
  &--top-right {
    svg {
      top: 0;
    }
  }
  
  &,
  &--left,
  &--right,
  &--bottom,
  &--bottom-left,
  &--bottom-right {
    svg {
      bottom: 0;
    }
  }
}
 
function textFit (nodes) {
  
  function getRenderedValue (node, prop) {
    return window.getComputedStyle(node).getPropertyValue(prop);
  }
  
  // firefox...
  // not only has no support for offsetWidth of text nodes
  // but getComputedTextLength does not take into account for letter-spacing
  function noOffsetWidth (node, text) {
    var width = text.getComputedTextLength();
    var spaces = text.textContent.length-1;
    spaces *= parseInt(getRenderedValue(nodes[i], 'letter-spacing'), 10);
    width += spaces;
    text.setAttribute('textLength', width);
    return width;
  }
  for (var i = 0; i < nodes.length; i++) {
    
    if (getRenderedValue(nodes[i], 'position') == 'static') {
      nodes[i].style.position = 'relative';
    }
    
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.textContent = nodes[i].textContent;
    nodes[i].textContent = '';
    text.setAttribute('font-family', 'inherit');
    text.setAttribute('font-weight', 'inherit');
    text.setAttribute('font-size', 100);
    text.setAttribute('text-anchor', 'middle');
    
    svg.setAttribute('fill', 'currentcolor');
    svg.appendChild(text);
    nodes[i].appendChild(svg);
    
    // text.getComputedTextLength() doesn't take into account letter-spacing
    var width = text.offsetWidth || noOffsetWidth(nodes[i],text);
    var height = 70;
    text.setAttribute('x', '50%');
    text.setAttribute('y', '100%');
    svg.setAttribute('width', width*100);
    svg.setAttribute('height', height*100);
    svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
  
  }
}
var nodes = document.querySelectorAll('[class*="textFit"]');
textFit(nodes);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jonjohnjohnsonpro
0viewers