search

newsdev / ai2html

A script for Adobe Illustrator that converts your Illustrator artwork into an html page.
http://ai2html.org
Other
898 stars 146 forks source link

Inconsistent font size on mobile devices despite same markup #52

Closed cedricsam closed 7 years ago

cedricsam commented 7 years ago

Encountered a display bug that only appears when trying on a physical device (not showing upon inspection on Dev Tools). Text that should be the same size sometimes appears larger, despite having the same markup, applied styles.

Take this page on an iPhone SE or 6: https://www.bloomberg.com/politics/graphics/2017-wef-global-risks/

We actually used a JS fix to correct the problem on regular portrait view, seen by most readers. But if you view the page with your phone turned to landscape, the display inconsistency that we encountered will show up, where the font size in boxes with more text (from my guess, when its originating text box in AI is larger than its parent in the original AI file) becomes enlarged. If you code inspect with the Safari debugger, with the page on the phone, the computed size of the <p> is sometimes 18px, sometimes 14px (the correct size). Markup is the same and the same classes are being applied to both. We also tried dropping all of our custom classes from our environment (in fact, the bug will appear even on the ai2html output, prior to injection in a template).

So, am not sure what's happening, but thought it was good to just point out! It might be some very fringe way of using Illustrator (tables aren't probably the best to use with ai2html...). Can provide more infos later if this is a familiar problem.

cedricsam commented 7 years ago

Saw this again this week, on the last graphic of this, and only happens when opened in the mobile app's browser. The text becomes enlarged for the third and fourth item of the bar chart, on the app. Unlike the first time I saw this, error doesn't occur on mobile browsers.

mbloch commented 7 years ago

Hi Cedric, I see the inconsistent text problem on the 2017-wef-global-risks page in portrait mode. I'll look into what might be causing it. Thanks for reporting this.

mbloch commented 7 years ago

I think I tracked down the reason for the inconsistent font sizing. It's an automatic font-resizing feature called Font Boost that was first added to Chrome for Android and later ported to webkit. It has caused problems in the past, you can read about it here: https://bugs.webkit.org/show_bug.cgi?id=84186 http://stackoverflow.com/questions/5303263/fix-font-size-issue-on-mobile-safari-iphone-where-text-is-rendered-inconsisten

I saw two proposed CSS solutions: applying a large max-height or -webkit-text-size-adjust:100% to the affected containers. The second solution seemed to solve the problem on your page when I tested it in mobile Safari. Not sure if it works in other mobile browsers that support Font Boost.

I'll look into adding a fix to ai2html. Meanwhile, you can try adding -webkit-text-size-adjust: 100% to your affected pages.

mbloch commented 7 years ago

I looked into this a bit more... Ai2html has been setting the width of some text containers to be twice the width of the actual text. This appears to confuse some mobile browsers, making them boost the size of the text inside containers that exceed the width of the viewport. When I reduced the width of an affected container using the web inspector, the boost effect went away.

The current beta version (ai2html-beta.js) applies normal widths to text objects. I think this update would fix the problems on Bloomberg's site.

cedricsam commented 7 years ago

Good to know that was something actually happening! Was it originally done to serve a purpose (like, if custom fonts were missing, or if readers had non-100% zoom levels)? Thanks, Matt!

mbloch commented 7 years ago

I think this is fixed now, we'll reopen if the problem recurs.