Skip to content

Instantly share code, notes, and snippets.

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>
opentype.load('//', 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')
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=""></script>
<script src=""></script>
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 900;
src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(// 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.