* [CODE(HTMLe)[sup]] 要素型 (HTML, XHTML 1)
[1] 多くの[[用字系]] (たとえば[[フランス語]]) では、
適当な[[レンダリング]]のために[[上付き]]文字、
[[下付き]]文字が必要です。そのような場合の上付き文字のマーク付けのために
[CODE(HTMLe)[sup]] を使います。 [SRC[HTML 4]]
[8] 仕様書:
- [[HTML 4]]
--
[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)[
7. Pour une santé meilleure au 21e siècle
]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)[
Cie
]PRE]
必ず[[上付き]]にする例
[PRE(HTML example code)[
no
]PRE]
[[上付き]]でも通常通りでも良い例
[PRE(HTML example code)[
Mlle
]PRE]
[PRE(HTML example code)[
Mlle
]PRE]
;; 参考:
[CITE@en[Comments on 27 May 2005 Working Draft of XHTML 2]]
([[名無しさん]] [sage])
[19]
[[和蘭語]]の場合、
[PRE(HTML bad example code)[
2de
]PRE]
のように[[上付き]]にされることがよくあるものの、本来は
[PRE(HTML example code)[
2de
]PRE]
のように通常通りにするべきだとされているものもあります。
([[名無しさん]] [sage])
[21]
[CITE@ja-JP[クライアントサイド イメージマップ - Weblog]] ([CODE[2007-08-14 21:00:00 +09:00]] 版)
>
[PRE(HTML example code)[
おかしい※けれど、
]PRE]
>
[PRE(HTML example code)[
- ※ HTML 4.01 と XHTML 1.1 では、
]PRE]
([[名無しさん]])
[22]
[[脚注]]に用いた例
[PRE(HTML example code)[
二人零和確定完全情報ゲームである[1]。
]PRE]
[PRE(HTML example code)[
- ^
]PRE]
;; [CITE@ja[囲碁 - Wikipedia]] ([TIME[2008-06-06 18:13:15 +09:00]] 版)
([[名無しさん]])
[[#comment]]
** 関連
[16] [[上付き]]の [CODE(HTMLe)[[[sup]]]] に対して、
[[下付き]]の [CODE(HTMLe)[[[sub]]]] があります。
[17] [[装飾]]のための似た [[CSS]] の指定として
[CODE(CSS)[[[vertical-align]]]] [[特性]]の値
[CODE(CSS)[[[super]]]] があります。
[[#comment]]
** メモ
[20]
[[Classic Mozilla]] は [CODE(HTMLe)@en[[[sup]]]] の[[終了タグ]]''だけ''があるとそれ以降の文字が[[下付き]]になりました。
(大きさはそのまま。)
;; [[Netscape Navigator]] 4.8 で確認。
([[名無しさん]])
[[#comment]]
* メモ