Outlook Mail 的製作紀錄 - MSO conditional comments 及 VML (Vector Markup Language)

在製作 Outlook HTML Mail 時，PC 版 Outlook 有著許多的限制，
像是有限的 CSS 支援 (例如不支援 border-radius，要以 inline-css 的方式)、
最好的排版方式是使用 <table> 等，
所以在設計版面上面跟普通的 html page 有著蠻大的不同。

今天想要紀錄的是如何製作一般 Web Mail (如 Gmail、Web 版 Outlook 等) 及 PC 版 Outlook 都可正常顯示的 "在圓角長方形上面的一個有帶連結的圓角長方形按鈕"。

成果圖會像這樣 (還是有些許差異，但大體上設計沒有跑掉)：

如果是普通的 Web Mail，HTML 的部份可以這樣設計：

<div style="border-radius: 10px; background-color: #f4f4f4; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; padding-left: 20px;">
	<a href="https://xxx.xxx.xxx" style="background-color: #000000; color: #ffffff; border-radius: 10px; padding-top:10px; padding-bottom:10px; padding-right:20px; padding-left:20px; font-size: 16px; text-decoration: none;">
		Click This Button
	</a>
 </div>

在 Gmail 的樣子如下(Web Outlook 也差不多)

但是 PC Outlook 沒辦法正常處理 border-raidus, padding 等問題，會長得像這樣：

所以需要對 PC Outlook 做特別處理。

這裡我們使用了兩個知識點來處理，分別是用來分辨裝置是否為 PC Outlook 的 MSO conditional comments 和用來繪置圖形的 VML (Vector Markup Language) 。

MSO conditional comments 可以寫在 HTML 裡，可以用來判斷裝置是否為 PC Outlook，
寫法如下，對一般網頁瀏覽器來說，專鬥給 PC Outlook 看的部份因為被 <!-- 和 --> 包圍所以會被視為注解，而給一般網頁瀏覽器看的部份則不會在 PC Outlook 上顯示。
這樣我們就可以區分 PC Outlook 和一般網頁瀏覽器了。

<!--[if mso]>
給 PC Outlook 看的 Content，PC Outlook 會顯示，而一般網頁瀏覽器會視其為注解，因為被 <!-- 和 --> 包圍
<![endif]-->

<!--[if !mso]><!-- -->
給一般網頁瀏覽器看的 Content，PC Outlook 不會顯示
<!--<![endif]-->

再來是 VML (Vector Markup Language) ，雖然 PC Outlook 可以顯示 HTML，但它使用的其實是 Word 的 Render Engine，而其可以使用 VML (Vector Markup Language) 來繪製圖形。
所以我們這邊可以使用 VML 取代 HTML 來繪製我們要的圓角連結按鈕，更詳細的 VML 圖形繪制語法可以參考 使用預先定義的圖形 - Win32 apps | Microsoft Learn。

在這裡我使用了 <v:roundrect> 來繪製圓角長方形。
第一個 <v:roundrect> 設定如下：

1. 用 strokecolor 和 fillcolor 設定邊框及底色為灰色 (#f4f4f4) 。
2. 用 arcsize 設定圓角半徑。
3. 用 style 設定 width 和 height。
4. 用 style 設定 position: absoulte 用來等下將下一個 <v:roundrect> 疊在上面顯示。

第二個 <v:roundrect> 設定如下：

1. 用 strokecolor 和 fillcolor 設定邊框及底色為黑色 (#000000) 。
2. 用 arcsize 設定圓角半徑。
3. 用 style 設定 width 和 height。
4. 用 style 設定 position: absoulte， 配合 top 和 left 設定擺放位置，這樣就可以將這個 <v:roundrect> 放置在第一個 <v:roundrect> 中央。
5. 用 href 設定連結。
6. 裡面可以放置一個 <center> 來顯示按鈕文字。

要注意的是 <v:roundrect> 內部不能再放一個 <v:roundrect> ，因為 <v:roundrect> 不支援嵌套。

最後的語法結果如下：

<!--[if mso]>
 <v:roundrect
	xmlns:v="urn:schemas-microsoft-com:vml"
	xmlns:w="urn:schemas-microsoft-com:office:word"
	style="v-text-anchor:middle;position:absolute;height:64px;width:520px;"
	arcsize="10%"
	strokecolor="#f4f4f4"
	fillcolor="#f4f4f4">
 </v:roundrect>
 <v:roundrect
		xmlns:v="urn:schemas-microsoft-com:vml"
		xmlns:w="urn:schemas-microsoft-com:office:word"
		href="https://xxx.xxx.xxx"
		style="v-text-anchor:middle;position:absolute;top:12;left:180;height:40px;width:160px;"
		arcsize="10%"
		strokecolor="#000000"
		fillcolor="#000000">
		<w:anchorlock/>
		<center style="color:#ffffff;font-family:sans-serif;font-size:16px;">
		  Click This Button
		</center>
  </v:roundrect>
<![endif]-->

<!--[if !mso]><!-- -->
 <div style="border-radius: 10px; background-color: #f4f4f4; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; padding-left: 20px;">
	<a href="https://xxx.xxx.xxx" style="background-color: #000000; color: #ffffff; border-radius: 10px; border-top:10px solid #000000; border-bottom:10px solid #000000; border-right:20px solid #000000; border-left:20px solid #000000; font-size: 16px; text-decoration: none;">
		Click This Button
	</a>
 </div>
<!--<![endif]-->

參考資料：

1. 向量標記語言 （VML） - Win32 apps | Microsoft Learn
2. 使用預先定義的圖形 - Win32 apps | Microsoft Learn
3. 從零開始建立一個 Email HTML 版型 | 電子豹部落格