# Outlook 收发一致问题阐述

</section><section>

# Coremail -> Coremail

</section><section>

<ol>
    <li>
        <p>编辑器内部逻辑缺陷导致</p>
        <p style="font-size:20px"><i>如：在组装表格的时候没有正确清洗辅助性 UI 或错误设置表格宽度为 0 导致发出去的表格宽度和编辑时产生不一致</i></p>
    </li>
    <li>
        <p>中间版本产生的错误数据</p>
        <p style="font-size:20px"><i>如：中间版本产生的邮件存在副作用样式，导致编辑的时候自动清洗就会存在有不一致的地方</i></p>
    </li>
    <li>
        <p>读信与编辑区域样式处理逻辑不一致</p>
        <p style="font-size:20px"><i>如：目前读信页样式优化兼容 Outlook 的逻辑并没有在写信区域保持一致转换逻辑，导致编辑看到的和读信页看到的不一致</i></p>
    </li>
</ol>

</section><section>

# Coremail -> Outlook

</section><section>

<ol>
    <li>
        <p>内部逻辑组装的样式不兼容</p>
        <p style="font-size:20px"><i>如：在组装表格的时候没有正确清洗依稀辅助性 UI 或错误设置表格宽度为 0 导致发出去的表格宽度和编辑时产生不一致</i></p>
    </li>
    <li>
        <p>外部数据 <b>（不可预知）</b></p>
        <ul style="font-size:30px;margin-left:0">
            <li>
                <p>粘贴数据</p>
                <p style="font-size:20px"><i>如：从外部拷贝的 HTML 带有副作用样式</i></p>
                <pre class="code-wrapper"><code class="html hljs language-xml"><span style="color: red !important">红色字体</span></code></pre>
            </li>
            <li>
                <p>第三方邮件（Outlook / 会议空间等）</p>
                <p style="font-size:20px"><i>如：从 Outlook 发来的邮件或会议空间邮件本身的 HTML 含有 Outlook 本身不兼容的样式</i></p>
                <pre class="code-wrapper"><code class="html hljs language-xml"><table style="table-layout:auto"></table></code></pre>
            </li>
        </ul>
    </li>
</ol>

</section><section>

# Outlook -> Coremail

</section><section>

<ol>
    <li>
        <p>VML 数据被错误清洗导致结构丢失样式</p>
        <p style="font-size:20px"><i>如：VML 注释条件被错误清理导致 HTML 结构出错</i></p>
    </li>
    <li>
        <p>HTML 数据本身不兼容 web <b>（不可预知）</b></p>
        <ul style="font-size:30px;margin-left:0">
            <li>
                <p style="font-size:20px"><i>如：Outlook 组装的邮件行高与其本身的渲染行为不一致</i></p>
                <pre class="code-wrapper"><code class="html hljs language-xml"><span style="line-height: 150%">行高文本</span></code></pre>
            </li>
            <li>
                <p style="font-size:20px"><i>如：Outlook 组装的邮件设置表格背景颜色为白色，但对某个单元格设置透明颜色</i></p>
                <pre class="code-wrapper">
                <code class="html hljs language-xml"><table style="background:#fff">
    <tbody><tr><td style="background:transparent"></td></tr></tbody>
</table></code></pre>
            </li>
            <li>
                <p style="font-size:20px"><i>如：Outlook 组装的邮件含有下划线样式但对其中的文本设置了不含下划线样式</i></p>
                <pre class="code-wrapper">
                <code class="html hljs language-xml">
<style>.MsoHyperLink { text-decoration: underline; }</style>
<span class="MsoHyperLink">
    <span style="text-decoration:none">假定没有下划线</span>
</span></code></pre>
            </li>
        </ul>
    </li>
</ol>

</section>

# Coremail -> Coremail

<ol>
    <li>
        <p>编辑器内部逻辑缺陷导致</p>
    </li>
    <li>
        <p>中间版本产生的错误数据</p>
        <p style="font-size:20px"><i>对已知的一些脏数据尝试修复与清洗</i></p>
    </li>
    <li>
        <p>读信与编辑区域样式处理逻辑不一致</p>
        <p style="font-size:20px"><i>保证进入编辑器初始化的内容与读信页优化结构后显示的内容保持一致</i></p>
    </li>
</ol>
</section>

---

# Coremail -> Outlook

