Full Justify

full-justify.markdown

Full Justify

A Pen by Daniel on CodePen.

License.

index.html

<svg id="hey"></svg>

<div class="Texts">
  <svg class="convert">Daniel</svg>
  <svg class="convert">Diekmeier</svg>
  <svg class="convert">ist ein Software-</svg>
  <svg class="convert">Entwickler</svg>
  <svg class="convert">und Designer</svg>
  <svg class="convert">und wohnt gerade in Berlin</svg>
  <svg class="convert">Aber</svg>
  <svg class="convert">lasst uns darueber</svg>
  <svg class="convert">lieber keinen Schlaf verlieren</svg>
  <svg class="convert">Denn</svg>
  <svg class="convert">wir sollen heiter</svg>
  <svg class="convert">Raum</svg>
  <svg class="convert">um Raum</svg>
  <svg class="convert">durchschreiten</svg>
  <svg class="convert">und an keinem</svg>
  <svg class="convert">wie an einer</svg>
  <svg class="convert">Heimat</svg>
  <svg class="convert">haengen.</svg>
</div>

script.js

opentype.load('//fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGBPPOa1q11iOmmM9mDHHHX4.ttf', function (err, font) {
  if (err) {
    return console.log('Font could not be loaded: ' + err);
  }
  
  function reverse (val) {
    return (-1 * val) + 'px'
  }
  
  $('.convert').each(function (index, el) {
    const $el = $(el)
    const text = $el.text().toUpperCase()

    const path = font.getPath(text, 0, 0, 72)
    const svgPath = path.toSVG()
    
    const $tmp = $('#hey')
    $tmp.html(svgPath)
    const bbox = $tmp.find('path').get(0).getBBox()
    
    $el.html('<text font-family="Source Sans Pro" font-weight="900" font-size="72" x="0" y="0">' + text + '</text>')
    
    const w = $el.width()
  
    const scale = w / bbox.width

    $el.attr('width', bbox.width)
    $el.attr('height', bbox.height)

    $el.find('text').css('transform', `scale(${scale}) translate(${reverse(bbox.x)}, ${reverse(bbox.y)})`)
  })
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/opentype.js@0.7.2"></script>

style.stylus

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(//fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGBPPOa1q11iOmmM9mDHHHX4.ttf) format('truetype');
}

* {
  margin 0
  padding 0
}

.Texts {
  padding 1rem
}

.convert {
  display block
  width 100%
  height auto
  margin-bottom 1rem
  background-color transparent //#eee
  overflow visible
  
  &:last-child {
    margin-bottom 0
  }
}

#hey {
  position absolute
  overflow hidden
  height 0
  width 0
  opacity 0
}

#hey path,
#hey2 text {
  transform-origin top left
}