LivelyKernel / lively.next

lively.next is a personal programming kit. It emphasizes liveness, directness, and interactivity.
https://lively-next.org
MIT License
69 stars 16 forks source link

Include fontawesome as SVG via JS #308

Closed merryman closed 1 year ago

merryman commented 3 years ago

Here is an overlay of the way its rendered on my machine and @frcroth:

offset

For the arrow keys it is less noticable, but the other three buttons have quite strong offsets to the top that I would like to know more about. It makes them not perfectly aligned along the horizontal axis which freaks me out.

Originally posted by @merryman in https://github.com/LivelyKernel/lively.next/issues/306#issuecomment-878187753

linusha commented 1 year ago

Although the original issue might be resolved by now, in general we have the problem that there seem to be differences in the exact way webfonts are rendered between linux and mac, which will always result in some optical bugs on either one of the platforms. We hope, that his is primarily a problem with font awesome. Otherwise we are quite done :upside_down_face:

The solution to this is to not include fontawesome as a webfont, but via JS as svg. This however requires some more involved adaptions to measuring/rendering code, etc.