Qiitaで記事のテキストを右揃えする

Qiitaのmathを使うと、TeX記法が使えるようになります。
少しひねった書き方をしてやれば、Qiitaで右揃えや中央ぞろえができるようになります。


## 右揃えのサンプル

矢印をクリックするとサンプルが開きます。

<details><summary>PC以外を想定しない場合（画面幅150mm）</summary><div>

```math
\def\の{\unicode[serif]{x306E}}
\def\pwidth{\hspace{150mm}{}}
\pwidth\llap{令和元年01月01日}\\
\rlap{○○税務署長殿}\pwidth\\
\pwidth\llap{住所：○○市○○町}\\
\pwidth\llap{氏名：ABCDE}\\
\pwidth\llap{所属：\href{http://google.co.jp}{株式会社○○}}\\
```

```math
\raise10mm{\large{確定申告書\の送付について}}
```

```math
\rlap{　上記について、下記\の通り送付いたします。}\pwidth\\
```

```math
記
```

```math
\rlap{（同封書類）}\pwidth\\
\rlap{１. \href{http://google.co.jp}{確定申告書}}\pwidth\\
\rlap{２. \href{http://google.co.jp}{青色申告決算書}}\pwidth\\
\rlap{３. 給与所得\の源泉徴収票}\pwidth\\
\rlap{４. 医療費\の領収書等}\pwidth\\
\pwidth\llap{以上}\\
```

</div></details>

<details><summary>PC／スマホ共用の場合（画面幅70mm）</summary><div>

```math
\def\spwidth{\hspace{70mm}{}}
\spwidth\llap{令和元年01月01日}\\
\rlap{○○税務署長殿}\spwidth\\
\spwidth\llap{住所：○○市○○町}\\
\spwidth\llap{氏名：ABCDE}\\
\spwidth\llap{所属：\href{http://google.co.jp}{株式会社○○}}\\
```

```math
\raise10mm{\large{確定申告書\の送付について}}
```

```math
\rlap{　上記について、下記\の通り送付いたします。}\spwidth\\
```

```math
記
```

```math
\rlap{（同封書類）}\spwidth\\
\rlap{１. \href{http://google.co.jp}{確定申告書}}\spwidth\\
\rlap{２. \href{http://google.co.jp}{青色申告決算書}}\spwidth\\
\rlap{３. 給与所得\の源泉徴収票}\spwidth\\
\rlap{４. 医療費\の領収書等}\spwidth\\
\spwidth\llap{以上}\\
```

</div></details>

## 記事の前に

ちなみに、ところどころで出てくる「\\\\」はTeX記法の改行命令です。
HTMLの\<br />のTeX版だと思ってくれてOKです。

また、「Qiitaで書くとき」のソースの前方にはスペースが入っていますので、
コピペするときはスペースを外してください。

## 右揃え

**実際の見た目**

```math
\def\の{\unicode[serif]{x306E}}
\hspace90mm\llap{吾輩は猫である}\\
\hspace90mm\llap{名前はまだ無い}\\
\hspace90mm\llap{どこで生れたかとんと見当がつかぬ}\\
\hspace90mm\llap{何でも薄暗いじめじめした所で}\\
\hspace90mm\llap{ニャーニャー泣いていた事だけは記憶している}\\
\hspace90mm\llap{吾輩はここで始めて人間というも\のを見た}\\
```

**Qiitaで書くとき**

A: 各行にllapを使った書き方

```
    ```math
    \hspace90mm\llap{吾輩は猫である}\\
    \hspace90mm\llap{名前はまだ無い}\\
    \hspace90mm\llap{どこで生れたかとんと見当がつかぬ}\\
    \hspace90mm\llap{何でも薄暗いじめじめした所で}\\
    \hspace90mm\llap{ニャーニャー泣いていた事だけは記憶している}\\
    \hspace90mm\llap{吾輩はここで始めて人間というものを見た}\\
    ```
```

B: arrayを使った書き方

```
    ```math
    \begin{array}{r}\\
    \hspace90mm\llap{吾輩は猫である}\\
    名前はまだ無い\\
    どこで生れたかとんと見当がつかぬ\\
    何でも薄暗いじめじめした所で\\
    ニャーニャー泣いていた事だけは記憶している\\
    吾輩はここで始めて人間というものを見た\\
    \end{array}
    ```
```

**仕組みの解説**

