ai2html text overflow and other annotation/label issues: an easy fix

When you export from Illustrator using ai2html, sometimes your text overflows the graphic, especially when you resize the window. Or maybe your fonts are too big, or your text runs off of the side of the screen, or nothing will line up properly. No matter if you're using Python, R, QGIS, RAWGraphs or anything else for your original visualization: we'll make your finished HTML web page look great!

Spoiler: We'll solve this by making use of the "Paragraph align" tool in Illustrator (and sometimes by making new, smaller artboards). Skip right to 04:20 to see the basic solution being applied.

=========

LNKS

=========

CHAPTERS

00:00 Intro
00:59 Title text overflow
02:05 Example 1 (annotation alignment)
03:03 Why this happens
04:20 The fix: paragraph align
05:22 Example 2 fix (annotation 2)
06:02 Example 3 fix (bar titles)
10:14 Different sizes, different graphics and artboards
12:30 Customizing the small graphic
13:56 Example 4 fix (annotation 3)
15:30 Outro