qooxdoo / qooxdoo

qooxdoo - Universal JavaScript Framework
http://qooxdoo.org
Other
764 stars 259 forks source link

force line height to be 1 for qx.ui.basic.Image for font mode #10672

Closed p9malino26 closed 2 months ago

p9malino26 commented 2 months ago

For qx.ui.basic.Image with a font source, this makes the line-height style property of its content element to be set to 1 (i.e. line height same as font height). This is because, currently, line-height is set to its default normal, which is around 1.2 in most browsers. This causes the glyph to be shifted downwards by a few pixels, and sometimes slightly bottom-cropped. Only happens in some browsers, such as Firefox. Images:.

Screenshot 2024-03-11 at 16 03 08 Screenshot 2024-03-11 at 16 03 44

To reproduce, open https://zenesisuk.github.io/zx-ui-theme-avocado.github.io/ in Firefox. You should be able to notice that most icons are slightly too low. Try setting the CSS line-height properties of the icons to '1' and it should fix this issue.