Not working with letter-spacing

[honsa]

Hi, thanks for this nice little plugin, could be very usefull.

Just one problem I am struggeling with, is that it seems not working if letter-spacing is used on the text element.

You can test it in my example with custom fonts and parent element with padding.

https://jsfiddle.net/rxmmpodf/19/

[rikschennink]

Thanks! Glad to hear you find it useful :-)

I've just ran some quick tests in an attempt to fix it but wasn't really succesful. Will ponder on this some more.

[rikschennink]

Ran some more tests. The problem is with the letter spacing being either fixed or relative to the font size. The current algorithm calculates the horizontal space occupied by the font. Then divides the available space by the occupied space, resulting in the scale factor. This works well enough, but stops working when child elements have margins or in this case letter-spacing.

The investigation continues.

[honsa]

Thanks for your great efford.

Edit: I see it is not that easy.

[dshastry]

Just ran into this issue. Not the most ideal solution but it seems to work pretty well in my case. Here's how I did it:

//Add Proper Classes to identify if signatures are typed or drawn
		let signatures = document.getElementsByClassName('SIGNATURE')
		let initials = document.getElementsByClassName('INITIAL')
		
		//Typed Signature
		if(et.my_signer.signature_type==='auto'){
			let i;
			for (i = 0; i < signatures.length; i++) { 
				signatures[i].classList.remove('drawn')
				signatures[i].classList.add('typed')
			}
		
			//Use FittyJS to fit the text to the width of it's parent : https://github.com/rikschennink/fitty
			
			fitty('.sign.typed .signature-text-wrapper .signature-text-wrapper-inner', {
				minSize: 12,
				maxSize: 36
			});
			
			//Fix letter spacing
			let signatureText = document.getElementsByClassName('signature-text-wrapper-inner');
			for (i = 0; i < signatureText.length; i++) { 
				signatureText[i].style.letterSpacing = "0.5px";
			}
			
		}

[lifeinchords]

Is using letter-spacing with fitty currently possible?

[rikschennink]

@lifeinchords no unfortunately not

[tatof]

Please keep this post on top in "issues". It would be a nice feature but it's oke that it doesnt work. Only took me 15 min to know the problem and fix it. Without this post i've would be searching for a fix for ever 😂

ps. for people with custom fonts + letter-spacing. You could edit the base font with font creator tools and change the letterspacing there. (not the best fix)