開発者向け
2021年の電子メールの実装：Outlookで機能する垂直方向の配置でインラインタグを作成する方法
By Martin Hejtmanek
ハイライトされたインラインテキストと丸みを帯びた角を組み合わせるのは、Outlookにとってもう1つのほとんど不可能な作業です。実用的な解決策はありますか？
この記事は、2021シリーズの電子メールの実装の一部です。紹介を見逃した場合は、基本と生成された電子メールをテストする方法をお読みください。
このパートでは、前回の記事「 Outlookで機能する影付きの丸いボタン」の知識を活用して、インラインの丸いタグを作成します。これらのタグを使用して、特定のテキストを強調表示したり、残りのコンテンツから除外したりします。
あなたは丸いボタンの経験がそれを達成するのに十分な知識をもたらすと思うでしょう。ブロック要素のコンテキストで機能しているように見えるものが、インラインコンテンツのコンテキストでは同じではないことを最初はほとんど知りませんでした。
丸みを帯びたタグの基本的なマークアップ
前の記事の基本的なマークアップから始めることができます。
これが基本的な丸められたタグコードです。 Outlookをサポートするには、強調表示されたテキストの長さに基づいて幅を推定するためのロジックが必要であることに注意してください（ここでは78px ）。
Review 結果は悪くはありませんが、完璧でもありません。
タグテキストは、テキストの残りの部分と垂直方向に整列されていません。
また、長いテキストではうまく機能しません。テキストを新しい非表示の行に折り返すことで切り取られるか、幅が広すぎるためにレイアウトが歪む可能性があります。
この意図的に誇張された例を参照してください。最後の単語「壁」が切り取られて次の隠線に配置され、レイアウトが壊れています。
コンテンツを適合させる
いつものように、空白を使用する標準クライアント用の単純なHTMLソリューションがありwhite-space: nowrap text-overflow: ellipsis 。ただし、Outlookはそのいずれもサポートしていないため、Outlook v:roundrect VMLオブジェクトにmso-wrap-style:noneスタイルを追加する必要があります。
これには2つの結果があります。
- 収まらないときにテキストが折り返されることはなくなりました。
- 十分な水平方向のスペースがない場合、オブジェクトはそのコンテンツに基づいてサイズ変更されます。
後者は、オブジェクトがさらに拡張され、レイアウトが壊れ続けることも意味します。
また、強調表示されたテキスト内の横の間隔が最小限に制限されていることに気付くかもしれません。
VMLオブジェクトには明示的な内部パディングの概念がないため、回避する必要があります。 を使用していますそれを達成するためにオブジェクトテキストの周りの文字。これは正確な調整ではありませんが、作業は完了します。
次に、オブジェクトが必要以上に大きくならないようにする必要があります。含まれている場合は、短縮して省略記号（3つのドット、ドット-ドット-ドットとも呼ばれます）を追加します。
電子メールクライアントでは動的スクリプトの実行が許可されていないため、電子メールの本文を生成するコードでチェックを行います。
使用可能な最大幅を定義し、前に幅の計算に使用したのと同じロジックに基づいて文字制限を決定します。シンプルだが効果的：
ワークフロータグはさまざまな場所で使用される可能性があるため、少し余裕を持たせて、使用可能な幅の100％をターゲットにすることすらしていません。 85〜90％のようです。
インラインコンテンツの垂直方向の配置
解決すべき最後の問題は、丸められたタグのテキストを同じ行の残りのテキストと垂直に揃えることです。
頭に浮かぶ最初のアイデアは、ボタンに使用したposition:relativeを活用することです。
残念ながら、相対位置の参照フレームは親ブロック要素であり、調整している要素の元の位置ではないため、これは標準のHTMLの場合とは異なります。
したがって、相対位置を適用すると、ワークフローラベルに必要なスペースが失われるだけでなく、元のコンテキストから完全に外れて配置されます。
v:roundrectを別のVMLオブジェクトまたはグループにネストしようとしましたが、私の観察によれば、このような複雑なVML構造はOutlookではまったくサポートされていません。 1つのレベルのVMLオブジェクトとそのプロパティのみを処理できます。
VMLを使用した他の適切なソリューションは見つかりませんでしたが、キャンペーンモニターの概要で垂直方向の配置に関するこの情報に出くわし、すべての電子メールクライアントで多かれ少なかれサポートされるはずであることがわかりました。
vertical-alignを使って少し実験とテストを行った後、次のことを発見しました。
-
vertical-alignキーワード値が機能しないか、必要な適切な垂直方向の配置を取得するための適切な参照ポイントを提供しません。 - 標準のHTML要素（
SPANpx値は、Outlookで適切に機能し、ネストされたVMLオブジェクトの位置を調整することもできます。これはまさに必要なものです。 - HTMLベースの電子メールクライアントは、既存のHTMLとCSSに基づいてコンテンツを適切に配置し、
px調整によりコンテンツが正しく配置されないため、Outlookにのみ適用します。
したがって、私が行ったのは、ハードコードされたvertical-align:-6px SPANでワークフローラベルを条件付きでラップすることでした。それでおしまい。
現在使用しているワークフローラベルの最終的なコードは次のとおりです。
Review この最終調整により、ワークフローラベルは適切に配置されます。
同じ原則が言及にも当てはまります。
次は何ですか？
これは2021シリーズの電子メールの実装の第3部でしたが、まだ学ぶべきことがあります。最も興味のあるものに基づいてこれらの記事の1つを続けるか、シリーズ全体を読んでください。
- 2021年の電子メールの実装：生成された電子メールの基本とテスト方法
- 2021年の電子メールの実装：Outlookで機能する影付きの丸いボタン
- 2021年の電子メールの実装：Outlookで機能する垂直方向の配置でインラインタグを作成する方法
- 2021年の電子メールの実装：テーブルの間隔と垂直方向の配置に関するOutlookの詳細
- 2021年の電子メールの実装：Outlookのコンテナーに丸みを帯びた角を追加する方法
次の記事では、いくつかのレイアウトの基本について説明し、テーブルセルの垂直方向の配置についても簡単に説明します。
