Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Full Justify
<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>
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)})`)
})
});
<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>
@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
You can’t perform that action at this time.