search

nprapps / lunchbox

Image tools for social media sharing
http://blog.apps.npr.org/lunchbox/
MIT License
175 stars 144 forks source link

Issue with "fi" ligature in HTML2Canvas #75

Closed davisshaver closed 8 years ago

davisshaver commented 8 years ago

One of our producers noted that fi combo would result in the i being dropped. After some experimentation I discovered that the one-liner font-feature-settings: "liga" 0; in the CSS for the Quotable blockquote element fixed the issue. For consideration, I'll put together a pull request too.

quote-finally-weve-fixed-it

eads commented 8 years ago

Whoa!

ghing commented 8 years ago

Same. quote-police-who-are-not-fit__square

eads commented 8 years ago

@TylerFisher @jjelosua can one of you take a look into this?

TylerFisher commented 8 years ago

I'll take a look at @davisshaver's PR.

TylerFisher commented 8 years ago

Hm. I wonder if Gotham just doesn't have that ligature? What fonts are y'all using @davisshaver @ghing?

ghing commented 8 years ago

@TylerFisher I think I was just using whatever font is the default. I think the only thing I overwrote in the CSS was the background color and logo image.

TylerFisher commented 8 years ago

Cool, replicated and merged @davisshaver's PR. Works great.

cscouto commented 7 years ago

I solve this problem using a condition to check if the word has "fi" in the html2canvas.js textList = ((!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) || (textNode.nodeValue.indexOf("fi") !== -1) ) ?