sup 要素 (HTML)

[1] 多くの用字系 (たとえばフランス語) では、適当なレンダリングのために上付き文字、下付き文字が必要です。そのような場合の上付き文字のマーク付けのために sup を使います。 HTML 4

[10] CSS では、 vertical-align 特性の値を super (sup ではないことに注意。) とすると上付きでレンダリングされます。

仕様書

[33] HTML Standard (2016-11-21 08:12:17 +09:00) https://html.spec.whatwg.org/#the-sub-and-sup-elements

意味

[38] 要素名の sup は、 superscript (上付き) に由来します。

[9] sup 要素型が適当なのは、言語的その他の理由で文章が成立するために上付きである必要がある時だけです。単に装飾のためだけの理由で上付きにしたい場合は、スタイル・シートを使うべきです。

[42] 特定の意味を持った印刷上の慣習 (typographical conventions) でのみ使わなければならず、見た目を整えるためだけに使ってはなりません。一般に、要素が無かったとしたら意味が変わってしまうような場合のみ、使うべきです。 >>33

[43] 言語によっては略語で使います。 >>33

<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span>

[47] 英語の first は 1^st と表記することもあります。 HTML では 1st となります。

[56] 数式に使うことができます。 >>33

<var>E</var>=<var>m</var><var>c</var><sup>2</sup>

MathML を使うべき (encourage) ですが、それほどのものでもなければ sup を使えます。 >>33

[55] LaTeX のロゴの表現に使うのは不適切です。 >>33

[46] ... と仕様書にはありますが、固有名詞の表記 (やロゴ) の場合、それが装飾的なものなのか、意味に関わる本質的なものなのかの区別が困難ですし、無理に区別する意味も薄いように思われます。

分類

[34] フロー内容、語句内容、触知可能内容です >>33。

文脈

[35] 語句内容を使える場所に置くことができます >>33。

内容属性

[39]

大域属性

内容

[36] 語句内容を内容とすることができます >>33。

DOM インターフェイス

[41] 要素インターフェイスは、 HTMLElement です。 >>33

レンダリング

[11] 視覚UA では、普通 vertical-align: super でレンダリングします。文字の大きさが周りよりも小さ目になることもあります。

[15] 上付きにすると文字の位置が行の本来の高さとずれるために、利用者エージェントによってはその行だけ違った高さになってしまうことがあります。

[12] テキスト・ブラウザでは上付きにレンダリングできないのが普通ですが、例えば w3m は直前に ^ を挿入して上付きであることがわかるようにします。

[13] >>12 の方法だけでは、 sup が入れ子になっている場合や sup 内の字数が多い場合などに利用者の混乱を招くかもしれませんから、適宜色を変えるなどの他の方法も使う方が好ましいでしょう。

[14] 非視覚系の利用者エージェントでは、 sup のレンダリングに工夫が必要です。音声UA では言語と前後の文脈情報を利用して 1st を first と読み上げることもできるでしょうが、一般の場合を考えると、 >>12 のように直前に少し間を置いて上付きなどと補うなどとなるでしょう。

例

[3] E = mc2

HTML 4 仕様書に載っていた例です。これがフランス語だとは思えませんが:)

(数学用字系, 化学用字系なんてのを考えれば、まあ、許容範囲でしょうか。 sub 要素型の本来想定されていた適用対象の1つでもありますし。)

[4] Mlle Dupont

こちらは正真正銘、仏蘭西語。これも HTML 4 仕様書からです。

[5] 他には、たとえば英語の 21^st century を 21st century とするのも適当でしょう。

[6] 仏蘭西語の例:

<h2>7. Pour une sant&#233; meilleure au 21<sup>e</sup> si&#232;cle</h2>

[7] sup がよく使われるのは >>3 のような数学的な場面と >>4-5 のように省略形などの言語的慣習による場面 (他に、 TM や ® などが見られます。) のようです。

[18] 仏蘭西語の場合、省略形の後の部分が母音字だけを含むときは、必ず上付きにします。その他の場合は、上付きでも通常通りでも構いません。

必ず上付きにする例

<abbr xml:lang="fr" title="compagnie" lang="fr">C<sup>ie</sup></abbr>

必ず上付きにする例

<abbr xml:lang="fr" title="num&#233;ro" lang="fr">n<sup>o</sup></abbr>

上付きでも通常通りでも良い例

<abbr xml:lang="fr">Mlle</abbr>

<abbr xml:lang="en">M<sup>lle</sup></abbr>

参考: Comments on 27 May 2005 Working Draft of XHTML 2 http://lists.w3.org/Archives/Public/www-html-editor/2005JulSep/att-0040/XHTML2_20050527_comments.html#chap_TextMod

(名無しさん [sage])

[19] 和蘭語の場合、

<span xml:lang="nl" lang="nl">2<sup>de</sup></span>

のように上付きにされることがよくあるものの、本来は

<span xml:lang="nl" lang="nl">2de</span>

のように通常通りにするべきだとされているものもあります。

(名無しさん [sage])

[21] クライアントサイドイメージマップ - Weblog (2007-08-14 21:00:00 +09:00 版) http://ryus.s21.xrea.com/w/item/942

おかしい<sup>※</sup>けれど、

<ul class="notes">
 <li><sup>※</sup> HTML 4.01 と XHTML 1.1 では、

(名無しさん)

[22] 脚注に用いた例

<b>二人零和確定完全情報ゲーム</b>である<sup id="cite_ref-0" class="reference"><a href="#cite_note-0" title="">[1]</a></sup>。

<ol class="references">
<li id="cite_note-0"><b><a href="#cite_ref-0" title="">^</a></b>

囲碁 - Wikipedia (2008-06-06 18:13:15 +09:00 版) http://ja.wikipedia.org/wiki/%E5%9B%B2%E7%A2%81

(名無しさん)

[23] 123期新入生アンケート (2008-08-20 14:54:46 +09:00 版) http://www.tomikou.net/tokshuu/enq/123/index.html#q8

文武両道&loz;&loz;

文武両道◊^◊

(名無しさん)

[24] クレジットカード - シティ VISAカード・マスターカード CITI CARDS JAPAN (2008-10-03 10:47:47 +09:00 版) http://www.citibank.co.jp/ccsi/notice/amazon_service/popup.html

<td width="100%" valign="top"><font size="2" class="sml">ご入会いただいた際の特典としてご案内させていただきました2,000円キャッシュバック特典の適用は2008年12月15日をもって終了させていただきます。まだカード発行から1年が経過していらっしゃらないお客様はお早めにご利用ください。<br>
なお、2,000円キャッシュバックはカード発行から1年以内に、Amazon.co.jp<img src="../../imgs/r.gif" alt="" width="7" height="7" hspace="1" vspace="2" border="0">が販売する商品を購入された場合が対象となります。Amazonマーケットプレイス</font><font class="cap" size="1"><sup>TM</sup></font><font size="2" class="sml">でのご利用は対象外となりますのでご注意ください。</font></td>

r.gif は「®」。

[26]