「\hspace」は幅をとるための命令です。後ろに長さを書きます。

```
    ```math
    テキスト\hspace10mm{とテキスト}
    ```
```

と書いてあげれば、

```math
テキスト\hspace10mm{とテキスト}
```

のようになります。

「\llap」は幅のないテキストを描画位置の左側に描画させる命令です。

```
    ```math
    A\llap{Text}
    ```
```

と書いてあげれば、

```math
A\llap{Text}
```

テキストが直前のテキストの上に重なって出ています。

これの合わせ技で、

+ hspaceで幅を指定
+ 指定した幅の右端にテキストを書いてやる

ようにしてあげれば、hspaceで指定した幅の中で右揃えになります。

\begin{array}は表を書く命令です。{r}をつけると表のテキストが右揃えになります。
例では「\hspace90mm\llap」を先頭行に書くことで、セルの幅を90ミリに固定しています。

## 右端でインデントをつける

基準点の左側にテキストを書くのがllapなら、基準点の右側にテキストを書くrlapもあります。

**実際の見た目**

```math
\hspace10mm\llap{\rm 開発環境：}\rlap{\tt Python\;3.8}\\
\hspace10mm\rlap{\tt OpenCV}\\
\hspace10mm\rlap{\tt Windows\;10}\\
\lower3mm{\hspace10mm\llap{執筆：}\rlap{\tt ドナルド・クヌース}}\\
```

**Qiitaで書くとき**

```
    ```math
    \hspace10mm\llap{開発環境：}\rlap{\tt Python\;3.8}\\
    \hspace10mm\rlap{\tt OpenCV}\\
    \hspace10mm\rlap{\tt Windows\;10}\\
    \lower3mm{\hspace10mm\llap{執筆：}\rlap{\tt ドナルド・クヌース}}\\
    ```
```

**仕組みの解説**

llapの中身は基準点の左側に描画されます。
rlapの中身は、基準点の右側に描画されます。

「\tt」はフォントのタイプライタ体を指定するための命令、「\;」はスペースを空ける命令です。
「\lower」はテキストの上に指定したスペースを空ける命令です。lower3mmで、縦に3ミリスペースがあきます。

基準点（コロンの右側に基準点があります）をhspaceで指定したあと、その左右にテキストを書いています。

## 中央ぞろえ

**実際の見た目**

```math
吾輩は猫である。
```
```math
名前はまだ無い。
```
```math
どこで生れたかとんと見当がつかぬ。
```
```math
何でも薄暗いじめじめした所で
```
```math
ニャーニャー泣いていた事だけは記憶している。
```
```math
\def\の{\unicode[serif]{x306E}}
吾輩はここで始めて人間というも\のを見た。
```


**Qiitaで書くとき**

```
    ```math
    吾輩は猫である。
    ```
    ```math
    名前はまだ無い。
    ```
    ```math
    どこで生れたかとんと見当がつかぬ。
    ```
    ```math
    何でも薄暗いじめじめした所で
    ```
    ```math
    ニャーニャー泣いていた事だけは記憶している。
    ```
    ```math
    吾輩はここで始めて人間というものを見た。
    ```
```

**仕組みの解説**

mathで書いてやれば、デフォルトで中央ぞろえになります。
「\\\\」で改行すると微妙に崩れるので、mathを並べて改行します。

## スマホで表示するときの根深い問題

### ひらがなの「の」問題

上の方法で書いた記事を開いたときに、「の」の字だけ不自然な感じになる環境があります。
気になる場合は、以下のような対応を入れることで回避してください。

```text
    ```math
    \def\の{\unicode[serif]{x306E}}
    吾輩はここで始めて人間というも\のを見た。
    ```
```

こう書くことで、画面で見た時の「の」がやや自然に見えます。

ひらがなの「の」を書くときに、代わりに「\の」を使います。
※エスケープに見えますが、「\def\の」は関数定義です。
　「の」が出てくるよりも前に、好きなところで一回呼んでいただければ大丈夫です。

MathJaxのSTIXフォントに、ひらがなの「の」が数式用のフォントとして収録されていることが原因だそうです。ユニコードで「の」を直接指定して出力することで対応します。
serifは明朝、sans-serifがゴシックになります。

一次資料や公式アナウンスが見つからないのでこちらだけ置いておきます。

参考：「の」の謎
https://togetter.com/li/848185