Cross Platform Font Layout - current workarounds

Andrew at MidWest Coast Media andrew at
Tue Aug 25 13:51:19 EDT 2020


My degree is in TV/stage production and digital design. I’ve built web sites (HTML, WordPress, LiveCode), produced/directed broadcast and streaming programs, and delivered custom software on Mac/PC/Web (using Director and Flash), and now Mac/PC/iOS/Android using LiveCode (because you’re right, the HTML5 port isn’t ready for primetime).

Anyone who thinks pixel perfection across mediums is possible has never worked on a web platform; this usually ends up being UI designers who only work in theoreticals. That InDesign file they mocked up might look great saved as a PDF or printed on a specific coated paper using Pantone inks, but those CMYK colors and Post Script fonts are rendered using RGB and WOFF in a web browser or desktop computer so they won’t look the same: and there’s not a damn thing you can do about it (short of making everything an image, but you still can’t make-up for the color gamut differences). The WYSWIG hacks that sufficed in the 90s/00s to make things visually similar were always shoddy at-best creating hundreds of additional lines of code and won’t pass muster with current accessibility standards even if they did "work".

Fonts have ALWAYS been one of the most difficult parts of app development. Whether it’s getting legal fonts (the good ones aren’t cheap, and the cheap ones aren’t good), or cross-platform fonts (not every OS reads the same format, and not every font is available in multiple formats). The closest I’ve come has been to run some scripts when populating text fields to make sure they fit the dimensions allotted in the design. Text doesn’t fit in box? Reduce the fontSize by 1 until it does. Text doesn’t fill the space? Increase the fontSize by 1 until it does. It’s a PITA, so I usually add this in at the end since the art department seems to have another “small change” along the way.

Programming isn't a science as much as an art. With your broadcasting background you understand that a projects aren’t “done” until the deadline: there is ALWAYS something else you would have tweaked if you had more time (2 weeks?!?). But I get it: producers are generally unreasonable eggplant emojis that are notoriously difficult to please.

While LiveCode DOES require some if platform() conditionals, I can only imagine coding this in Swift and Java (even for a unicorn proficient in BOTH) would still take much longer and NOT give the pixel perfection you are referring to. I say “imagine” because I don’t know, and never had to learn, those languages since I could easily pick-up LiveCode from the various programming environments I’ve previously developed for. My copy of Microsoft Windows looks different on my iMac than it does on my Dell, and it wasn’t a fireable offense for the development team.

—Andrew Bell

More information about the use-livecode mailing list