* [CODE(HTMLe)[sup]] 要素型 (HTML, XHTML 1)

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

[8] 仕様書:
- [[HTML 4]]
-- <IW:HTML4:"struct/text.html#edef-SUP">

[2]
:[[名前空間名]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]]
:[[局所名]]:[CODE(HTMLe)[sup]]
:[[開始タグ]]:必須
:[[終了タグ]]:必須
:[[内容模型]]:[CODE(SGML)[(%[[inline]];)*]]
:出現できる文脈:[CODE(SGML)[%[[inline]]]] な文脈一般
:[[属性]]:
,属性名	,属性値	,既定値	,説明	,状態	,出典
,[CODE(HTMLa)[[[class]]]]	,	,	,[[級]]	,[HTML4] %[[coreattr]]
,[CODE(HTMLa)[[[dir]]]]	,	,	,[[書字方向]]	,[HTML4] %[[i18n]]
,[CODE(HTMLa)[[[id]]]]	,	,	,一意識別子	,[HTML4] %coreattr
,[CODE(HTMLa)[[[lang]]]]	,	,	,[[自然言語]]	,[HTML4] %i18n
,[CODE(HTMLa)[[[xml]]:lang]]	,	,	,自然言語	,[XHTML1]
,[CODE(HTMLa)[[[onclick]]]]	,	,	,	,[HTML4] %[[events]]
,[CODE(HTMLa)[[[ondblclick]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeydown]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeypress]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeyup]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmousedown]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmousemove]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,[[鼠]]移動時	,[[W3C]] [[勧告]]	,[HTML 4] %events
,[CODE(HTMLa)[[[onmouseout]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseover]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseup]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[style]]]]	,	,	,スタイル情報	,[HTML4] %coreattr
,[CODE(HTMLa)[[[title]]]]	,	,	,注釈的題	,[HTML4] %coreattr


[[#comment]]


** 代替

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

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

[[#comment]]


** レンダリング

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

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

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

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

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

[[#comment]]


** 例

[3] [SAMP(HTML)[E = mc<[CODE(HTMLe)[sup]]>2</[CODE(HTMLe)[sup]]>]]

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

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

[4] [SAMP(HTML)[<[CODE(HTMLe)[SPAN]] [CODE(HTMLe)[lang]]="[CODE(lang)[[[fr]]]]">M<[CODE(HTMLe)[sup]]>lle</[CODE(HTMLe)[sup]]> Dupont</[CODE(HTMLe)[SPAN]]>]]

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

[5] 他には、たとえば英語の [SAMP[21[SUP[st]] century]]
を [SAMP(HTML)[21<[CODE(HTMLe)[sup]]>st</[CODE(HTMLe)[sup]]> century]] とするのも適当でしょう。

[6] 仏蘭西語の例:
[PRE(HTML)[
<h2>7. Pour une sant&#233; meilleure au 21<sup>e</sup> si&#232;cle</h2>
]PRE]

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

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

必ず[[上付き]]にする例
[PRE(HTML example code)[
<abbr xml:lang="fr" title="compagnie" lang="fr">C<sup>ie</sup></abbr>
]PRE]

必ず[[上付き]]にする例
[PRE(HTML example code)[
<abbr xml:lang="fr" title="num&#233;ro" lang="fr">n<sup>o</sup></abbr>
]PRE]

[[上付き]]でも通常通りでも良い例
[PRE(HTML example code)[
<abbr xml:lang="fr">Mlle</abbr>
]PRE]

[PRE(HTML example code)[
<abbr xml:lang="en">M<sup>lle</sup></abbr>
]PRE]

;; 参考:
[CITE@en[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]
[[和蘭語]]の場合、
[PRE(HTML bad example code)[
<span xml:lang="nl" lang="nl">2<sup>de</sup></span>
]PRE]
のように[[上付き]]にされることがよくあるものの、本来は
[PRE(HTML example code)[
<span xml:lang="nl" lang="nl">2de</span>
]PRE]
のように通常通りにするべきだとされているものもあります。

([[名無しさん]] [sage])


[[#comment]]


** 関連

[16] [[上付き]]の [CODE(HTMLe)[[[sup]]]] に対して、
[[下付き]]の [CODE(HTMLe)[[[sub]]]] があります。

[17] [[装飾]]のための似た [[CSS]] の指定として
[CODE(CSS)[[[vertical-align]]]] [[特性]]の値
[CODE(CSS)[[[super]]]] があります。

[[#comment]]


** メモ

[[#comment]]


* メモ