CSSのみの上付き？

320

CSSだけで上付き文字を作成するにはどうすればよいですか？

外部リンクを上付き文字でマークするスタイルシートがありますが、文字を正しく配置するのに苦労しています。

私が現在持っているものは次のようになります：

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

しかし、それは機能しません。

当然、私は<sup>-tag contentを使用しますが、HTMLが許可される場合のみです...

css 
— ヘンリック・ポール
ソース
1
矛盾があるようです：上揃えが垂直ですが<サブ>ですか？たぶん<sup>を意味しますか？
— cletus 2009
「vertical-align：text-top」は、IE9では機能しませんでした。しかし、FireFox 4.0ではそうでした。少なくともWordpressのコンテキスト内で。
— JosefB 2011年
1
場合はcontentHTMLを許可され、関心事の分離は苦しむだろう。
— エヴァ

回答:

489

上付き文字はvertical-align: super、（およびそれに伴うfont-size削減）で実行できます 。

ただし、ここで他の回答、特にpaulmurrayとcletusによる回答を読んで、役立つ情報を確認してください。

— ピーター・ボートン
ソース
29
また、font-size実際の上付き効果を与えるには、を減らす必要があります。
— Nirmal
5
以下の@paulmurrayの回答は、より正確で包括的なものです。私見、それは受け入れられた答えでなければなりません。
— Doug Paul
3
「下」と言っても、回答を注文する方法が3つある場合は効果がありません。あなたは正しいけれども、しているポールの答えが ある、より良い1、そしてこれは、多くの票などの上に5回を持っているクレイジーです。
— Peter Boughton
188

正直なところ、CSSだけで上付き/下付きを行う意味がわかりません。便利なCSS属性はありません。次のような自家製の実装がたくさんあります。

.superscript { position: relative; top: -0.5em; font-size: 80%; }

または垂直配置を使用するか、私は他の方法を確信しています。事は、それは複雑になり始めます：

  • 行の高さでのCSS上付きの間隔。
  • 上付き文字/下付き文字用のCSSに注意して、なぜ上付き文字/下付き文字をCSS でスタイルしない方がよいのかについては間違いありません。

2番目のポイントは強調する価値があります。通常、上付き/下付きは実際にはスタイルの問題ではありませんが、意味を示しています。

補足：この質問はそれに関係していませんが、一般的な数学的上付きおよび下付き式のエンティティのリストについて言及することは価値があります。

sub / supタグはHTMLおよびXHTMLにあります。私はそれらを使用します。

CSSの残りの部分については、：after疑似要素とコンテンツ属性は広くサポートされていません。これを手動でHTMLに入れたくない場合は、Javascriptベースのソリューションが次善策だと思います。jQueryを使用すると、これは次のように簡単です。

$(function() {
  $("a.external").append("<sup>+</sup>");
};
— クレタス
ソース
11
「広くサポートされていない」とは、「IEでサポートされていない」という意味ですか？
— Boldewyn、2010年
2
quirksmode.org/css/contents.htmlは、IE7 以前または互換モードのIE8ではサポートされていません。
— cletus
4
...私が言ったことはまさにその通りです。
— Boldewyn、2010年
AタグをSUPタグで簡単にラップするには、次のコードを使用します。$（ "a.external"）。wrap（ "<sup />"）;
— ラッセル
2
最初は@PeterBoughtonによって受け入れられたソリューションを使用しましたが、行の高さを歪めないため、このソリューションを選択しました。
— Nuri Hodges 2013
129

CSSドキュメントには、すべてのHTML構成に対応する業界標準のCSSが含まれています。これらの日は、明示的に処理しないほとんどのWebブラウザ：つまりSUB、SUP、B、Iなど-彼ら（ちょっとみかん）に変換されSPAN、適切なCSSプロパティを持つ要素、およびレンダリングエンジンは、それだけで扱っています。

このページは付録Dです。HTML4のデフォルトのスタイルシート

必要なビットは次のとおりです。

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
— ポールマレー
ソース
13
これは機能しますが、失敗しline-heightます。台無しにしない唯一の方法は、私見line-height使用することですposition:relativecletusにより示唆されるように：stackoverflow.com/a/501689/260080
— マルコDemaio
27

上付きの要素が行の上部と下部の余白を変更しないように、はっきりと読みやすいテキストを作成することを目的としてページを作成していました-次の観察結果：

たとえば、メインテキストの場合line-height: 1.5em、上付きテキストの行の高さを減らして正しく表示する必要があります。使用しましたline-height: 0.5em。

また、vertical-align: superほとんどのブラウザーで正常に機能しますが、IE8では上付き文字の要素が存在する場合、その行の残りの部分が押し下げられます。代わりに、私vertical-align: baselineはネガティブtopと一緒に使用してposition: relative同じ効果を達成しましたが、ブラウザ間でうまく機能するようです。

したがって、「自作の実装」に追加するには：

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
— Lessan Vaezi
ソース
これは、divコンテナーに配置されると途切れます
— Alex G
10

以下は、Mozilla Firefoxの内部html.cssからの抜粋です。

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

したがって、あなたの場合、それは次のようなものになります：

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}
— クリスチャンスタドラー
ソース
5

