Created
June 18, 2017 22:17
-
-
Save anonymous/8d0469d700095826a88c3ee8d79445b2 to your computer and use it in GitHub Desktop.
Full Justify
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)})`) | |
}) | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
<script src="https://unpkg.com/[email protected]"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment