search

pablosichert / react-truncate

React component for truncating multi-line spans and adding an ellipsis.
https://www.webpackbin.com/bins/-Kw6QnAkjmv1OD6Of-ZD
ISC License
587 stars 129 forks source link

Bugfix: Fix font variable ordering for proper font-weight calculation in IE11 #150

Open mitchellma opened 3 years ago

mitchellma commented 3 years ago

Fixes #127 and possibly #138.

The character calculation is off in IE11 because font-weight is not properly applied as IE11 requires strict adherence to the font string docs with font-weight after font-style (https://developer.mozilla.org/en-US/docs/Web/CSS/font#formal_syntax).

So in IE11 'normal 700 28pt Arial' (font-weight after style) results in bolded text, same as bolded '700 28pt Arial' .

Screen Shot 2021-09-23 at 10 55 51 AM Screen Shot 2021-09-23 at 10 56 20 AM

but '700 normal 28pt Arial' (font-weight before style) is not bolded, same as not bolded 'normal 28pt Arial'.

Screen Shot 2021-09-23 at 10 56 49 AM Screen Shot 2021-09-23 at 11 31 08 AM

Chrome and Firefox don't have this issue since they do some parsing on the style string even interpreting 700 to 'bold' before computing the css so IE11 is just special.