htmlでシフトされたサブテキスト

Question

写真の最初の部分に示されているように通常のテキストに追加する 'サブ'タグのテキストを追加するのではなく、第2部に示されている）。最初の部分のように、テキスト全体が途切れることなく動作するはずです。 2番目の部分のサブテキストは、サブスタイルからスタイルを継承する必要があります。

Answer 1

最も有望なアプローチはthis questionで見つけることができます。

また、CSS「ruby」の使用を検討することもできますが、どこに行きたいかわからない場合があります。

<div style="font-size: x-large; "> 
 
    establishment 
 
    <ruby style="ruby-position: under; "> 
 
    <rb>establishment</rb> 
 
    <rt style="transform: translateY(3em); ">establishment</rt> 
 
    </ruby> 
 
    establishment 
 
</div>

残念ながら、ruby-positionが悪いツー存在しないブラウザをサポートしています。したがって、上記の例ではtransformの使用。