css - およびで一貫した行間隔を維持する

Question

<sup>またはタグを追加する<sub>と、テキストブロックの行間隔がずれる可能性がありますが、これを防ぐにはどうすればよいですか？

Answer 1

CSSを使用して、デフォルトのブラウザスタイルを上書きします。

sup, sub
{
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
}

sup { bottom: 1ex; }
sub { top: .5ex; }

バージョン7より前では、IEはvertical-align他のブラウザーの中で一意に扱われていたことに注意してください。このアプローチを使用するには、IE6以下のアンダースコアハックが必要です。

前：

後：

ソース

Answer 2

@DannyBeckettの優れた回答に加えて、まったく異なるアプローチがあります。これにより、動作時に活版印刷の品質が向上しますが、現在、最新のブラウザーのいくつかのフォント（主にMicrosoft Cフォント）を除いて動作しません。数年以内に現実的な選択肢になると思いますし、条件によっては今でも使えると思います。

を使用する代わりに、を使用して、上付き文字スタイルのグリフを使用するように指定supできます。<span class=sup>

.sup { font-feature-settings: "sups"; }

のブラウザプレフィックスバージョンと一緒にfont-feature-settings。

デモが利用可能です。最新のWindows環境では、他の場所ではほとんど機能しないことが期待できます。

これは、OpenType機能を使用してアクセスできる方法で、そのようなグリフを実際に含むフォントでのみ機能しますが、ブラウザーのサポートは増えていますが、まだ制限されています。ただし、機能する場合は、フォントを作成したタイポグラファーによって設計されたグリフを使用するため、フォントによく適合することが期待できます（ただし、この期待が常に満たされるとは限りません）。

したがって、行間隔の問題を取り除くことに加えて、これは、実装がsup通常の文字の縮小サイズバージョンをより高い垂直位置で使用するという問題（ストロークが細すぎる傾向があるため、この問題の発生を回避するため）にも役立ちます大きすぎると、実装は適度なサイズ縮小を使用する傾向があるため、結果は大きすぎます）。

ダウンロード可能なフォントを使用する@font-faceことは、この点で良い考えのように聞こえます。ただし、私がテストしたGoogleフォントの中で、Source Sans Proだけが文字の上付き文字のグリフを含んでいるようです。また、a）Googleがホストするものとして使用すると、何らかの理由でそれらにアクセスできません。b）FontSquirrelで処理すると、グリフは次のようになります。元の.ttfファイルでは問題ないように見えますが、そこには何らかの形で歪んでいます（たとえば、「h」は「t」よりも高く表示されます）。

（使用する理由と使用spanしない理由subは、後者の場合、デフォルトのサイズ縮小を回避するためにフォントサイズを100％に設定する必要があるためです。これは、IEにこのコンテキストでパーセンテージを誤って解釈するという厄介なバグがなければ、問題ありません。親要素のフォントサイズではなく、IEの要素のデフォルトのフォントサイズに関連するものとして。）