Letter spacing and text-shadow on Chrome/Firefox about bounty HOT 13 CLOSED

Hi @francesco-incomedia. Yea this is sort of known bug. It's due to the fact draw area of svg crops everything which not belongs to it. I will look later if there is some workaround.

https://slides.com/coderitual/odoo-js#/26

The solution is to extend svg area to allow filters (like shadow) expand but the tricky part is that I don't know what kind of filters user may apply.

from bounty.

Thanks! svg width seems to solve the problem on the last character. What about the shadow on non-digit characters ("€" in my example)?

Thanks

from bounty.

I need to check whether it is caused by not enough width of non digit character or rather being covered by an adjacent neighbor.

from bounty.

Ok, I hope it could be fixed.
The problem on the last character should be solved with a workaroud adding an empty space at the end of the animated text.

from bounty.

yea, but the problem is how big this space should be. Normally you don't want the library to occupy space which is not necessary. It depends of parameters of the filter you may use.

from bounty.

@coderitual The text-shadow issue on non-digit characters seems to be caused from the applied filter.
It seems that can be solved editing this code

const createCharacter = (svg, el, fontSize) =>
svg
::append('g')
::append('text')
::style('filter', url(#createShadowFailFilter))
::text(el);

into this:

const createCharacter = (svg, el, fontSize) =>
svg
::append('g')
::append('text')
::text(el);

What do you think about it?

from bounty.

Thanks for the investigation! I forgot back then I had some shadow issue on some browsers. Could you please create PR for this? I will test on different browsers if it works.

from bounty.

Ok, done. Tried on Chrome, Firefox and Safari on iPhone and seems to worls fine.

from bounty.

Cool. Could you please remove definition of createShadowFailFilter. I think it will no longer be needed. One thing I am worried is safari browser (on ios and mac os).

from bounty.

Yes, I've updated the pull request. I can check on Safari (Mac) later.
On Edge there are no text-shadow effects visible (nor with this update and with your original code).

Francesco

from bounty.

On Safari seems to be ok too...

from bounty.

Thanks for the effort :)

from bounty.

It's published as 1.2.1. Thanks @francesco-incomedia for the contribution!

from bounty.