Italic text doesn't fit into Textfitted element
wyozi opened this issue · 2 comments
Looks like the extra slant or overhang from an element having font-style: italic is not accounted for in the font size calculations.
Regular text working properly:
Italic text (p cuts off):
This might be font related issue. This jsbin (with behavior copied from react-textfit) seems to handle italic text properly, while the essentially the same code with the Impact font managed to reproduce the problem (https://jsbin.com/jefovocivo/edit?html,output). Browser issue?
This is most likely a browser implementation / font face thing. This behavior is consistent across browsers and is due to the browser wanting to respect the (potentially wacky) spacing of the font being used. This is, of course, as far as I can tell. It's also not just particularly italic fonts, just a higher tendency with them. Here are some relevant links: http://jsfiddle.net/Novado/enhuc4jv/1/
http://www.positioniseverything.net/explorer/italicbug-ie.html