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

質問

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

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

回答No.5

神崎 渉瑠（@taloo）

何がしたいのかわかりませんでしたが、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）マージンを動的に指定するしかないでしょうか…

回答No.4

ORUKA1951

＞毎回添字の幅を計算して指定しないといけないという意味です
　なら無理です。
　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でシンプルに書いた方がいい場合もあるのです（説明は割愛）．

回答No.3

ORUKA1951

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>

お礼

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

補足

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

回答No.2

ORUKA1951

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

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

補足

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

回答No.1

LHS07

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

補足

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