search

malte-wessel / react-textfit

React component to fit headlines and paragraphs into elements
http://malte-wessel.github.io/react-textfit/
MIT License
474 stars 144 forks source link

Italic text doesn't fit into Textfitted element #37

Open wyozi opened 6 years ago

wyozi commented 6 years ago

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:

screen shot 2018-06-28 at 13 08 20

Italic text (p cuts off):

screen shot 2018-06-28 at 13 08 38
wyozi commented 6 years ago

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?

chrants commented 6 years ago

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/

https://stackoverflow.com/questions/26296434/html-italic-letters-protrude-from-their-container-and-may-be-cut-by-the-next-co

http://www.positioniseverything.net/explorer/italicbug-ie.html