1.結論
See the Pen by F.M (@kobe2018) on CodePen.
2.プログラムの操作方法
上側のテキストエリアに半角英数字を入力し、「上付き」or「下付き」ボタンを押す。
↓
下側のテキストエリアにUnicodeで定義された「上付き文字」「下付き文字」に変換され出力されます。
尚、Unicodeで「上付き」「下付き」が未定義の文字は変換されず、そのまま出力されます。
(例:「Q」や「S」は未定義なのでそのまま出力)
3.補足説明
Unicodeでは「上付き文字」「下付き文字」が定義されています。
HTMLやMathMLのタグで表現する場合は以下
「上付き」はA<sup>test</sup>
です。→ Atest
「下付き」はA<sub>test</sub>
です。→ Atest
LaTeX記法で表現する場合は以下
「上付き」はA^{test}
です。→ Atest
「下付き」はA_{test}
です。→ Atest
タグでの表現はWebで幅広い活用でき、LaTeX記法は主に数式で活用できますが、テキストエディタしか使わない場合は、Unicode文字を使ったほうが便利です。
4.蛇足
今回ような自作した文字変換ツールをQiita上ににCodePenで動くように置いとけば、どこでも利用可能な事を知る。