<ol>
    <li>
        <p>内部逻辑组装的样式不兼容</p>
        <p style="font-size:20px"><i>通过 CI 静态分析 / 自动化测试保证内部逻辑不会生成 Outlook 不兼容的 HTML 结构</i></p>
    </li>
    <li>
        <p>外部数据 <b>（不可预知）</b></p>
        <ul style="font-size:30px;margin-left:0">
            <li>
                <p style="font-size:20px"><i>有准确解决办法的，通过自动转换，转换成兼容的结构</i></p>
                <p style="font-size:20px"><i>如：识别到粘贴板数据里面的 `!important` 规则直接去掉避免影响编辑</i></p>
            </li>
            <li>
                <p style="font-size:20px"><i>对于没有完美解决方案，但是有副作用的方案，引入自动识别不兼容结构的组件，提示用户自行点击后自动清洗所有不兼容的结构</i></p>
                <p style="font-size:20px"><i>如：识别到粘贴板数据里面含有 `position: absolute` 绝对定位的元素则提示用户，让用户主动点击清洗</i></p>
            </li>
        </ul>
    </li>
</ol>

</section>

---

# Outlook -> Coremail

<ol>
    <li>
        <p>VML 数据被错误清洗导致结构丢失样式</p>
        <p style="font-size:20px"><i>在编辑过程保留 VML 结构避免信息丢失</i></p>
    </li>
    <li>
        <p>HTML 数据本身不兼容 web <b>（不可预知）</b></p>
        <ul style="font-size:30px;margin-left:0">
            <li>
                <p style="font-size:20px"><i>有准确解决办法的，通过自动转换，转换成兼容的结构</i></p>
                <p style="font-size:20px"><i>如：组装的某个邮件上边距使用 MSO 属性 `mso-margin-top-alt`，这种是可以明确通过 `margin-top` 转换适配</i></p>
            </li>
            <li>
                <p style="font-size:20px"><i>对于没有完美解决方案，但是有副作用的方案，引入自动识别不兼容结构的组件，提示用户自行点击后自动清洗所有不兼容的结构</i></p>
                <p style="font-size:20px"><i>如：Outlook 对于 <code>white-space: pre-wrap</code> 样式是不支持渲染的，但在 W3C 下是能支持，这就导致若清洗该样式，导致渲染变化（无法确认是否属于原作者原意）</i></p>
            </li>
        </ul>
    </li>
</ol>

</section>

# Outlook 文本行高映射问题

</section><section>

Outlook 发出带有文本行高的邮件，HTML 结构如下：

<pre>
<code style="font-size: 20px; line-height: 1.1">
<div class="WordSection1">
    <p class="MsoNormal">1.0: Asdfsadfsdafsdafdsafasdf<o:p></o:p></p>
    <p class="MsoNormal" style="line-height:115%">1.15: sadfasdfsdafdsfsdf<o:p></o:p></p>
    <p class="MsoNormal" style="line-height:150%">1.5: asdfsadfasdfsdafasdf<o:p></o:p></p>
    <p class="MsoNormal" style="line-height:200%">2.0: asfdasdfasdfasdfdf<o:p></o:p></p>
    <p class="MsoNormal" style="line-height:250%">2.5: sadfasdfasdsdafsa<o:p></o:p></p>
    <p class="MsoNormal" style="line-height:300%">3.0: sadfadfadfadfsdafsdaf<o:p></o:p></p>
</div>
</code>
</pre>

</section><section>

```html
<style>
    p { line-height: 1.34; }
    p[style*=line-height:115%] { line-height: 1.15 * 1.34; }
    p[style*=line-height:150%] { line-height: 1.5 * 1.34; }
    p[style*=line-height:200%] { line-height: 1.5 * 1.34; }
    p[style*=line-height:250%] { line-height: 1.5 * 1.34; }
    p[style*=line-height:300%] { line-height: 1.5 * 1.34; }
</style>
```

<h3>编辑器内部体系改用了百分比作为行高设置</h3>

<ol style="font-size:30px">
    <li><b>浮点数</b>：子元素是直接继承父元素行高的小数再重新根据当前元素的字号大小，如子元素字体大小为 24px，则子元素行高会重新换算成 1.5 * 24 = 36px</li>
    <li><b>百分比数</b>：子元素是直接继承父元素计算出的行高绝对值，如父元素字体大小为 12px，子元素字体大小为 24px，则子元素行高直接继承父元素计算出来的 150% * 12 = 18px</li>
</ol>

</section><section>

<h3>保持使用标准的浮点数表示文本行高</h3>

1. 编辑器导入数据统一通过系数转换成浮点数体系
2. 编辑器导出数据统一通过系数转换成百分比数体系

</section><section>

### 兼容 Outlook，但不兼容 W3C

</section><section>

### 系数只是用于模拟，并不准确

</section><section>

# Outlook 兼容模式

</section><section>

![](./2.png)

</section><section>

![](./1.png)

</section><section>

1. 读信自动识别需要调优的结构，自动根据 Outlook 调优（提供 "显示原文" 选项支持原文显示）
2. 写信在处理行高等问题上，自动根据 Outlook 调优，放弃兼容 Web

</section>