Letter spacing and text-shadow on Chrome/Firefox

[francesco-incomedia]

Hi,
I've noted that there are some differences between Firefox and Chrome:

CHROME:

FIREFOX:

I've set:

• text-shadow: 3px 3px 11px rgba(255, 0, 0, 1);
• letterSpacing: 10

As you can see, the shadow is cropped on non-digits characters (€) on Chrome only and on the last character on both Firefox and Chrome.
Is there a way to have the same behavior between browsers and between letters and digits?

Thanks!
Francesco

[coderitual]

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.

[francesco-incomedia]

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

Thanks

[coderitual]

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

[francesco-incomedia]

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.

[coderitual]

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.

[francesco-incomedia]

@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?

[coderitual]

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.

[francesco-incomedia]

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

[coderitual]

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).

[francesco-incomedia]

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

[francesco-incomedia]

On Safari seems to be ok too...

[coderitual]

Thanks for the effort :)

[coderitual]

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