用 illustrator 做圖表 RWD！紐時製圖工具 ai2html 介紹
繼上次介紹「編（編輯）工（工程）分離」的新聞工具— ArchieML 後（介紹文在此），這次要介紹另外一個同樣由紐約時報在 2015 年所開源的 ai2html，它可以讓你/妳在 illustrator 中製作 RWD 圖表！
雖然開源至今雖然已經 6 年了（有觀察到紐時應該從 2013 年就已開始使用了），但 ai2html 還是深受許多外媒喜愛，在許多它們的圖表文章中都不難發現 ai2html 的身影，像是這篇、這篇及這篇！只要發現圖表中的文字可以反白，大概有 8,9 成都有使用到 ai2html。
那 ai2html 到底是什麼？講直接一點，它是一個用 JavaScript 寫的 illustrator plugin ，可以提供原生 illustrator 所沒有提供的功能，而 ai2html 的功能就如同字面上的意思，將 ai 檔案轉換成 html！
（如果直接去搜尋「ai2html」，可以發現五年前已經有前輩寫過一篇中文介紹文，非常值得參考，雖然介紹的工具相同，但這篇會以分享導入經驗為主，實際操作可以參考前輩的文章或是 ai2html 的官方網站。）
結論先講！
在講利弊之前，必須先說我是以網路媒體圖表產製者的角度去介紹這個工具，在工作中需要產製大量圖表，以下提到的各項優缺點可能會因行業別、職務的差異而有所不同，大家可以依據各自的需求來判斷這個工具適不適合自己。
嗯 … 那為什麼要讓我的圖表變成 html？轉成一張 png, jpg 或是 svg 檔不好嗎？我可以說一張圖片並沒有不好，但轉成 html 會更好！以下是優缺點：
優點一：製作 RWD 圖表能直接在 illustrator 中完成，加強讀者閱讀體驗
比起寫 html 及 css 去對圖表做 RWD 切版，在 illustrator 中針對每個文字內容拖拉點做 RWD 一定會比較輕鬆！而 RWD 圖表的好處應該不用多說，就是讓使用不同裝置的讀者擁有一個更良好的圖表閱讀體驗。
但相對的這也讓圖表產製者在製作圖表時需要多花一點心力去思考一些問題，像是「手機窄長的螢幕是否要給更多的垂直可視範圍？」、「圖表註解的位置是否要更集中一點？」、「有些註解在手機螢幕上是不是可以省略，讓畫重點更清楚？」。
而 RWD 圖表產製的速度有很大程度也會跟 illustrator 的熟練度有關！只要 illustrator 用得越熟練，就能越快調整各種 RWD 版型的圖表（廢話！）
優點二：在 html 格式中讓圖片與文字分離，搜尋引擎較能讀取圖表中的文字內容
這個優點對現在的我來說比較像是一個「附贈」的功能，因為搜尋引擎關注的地方一直在變，它究竟有沒有在意這點我也真的不是很清楚，就算有助於 SEO 我猜也只會提升一點點點，所以我認為這不應該會是你/妳決定使用 ai2html 的關鍵。
缺點一：很難無痛直接使用，導入前需要花點時間思考如何與 CMS 做結合
當圖表產製者想要使用或是導入時，所會碰到的第一個技術障礙，因為每家媒體 CMS 和文章頁面都長得不太一樣，要把 ai2html 產出的檔案放到一般文章或是專題之中，需要對 ai2html 的 js 檔案或是前端的東西做一點客製化的調整，建議這部分可以找前端工程師一起討論。
缺點二：在一些情況下，html 文字的位置還是會與在 illustrator 中的排版好的位置有一點點差距。
而第三個缺點不會影響太大，但會比較難避免一點，會發生的原因主要是ai2html 在做 RWD 的過程只有圖片會做連續的等比例縮放，文字則是會在特定寬度區間內維持固定的大小，所以在一些比較尷尬的寬度上會產生一些位移，從下圖中可以很明顯地看到。
所以 ai2html 不太適合製作需要精準定位文字的圖表，像是表格，但它非常適合解說型地圖，因為就算註解文字偏移了一點點，也並不太會影響到讀者的體驗。
我們如何使用
實際上經過一些設定調整後，我在關鍵最近一篇文章中的圖表已經開始實驗性地使用 ai2html 了，所以這邊會以文章中的其中一張地圖圖表為例，說明一下實際操作的流程會長什麼樣子。
第一步：分析資料後，透過 QGIS 產生需要用到地圖 SVG 素材
第二步：在 illustrator 排版好不同尺寸的圖表
這邊稍微提一下，ai2html 會針對不同的工作區域(artboard)的寬度來判斷這張圖表是要在何種尺寸下顯示，所以可以針對需求來自行增減工作區域的數量/寬度，舉例來說，因為關鍵一般文章的寬度最大就只會到 700px，所以我不需要針對 700px 以上的圖表去做排版。
第三步：執行 ai2html
執行成功後，可以在 ai 檔的資料夾目錄中發現 ai2html-output 資料夾，在資料夾中可以看到 ai2html 針對不同的尺寸產出了三份不同的圖檔，以及一份 html 檔案，如果直接點開 html 檔，就可以看到 html 圖表最基本的樣子了！
第四步：將檔案上傳到雲端空間
第五步：在 CMS 編輯器中加上特殊 tag
接著就是在我們 CMS 中的原始碼模式中在想要放置圖表的段落加上有著特別 class 的 tag，文章發表之後就可以看到用 ai2html 所製作出來的圖表了！
<p>那全台灣扶老比最低的3個村里在哪裡呢？答案是新竹縣竹北市北興里、台南市善化區蓮潭里以及全國綜合所得税（綜税所得）最高的新竹市東區關新里，這3個里的扶老比皆為16.7%。</p><figure
class="ai2html"
data-project="old-dependency-2021"
data-graph="old-dependency-low" >
</figure><p>新竹北興里及關新里扶老比較低的原因也許不難想像，因為鄰近的新竹科學園區有大量青壯年就業人口，許多年輕家庭選擇在該區居住。</p><script defer src="./ai2html-tnl-loader.js"></script>
補個小小技術點：ai2html-tnl-loader.js 所做的事，簡單來說它會在頁面中搜尋 class 為 ai2html 的 figure tag，然後根據後面的 project 和 graph 屬性去從雲端空間尋找想要嵌入的 ai2html 圖表檔案，並且加上能讓圖表根據不同螢幕寬度做顯示的 JS 程式碼。
最後我必須再次強調，這五步個驟有一些經過客製化後的細節我並沒有在文中說到，原因就如同我上方所提到的，如果要使用的話，各家多多少少都會有差異（前三步驟應該會長得差不多），而我也因為我們 CMS 中有一些小限制，所以有多繞了一點路。
小心，中文有坑！
這邊分享一個如果要在含有中文的圖表中使用 ai2html 可能會碰到的坑，那就是在 Chrome 中，中文字體大小不得低於 12px！其實這樣的限制挺合理的，因為低於 12px 確實會影響到閱讀，但在某些情況下，圖表中就是會有需要用到 12px 以下的字體的時候（手機版型中的一些註解）。
我的解法是去稍微修改一下 ai2html 的 source code，簡單來說就是讓 ai2html 知道當我們有字體小於 12px 時，必須使用 CSS 屬性中的 transform : scale(0.xx) 讓字體變小，這樣就可以解決 Chrome 中文字體限制的問題了。（如果有需要改好的檔案可以留言，我會再釋出一個適合中文使用的版本）。
最後謝謝大家看到這邊，寫到後面都覺得技術有點提太多了（主要是希望大家如果想用的話可以少走一點路），希望前半篇有成功讓你/妳更加了解在實務上 ai2html 能夠幫助我們什麼 XD，有許多 ai2html 詳細的設定並沒有提到，建議大家如果要使用的話還是要去啃一下官方文件，寫得都挺詳細的！
以上，有問題可以在留言區發問！如果覺得這篇文章對你/妳有幫助，歡迎幫我拍拍手，感謝！