これは別のクリーンなソリューションです：

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

このようにしてsup / subタグを使用することはできますが、常に段落の行の高さをめちゃくちゃにしてしまうというおかしな動作を修正しました。

だから今できること：

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

そして、段落の行の高さが台無しになってはいけません。

IE7、IE8、FF3.6、SAFARI4、CHROME5、OPERA9でテスト済み

を使用してテストしましたp {line-height: 1.3;}（行を近づけすぎない限り、これは適切な行の高さです）。それでも機能します。 "-0.6em"は、その行の高さでもサブ/サブテキストが収まるほどの少量であるためですお互いに行き過ぎないでください。

関連性のある詳細を忘れた私は常にページの1行目で DOCTYPE を使用しています（具体的にはHTML 4.01を使用しています<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">）。したがって、DOCTYPEがないか、標準/ほぼ標準モードをトリガーしないDOCTYPEが原因で、ブラウザーがquirkmode（または標準モードではない）のときにこのソリューションが適切に機能するかどうかはわかりません。

— マルコ・デマイオ
ソース
4

フォントサイズを変更する場合は、次のルールでサイズの縮小を停止することができます。

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}
— Freexe
ソース
1

これが関連しているかどうかは&sup2;わかりませんが、タグ内に他のHTMLタグを追加できなかったため、HTMLエンティティに関する問題を解決しました <label>。したがって、アイデアは、CSSまたはHTMLタグの代わりにASCIIコードを使用していた。

— Archrade
ソース
0

CSSプロパティfont-variant-positionは検討中であり、最終的にはこの質問に対する答えになる可能性があります。ただし、2017年の初めには、Firefoxのみがサポートしています。

.super {
    font-variant-position: super;
}

MDNを参照してください。

— hashchange
ソース
それは2020年の春であり、Firefox以外のブラウザではまだサポートされていません。ああそう…
— イェンス
0

関連している、または関連していない可能性があります。HTML要素として、またはテキストのspan + cssとして上付き文字を使用すると、ローカリゼーションプログラムでローカリゼーションに問題が発生する可能性があります。

たとえば、「サードパーティソフトウェア」としましょう。

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

翻訳者は「rd」をどのように翻訳できますか？いくつかのCyrrilic言語では空のままにできますが、他のエキゾチックな言語やRTL言語はどうですか？

この場合、上付き文字の使用を避け、「サードパーティソフトウェア」のような完全な表現を使用することをお勧めします。または、ここの他のコメントで述べたように、jQueryを介して上付き文字にプラス記号を追加します。

— ヌビア
ソース
-1

supが使用する正確な方法は次のとおりです。

.superscript{
    vertical-align:super;
    font-size:smaller;
}

これをgoogle chrome inspect要素で見つけました。

— HiPeoples
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.