下線をテキストの子孫と衝突させるべきですか？

CSS3のテキスト装飾モジュールには、テキスト全体の下に下線を配置するかどうかを指定するtext-underline-positionプロパティが含まれています。

またはベースラインのすぐ下で、テキストの子孫と衝突させます：

さて、下線を最後の手段としてのみ使用する方法を知っていますが、...使用する場合、最も一般的な方法は何ですか？各下線スタイルの長所と短所は何ですか？

最も一般的なものは何ですか？

まあ、一部のタイポグラファーは、下線はおそらくすべて一緒に避けるべきであり、下線はタイプライターまたはウェブ上のハイパーリンクでの使用にのみ適していると言うでしょう。しかし、創造性とは、創造的な方法でルールを破る機会を見ることです。そのため、このガイドをどれだけ自由に使用できるかを考えます。

Webでは、ベースラインのすぐ下に、子孫が重なり合っていることが最も一般的です。しかしこれは、これがこれまで主要なブラウザのデフォルトのレンダリングであったためです。

タイプライターでは、下線はディセンダーと重なりますが、わずかに異なります。2つの例（例）の途中にあります。下線のループgやp下線のセリフ（セリフフォント）など、ディセンダーのベースラインを見ると、そこに下線があります。したがって、子孫の下部と「結合」します。

長所と短所

下線がディセンダーとオーバーラップする利点は、行間隔（または「先頭」）にまったく影響しないことです。下線に対応するために行間のギャップを増やす必要はありません。

子孫を完全に排除することの利点は、読みやすさが重要な場合です。ただし、行間の間隔を広げる必要があるという欠点があります。とにかく多くの行間が許される状況であれば、ぜひともそれを選択してください。

Webを使用している場合、下線はハイパーリンクに大きく関連付けられています。そのため、リンクの一部ではないテキストについては、下線を一切使用しないでください。代わりに太字、斜体、またはすべて大文字を使用して、他の方法で表示するものを指定します。

下線が引かれたテキストは一般的に非常に小さいため、読者には違いはないというのが私の信念です。これは、設計者が気にすることができますことをものの一つである多大については、しかし、読者は決してしません。私の意見では、それはすべて文体的な選択です。

私は、ディセンダーでブレークするベースラインポジショニングを非常に好みます。つまりtext-decoration-skip: ink;、現在のところ、実際にはサポートされていません。これまでに2つのクラスを作成し、下線を削除するために子孫にスパンを追加しました。（テキストはphpで置換されるため、作成するコードはそれほど多くありません）。

オフセットのため、ボーダーボトムトリック（またはボトム属性）は使用しません。私の読者は、下線のオフセットが何よりもはるかに気を散らすものだと感じています。

可能な限り下線ではなく、太字、斜体、太字の斜体、またはカラーバリエーションに切り替えます。

CSS 2.1仕様の説明でtext-decoration: underlineは、その効果を詳細なしで下線として定義していますが、ブラウザーはベースラインの少し下に表示されるように実装しています。したがって、多くの場合、子孫（および文字の下にある発音区別符号）をカットします。

CSS3 Textドラフトにはtext-underline-position位置がありますが、どのブラウザーでもサポートされていないようです。（によるとcss666.com情報、それはIEでサポートされていますが、少なくとも、IE 9で、サポートはプロパティを認識して値を受け入れるに限定されるようautoに初期値、 -それは本当にサポートしていませんので。）更新：実はIE（バージョン6以降）はもう少しサポートされていますが、実際にはテキスト（！）の下ではなく下に置くだけです。

Scottの回答とJoonasのコメントで説明されているように、下線を使用して下線をシミュレートでき、「下線」スタイルをかなり適切に制御できます。これは、インラインではなく、単独で立つ下線付きのリンクに適しています。下線を含む印刷物をHTML化するなど、下線を付けたいインラインテキストの場合、通常のCSS下線はおそらくより良いでしょう。