svgのフォントで、右側の上の文字を右端に寄せつつ、右側の下の文字の左端を上の文字の左端に寄せたいです。

Question

実現したいこと

右側の上の文字を右端に寄せつつ、
右側の下の文字の左端を上の文字の左端に寄せたいです。

発生している問題・分からないこと

上のように、右寄せにすると、下の文字まで右寄せになってしまうのが難点です。

<style>
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000">
	<text x="0" y="60">←</text>
	<text x="20" y="50" font-family="sans-serif">あいうえお</text>
	<text x="20" y="70" font-family="serif">あいうえお</text>
	<text x="1000" y="60"text-anchor="end" text-anchor="end" style="float: right; display: block;">←</text>
	<text x="980" y="50" font-family="sans-serif" text-anchor="end">りんご</text>
	<text x="980" y="70" font-family="serif" text-anchor="end">apple</text>
</svg>

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

チャットgptなどで調べましたが、text-anchor="start"にして、文字の量に合わせて自分でx座標の位置を調整するとか出ました。
これが、svgの限界なんですか。もしそうだとしたら、svgのフォントは全く役に立たない代物です。
こんなシステムの発案者がおかしいです。ヽ(`Д´)ﾉﾌﾟﾝﾌﾟﾝ。
また、自分は上はsvgで、下が普通のhtmlとcssが嫌です。
そんなことさせられるくらいなら毒を吐きます。
贅沢は言っていないつもりです。

補足

特になし

Answer 1

要素の幅を取得して動的に変更するくらいしかないかと思います。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000">
  <text x="0" y="60">←</text>
  <text x="20" y="50" font-family="sans-serif">あいうえお</text>
  <text x="20" y="70" font-family="serif">あいうえお</text>

  <text x="1000" y="60" text-anchor="end">←</text>
  <text id="line1" x="980" y="50" font-family="sans-serif" text-anchor="end">りんご</text>
  <text id="line2" y="70" font-family="serif">apple</text>
</svg>

<script>
const l1 = document.getElementById('line1')
const l2 = document.getElementById('line2')
l2.setAttribute('x', 981 - l1.getBBox().width)
</script>

上記の例では #line1 要素を基準としていますので、 #line2 要素のほうが幅が大きい場合は途中で切れることになります

Answer 2

SVGだと「自動的に2つの <text> の左端を揃える」のような機能はなかったと思います。JavaScript コードで位置を操作すれば可能ですが。

細かい仕様が不明ですが、HTML のルビでペアにするとよいのかもしれません。

<div style="display:flex">
<ruby style="ruby-position:under">あいうえお<rt>あいうえお</rt></ruby>
<div style="flex: 1"></div>
<ruby style="ruby-position:under; ruby-align:start">りんご<rt>apple</rt></ruby>
</div>
<!-- 注: ruby-align プロパティは Google Chrome 128 からサポート、Safari では未サポート -->

Comments

[sembokulove]

回答ありがとうございます。試してみましたが解決できませんでした。
下のフォントが上のフォントの中央に配置されます。
これは期待外れの結果です。
やはり、svgではなくhtmlとcssでのみしか対応できないのですね。
svgの開発者は頭がぶっ飛んでいます。ヽ(`Д´)ﾉﾌﾟﾝﾌﾟﾝ
では、以前駅名表の上半分はsvgだとやりやすいといった人もちょっと頭がぶっ飛んでいますね。

[int32_t]

下のテキストは ruby-align プロパティで調整するか、<ruby>をやめて inline-block にテキストを2段入れて、下段は text-align プロパティで調整ですかね。

[sembokulove]

回答ありがとうございます。試してみましたが解決できませんでした。
ありがとうございまず。svgはあきらめます。