上付き文字と下付き文字を同時に左揃えにできますか．

上付き文字と下付き文字を同時に使い，
それらの左端位置を揃える方法はありますか．
ご存知でしたら教えてください．
よろしくお願いします．

次のような回答はご遠慮願います．
・テーブルを使う
・後の方をposition: relative;にしleftを指定する（汎用性に欠けます）
・画像を使う

No.5 回答者： taloo 回答日時： 2010/02/18 05:02

何がしたいのかわかりませんでしたが、No.3の画像でわかりました。

数式はMathMLか画像で、、、としか言いようがないと思います。

sub{margin-left: -1ex}
とか、(未検証です)
2文字なら-2exとか、HTMLを書くときに字数に合わせてインラインスタイルシートで書くのがベターかと思います。


SVG、、、まあ、画像の一種ですが。
対応ブラウザなら<object>か<img>で表示できますし、テキストエディタで編集も可能です。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="30px" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="4px" y="18px"
style="fill:rgb(0,0,0);font-family:serif;font-size:10pt;text-anchor:start">X</text>
<text x="15px" y="12px"
style="fill:rgb(0,0,0);font-family:serif;font-size:10pt;text-anchor:start">2</text>
<text x="15px" y="24px"
style="fill:rgb(0,0,0);font-family:serif;font-size:10pt;text-anchor:start">0</text>
</svg>

この回答へのお礼

SVG（IE用に+VMLですね）を使う方法は余計面倒になりますね…（測る場所が増える）
よく考えるとleftを指定すると元の位置に空白が残ってしまうのでマージンを指定するのが無難ですね．
最終手段ですがoffsetWidthとかで前の要素（補足に書いた例の場合sub）の幅を取得して，後の要素の（sup）マージンを動的に指定するしかないでしょうか…

お礼日時：2010/02/18 08:17

No.4 回答者： ORUKA1951 回答日時： 2010/02/18 00:41

＞毎回添字の幅を計算して指定しないといけないという意味です

　なら無理です。
　XML + XSLT で字数を数えてなんて無理だと思います。
　HTMLを入力する時点で、<sub>の文字数はわかるので、その時点でrelattveのleftを指定するしかないでしょう。
　それか、もうTexで書くしか・・・

この回答へのお礼

>それか、もうTexで書くしか…
そうなんですよね，普段は数式をMathJaxで書いているのですが，
（ちなみに
MathJax.CallBack.Queue(
["Post", MathJax.Hub.Startup.signal, "Process"],
["Process", MathJax.Hub],
["Post", MathJax.Hub.Startup.signal, "End"]
).Process();
すれば後から追加した<script type="math/tex">をパースできます
余計なお世話ですね，すみません）
HTMLでシンプルに書いた方がいい場合もあるのです（説明は割愛）．

お礼日時：2010/02/18 08:21

No.3 回答者： ORUKA1951 回答日時： 2010/02/17 22:45

Texだと、$X_0^2$ですね。

MathMLで書くというのが本来でしょうね。
MathMLについては調べてください。

ここでは、HTMLでの方法に限定して説明
★後の方をposition: relative;にしleftを指定する（汎用性に欠けます）
　欠けません。というか必要です。
　添え字の幅が決まっていないため、その幅を指定しないと揃いません。
　もちろん、項自体をインラインブロックにして、内部でabsoluteを使うことも可能ですが、項の主たる文字(ここでいう x )の字数の関係でその文字をずらして、ずらした分前に寄せるという複雑でもっと汎用性の欠けるものになります。

<p class="math">
x₀<sup style="left:-0.5em;">2</sup>=y
<!-- ここでleft:-0.5emで、その前のsub内の文字数に合わせる -->
</p>
スタイルシート
<style type="text/css">
<!--
html,body{padding:0px;margin:0px;}
p.math{font-size:1.5em;padding-left: 5em;}
p.math sub{font-size:0.6em;}
p.math sup{font-size:0.6em;position:relative;top:-0.2em;}
-->
</style>

この回答への補足

すみません，汎用性に欠けるというのは，毎回添字の幅を計算して指定しないといけないという意味です（プロポーショナルフォントでは単純にemでは計算できません）．
MathMLは知っているのですが，ブラウザごとに対応状況が異なるので…

補足日時：2010/02/17 23:00

この回答へのお礼

画像まで付けていただき，ありがとうございますm(__)m

お礼日時：2010/02/17 23:01

No.2 回答者： ORUKA1951 回答日時： 2010/02/17 19:42

そもそもどういうマークアップなのですか？

たとえば、数学とか化学とか・・・

この回答への補足

すみません，説明が足りなかったかもしれません．
例えば，x₀²などです．
これで0と2の左端位置を揃えたいんです…無理でしょうか．
(subなどは非推奨だった気がするので，spanタグをCSSでいじったものと読み替えてください)

補足日時：2010/02/17 19:57

No.1 回答者： LHS07 回答日時： 2010/02/17 18:50

Ｗｏｒｄで数式エディターを使います。

この回答への補足

えっと…そういう意味ではないんですよ．
ちなみに数式エディタを使うのは「画像を使う」に該当します（確かWordでHTMLで書き出すと，IEではVML，それ以外のブラウザでは代替画像で表示されるはずです）

補足日時：2010/02/17 19:06